在Flexbox中控制包装行为

Question

I have three divs inside a flex container. They are intended to exist in two rows:

• First row:
  • one with fixed width
  • other should stretch on remaining width
• Second row:
  • one item

But div 1 stretches to 100% width (and pushes div 2 to the next line);

 *{ box-sizing: border-box; } .parent{ display: flex; flex-flow: row wrap; } .parent > div{ flex: 2 1 auto; border: 1px solid gray; text-align: center; } .parent > div.child1{ background: lightblue; } .parent > div.child2{ flex: 0 1 200px; background: lightgreen; } .parent > div.child3{ flex-basis: 100%; background: lightcoral; } .parent > div.child1-1{ background: lightblue; flex-basis: 80%; max-width: 80%; } .parent > div.child2-1{ flex: 0 1 20%; background: lightgreen; } 

 <div class="parent"> <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div> <div class="child2">second</div> <div class="child3">third</div> </div> <br><br><br> <div class="parent"> <div class="child1-1">Should be like this, but with fixed width. <br>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div> <div class="child2-1">second</div> <div class="child3">third</div> </div> 

Here is an example: codepen.io

Answer 1

Applying flex:0 0 yourwidth to the first block seems to be what you are after.

 * { box-sizing: border-box; } .parent { display: flex; flex-flow: row wrap; } .parent>div { border: 1px solid gray; text-align: center; } .parent>div.child1 { background: lightblue; flex: 0 0 70%; /* your required width here*/ } .parent>div.child2 { flex: 1; background: lightgreen; } .parent>div.child3 { flex-basis: 100%; background: lightcoral; } 

 <div class="parent"> <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div> <div class="child2">second</div> <div class="child3">third</div> </div> 

Answer 2

 .parent { display: flex; flex-flow: row wrap; } .parent > div.child1 { flex: 1; /* 1 */ background: lightblue; } .parent > div.child2 { flex: 0 0 200px; /* 2 */ background: lightgreen; } .parent > div.child3 { flex: 0 0 100%; /* 3 */ background: lightcoral; } .parent > div { border: 1px solid gray; text-align: center; } * { box-sizing: border-box; } 

 <div class="parent"> <div class="child1">first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </div> <div class="child2">second</div> <div class="child3">third</div> </div> 

Notes:

1. The first item is forced to remain on the first line by setting the flex-basis to 0, not the default auto . With this adjustment, flex-grow: 1 uses the free space on the line, without regard for the content size. Read more.
2. The second item is fixed width. It can't grow or shrink. It remains 200px.
3. The third item is set to always exist on its own line.