控制flexbox中的包装行为

Question

我在flex容器中有三个div。它们旨在分为两行：

• 第一行：
  • 宽度固定的
  • 其他应该延伸剩余宽度
• 第二行：
  • 一项

但是div 1延伸到100％宽度（并将div 2推到下一行）;

＆＃13;

＆＃13;

*{
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

以下是一个示例：codepen.io

Answer 1

将flex:0 0 yourwidth应用于第一个区块似乎就是您的目标。

* {
  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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

注意：

1. 通过将flex-basis设置为0而不是默认auto，强制第一项保留在第一行。通过此调整，flex-grow: 1使用行上的可用空间，而不考虑内容大小。 Read more.
2. 第二项是固定宽度。它不会增长或缩小。它仍然是200px。
3. 第三项设置为始终存在于自己的行中。