box: shrink before wrap
I have a layout with multiple columns, of which some are fixed and others stretch as needed. Therefore, I use flexbox. Additionally, I want and need to use flex-wrap.
The structure is like this:
<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>
Please see http://jsfiddle.net/mh3rypqj/1/
Now everything works as expected as long as we are talking about empty divs. Once I put ap in the stretch column, wrapping and shrinking behaves differently.
My expected behaviour when space is getting smaller: First shrink, then wrap . Shrink the .stretch. Once min-width is reached, wrap the elements.
The behaviour I get once I put the p in .stretch: First wrap, then shrink . The row is first wrapped. Shrinking only occurs after everything is wrapped.
I want to have First shrink, then wrap . In short, I want the second row in the JSFiddle to behave just like the first. What do I have to do?
Set flex-basis equal to 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
When using flex-flow, shrinking only ever happens AFTER the flex-basis size is reached. So setting flex-basis: 100px as suggested above, means you want the line to start wrapping once there's not enough room for all the items, including that column's 100px basis. Once room runs out, items will wrap down onto a new line. When space runs out again, a new line will form. This continues until each item has its very own line. Only then - if there's still not space for the basis - will the item(s) start to shrink.
The reason you're seeing a difference with the paragraph of content is because you're not explicitly setting a flex-basis. If flex-basis is set to auto, then it will fallback to the item's width. If width isn't set, the basis falls back to item's size once its content is rendered, then corrected by min and max width. So 300px in this case because you set a max-width. Notice that if you take off the max-width that item gets a full 100% width and instantly gets flowed down to its own line. Then when you resize the page that item starts to shrink because it already has its own line and there's not enough space for that initial size.
Hope that helps!
I'll throw this in, based on what worked for me in the answers here. It grows, it shrinks, it wraps. (Syntax is verbose for clarity.) Note that the flex-basis/min-width value and the user's current browser zoom change what happens. AFAICS.
<div id="outer"
style="
display: flex;
flex-wrap: wrap;
">
<div id="inner"
style="
flex-grow: 1; /* it can grow */
flex-shrink: 1; /* it can shrink */
flex-basis: 225px; /* arbitrary depending on design */
min-width: 225px; /* equal to flex-basis */
max-width: 20%; /* (100% - margins)/number of boxes */
padding: .5em; /* half of desired margin */
">
<...content...>
</div>
</div>
上一篇: 在Safari中无法正常工作
下一篇: 包装：收缩前收缩