flex-box: shrink before wrap

Question

Mam układ z wieloma kolumnami, z których niektóre są stałe, a inne rozciągają się w razie potrzeby. Dlatego używam Flexbox. Dodatkowo chcę i muszę używać flex-wrap.

Konstrukcja jest tak:

<div class="row" style="display: flex; flex-flow: row wrap"> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
    <div class="column stretch" style="flex: 1 1 auto"></div> 
    <div class="column fixed" style="flex: 0 0 auto"></div> 
</div> 

proszę zobaczyć http://jsfiddle.net/mh3rypqj/1/

Teraz wszystko działa zgodnie z oczekiwaniami, o ile mówimy o pustych div. Po umieszczeniu litery p w kolumnie rozciągania, zawijanie i zmniejszanie zachowuje się inaczej.

Moje oczekiwane zachowanie w przypadku zmniejszania się przestrzeni: Najpierw zmniejsz, a następnie zawiń. Zmniejsz .stretch. Po osiągnięciu minimalnej szerokości zawiń elementy.

Zachowanie, które otrzymuję, gdy raz wstawię literę .stretch: Najpierw zwiń, a następnie skurcz. Rząd jest najpierw owinięty. Zmniejszenie następuje tylko po zapakowaniu wszystkiego.

Chcę mieć Najpierw skurcz, a następnie opakuj. Krótko mówiąc, chcę, aby drugi rząd w JSFiddle zachowywał się tak samo jak pierwszy. Co mam do zrobienia?

Answer 1

Set flex-basis równa min-width:

.column.stretch { 
    flex: 1 1 100px; /* or 1 0 100px, and no more need in min-width at all */ 
    max-width: 300px; 
    min-width: 100px; 
    background: red; 
} 

edited JSfiddle example

Answer 2

Przy zastosowaniu elastycznego przepływ, kurczy się tylko zdarzy PO osiągnięciu wielkości flex-podstawa. Tak więc ustawienie elastycznej podstawy: 100px, jak zasugerowano powyżej, oznacza, że ​​linia ma zacząć się owijać, gdy nie ma wystarczającej ilości miejsca na wszystkie przedmioty, łącznie z podstawą 100px kolumny. Gdy skończy się pokój, przedmioty zostaną zawinięte do nowej linii. Kiedy przestrzeń znów się wyczerpie, powstanie nowa linia. Jest to kontynuowane, dopóki każdy element nie ma własnej linii. Dopiero wtedy - jeśli nie ma jeszcze miejsca na podstawę - jeśli nie ma już miejsca, przedmioty zaczną się kurczyć.

Powodem, dla którego widzisz różnicę w stosunku do akapitu treści, jest fakt, że nie określasz wyraźnie elastyczności. Jeśli podstawa flex jest ustawiona na auto, to będzie przywracana do szerokości elementu. Jeśli szerokość nie jest ustawiona, podstawa powraca do rozmiaru elementu po wyrenderowaniu treści, a następnie skorygowana o min. I maks. Szerokość. A więc 300px w tym przypadku, ponieważ ustawiłeś maksymalną szerokość. Zauważ, że jeśli zdejmiesz maks. Szerokość, której przedmiot uzyska pełną szerokość 100% i natychmiast zostanie sprowadzony do własnej linii. Następnie, gdy zmieniasz rozmiar strony, której element zaczyna się zmniejszać, ponieważ ma już własną linię i nie ma wystarczająco dużo miejsca na ten początkowy rozmiar.

Nadzieję, że pomaga!