具有嵌套 flex 的固定宽度列

Question

我是 flexbox 的新手。我需要显示动态行，并且我的所有列都应该垂直对齐。在下面的示例中，我所有的红色框都应该是相同的宽度。有人可以查看下面的代码并告诉我是什么我失踪了？

.vc {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.container {
  display: flex;
}

.red {
  background: orangered;
  display: flex;
  flex-direction: row;
}

.green {
  background: yellowgreen;
}

.blue {
  background: steelblue;
}

.container div {
  font-size: 5vw;
  padding: .5em;
  color: white;
  flex: 1;
}

<div class="vc">
  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b080808098080</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b080808</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</div>

Answer 1

试试这个：

.vc { 显示：弯曲； 弹性方向：列； justify-content: 之间的空格； } 。容器 { 显示：弯曲； } 。红色的 { 背景：橙红色； 显示：弯曲； 弹性方向：行； 宽度：50%； /*或任何其他*/ } 。绿色 { 背景：黄绿色； } 。蓝色 { 背景：钢蓝； } . 容器 div { 字体大小：5vw； 填充：0.5em； 白颜色; 弹性：1 1 自动； }

这解决了您的问题，但我认为 flexbox 不是正确的解决方案，因为它仅在一个方向上运行良好，而不是在您想要的两个方向（行和列）上运行。考虑改用 CSS-grid。