Question

使用flexbox设置元素样式时，我经常会有两种不同类型的布局，一种填充其父级（flex：1）并为子级划分其空间，另一种使用其子级空间计算其自身的高度（flex）：未设置）。

为了添加更多功能，将div包装在另一个与子进程无法区分的div中也是很好的 - 特别是在React的情况下，为了组成组件。

我如何将div包装起来，以便在子进行时扩展为其父级，否则保持在子高度。

这是一个JS bin用于解释 - https://jsbin.com/muvihal/edit?html,css,output

.a {
  display: flex;
  flex: inherit;
  border: 5px dashed red;
  justify-content: flex-start;
  align-items: stretch;
  flex-direction: column;
}
.b {
  flex: 1;
  background: blue;
}
.b2 {
  height: 200px;
  background: blue;
}

<div class="container">
  <div class="a">
    <div class="b">
    </div>
  </div>
</div>

<div class="container">
  <div class="a">
    <div class="b2">
    </div>
  </div>
</div>

我希望虚线元素'a'自动采用与蓝色元素b和b2相同的大小，如此图像https://i.imgur.com/8tu7uYM.png

在CSS flexbox中，我如何包装div以使其像孩子一样布局？

0 个答案: