Czy mogę wymusić zawijanie wszystkich elementów za pomocą CSS flexbox?

Question

Mam trzy elementy bloku, które rozmieszczam z CSS Flexbox. (W moim przypadku, w którym się dwa <select>s po obu stronach elementu <div>ider; Buduję kontrolę List Builder.)

Co chcę jest:

• Aby środku (dzielnik) zajmują minimalną ilość miejsca.
• Aby element na dowolnym końcu (tj. Elementy sterujące wyborem) miał minimalną szerokość i rozwijał się, aby wypełnić możliwe miejsce.
• Aby mieć wszystkie trzy elementy na jednej linii, gdy nie ma wystarczająco dużo miejsca, poziomy w pojemniku (ex: szerokość przeglądarki)
• Aby wszystkie elementy owinąć pionowo, gdy nie znajduje się wystarczająco dużo miejsca poziomej do pozycji ich wszystkich poziomo.

Flexbox wykonuje wspaniałą pracę z wszystkich tych punktów, z wyjątkiem , z wyjątkiem dla ostatniego wymagania. Nie mogę wymusić, aby elementy były zawijane, jeśli jest ich mniej niż wystarczająco, aby wszystkie były w jednym wierszu.

używam dość prostą konfigurację schematu flexbox osiągnąć układ:

.container { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    align-items: center; 
} 

select { 
    flex-basis: 10em; 
    flex-grow: 1; 
} 

.divider { 
    flex-basis: 3em; 
    flex-grow: 0; 
    text-align: center; 
} 

Problem z tym jest to, że jeśli szerokość pojemnik jest ustawiony na dowolną kwotę, która jest na tyle szeroki, dla jednego Select Plus dzielnika , zawinie końcowy wybór, ale nie jest dzielnikiem. Dostanę selekcja plus dzielnik w jednej linii, która wygląda brzydko.

skrzypce ilustruje ten problem:

http://jsfiddle.net/5s0yf74w/1/

jest to możliwe do osiągnięcia pożądanego rezultatu przez moją szczypanie CSS zachowując ogólny układ schematu flexbox?

Answer 1

Nie sądzę, że dokładnie to, czego chcesz, jest możliwe bez opartej na JS iteracyjnej logiki układu (wiesz, pozwól przeglądarce wyrenderować, obliczyć szerokości i warunkowo dodać/usunąć klasy). Myślę jednak, że rozwiązanie podane w this fiddle jest rozsądnym podejściem tylko CSS. Zasadniczo istnieją dwa układy, szeroki, w którym dokonałem tylko jednej zmiany flex-wrap: nowrap;, aby zapobiec opisywanej przez ciebie nieprzyjemnej skrzynce, w której nie wszystkie trzy elementy są owinięte. I wąski , który przesłonił kierunek zginania do flex-direction: column;. Oba można łatwo zmienić, stosując odpowiednie zapytanie o media z rozsądnym min-width.

Answer 2

Nie dokładnie to, o co prosisz, ale (może być) jeszcze lepsze. Możesz ustawić bez podziału.Dostaniesz iluzję dzielnika, gdy są potrzebne, ale nie dzielnik gdy nie

#wide { 
 
    width: 31em; 
 
} 
 
#narrow { 
 
    width: 10em; 
 
    top: 100px; 
 
} 
 

 

 
.container { 
 
    position: absolute; 
 
    border: solid red 1px; 
 
    background-image: radial-gradient(circle at center, blue 5px, transparent 5px); 
 
} 
 
.fakecontainer { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: row; 
 
    align-items: center; 
 
    margin-right: -1em; 
 
} 
 

 
select { 
 
    flex-basis: 11em; 
 
    flex-grow: 1; 
 
    
 
    margin-right: 1em; 
 
} 
 

 
select:nth-child (2) { 
 
    flex-basis: 10em; 
 
    
 
}

<div class="container" id="wide"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div> 
 
<div class="container" id="narrow"> 
 
<div class="fakecontainer"> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
    <select multiple> 
 
     <option>One of many</option> 
 
     <option>Two of many</option> 
 
    </select> 
 
</div> 
 
</div>

Trzeba tylko dodatkowy element, fakecontainer, aby zrobić kilka siekać z marginesie

If naprawdę potrzebujesz podziału w wąskiej opcji, po prostu musisz zrobić podobny trik z dolnym marginesem (daj mi znać, jeśli tak jest)