Question

我想使一个弹性项目在另一个较短的相邻弹性项目下面拉伸，以便它将填充任何空白空间。

在以下代码笔中，“第一项”（绿色背景）应填充第二项（粉红色背景）下的空间。

这是密码笔： https://codepen.io/anon/pen/bKaygK

这是代码：

html

<div class='wrap'>
  <div class='first-item'>
    <div>some text</div>
    <div>some more text</div>
    <div>some more text again</div>
  </div>
  <div class='second-item'>some box</div>
</div>

css

.wrap {
  display: flex;
  /*flex-wrap: wrap; not working*/
}

.first-item {
  background: lightgreen;
}

.second-item {
  align-self: baseline;
  background: pink; 
}

Answer 1

我认为最好依靠 old 浮动技术来实现这一目标：

.wrap {
  display: inline-block;
}

.first-item {
  background: lightgreen;
}

.second-item {
  background: pink; 
  float:right;
}

<div class='wrap'>
  
  <div class='second-item'>some box</div>
  <div class='first-item'>
    <div>some text</div>
    <div>some more text</div>
    <div>some more text again</div>
  </div>
</div>

Answer 2

我认为，如果添加第三项，则可以达到期望的结果，实际上是包含第一项和第二项的第二层包装。这似乎暗示着，如果将一个flex容器放在另一个flex容器中，则即使未明确定义，内部flex容器也将隐式成为其包含的flex容器的flex项。

.first-wrap {
  display: flex;
  
/*   flex-wrap: nowrap; */
}

.second-wrap {
  display: flex;
}

.first-item {
  background: lightgreen;
  
}

.second-item {
  align-self: baseline;
  background: pink;
}


.second-wrap {
 background: lightgreen;
 }

<div class='first-wrap'>
  <div class='second-wrap'>
  <div class='first-item'>
    <div>some text</div>
    <div>some more text</div>
    <div>some more text again</div>
  </div>
  
  <div class='second-item'>some box</div>
  <div>
</div>

如何使一个伸缩项目填充另一个相邻的伸缩项目下的空白空间（包装）

2 个答案: