css - 具有嵌套 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 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .container {
      display: flex;
    }

    .red {
      background: orangered;
      display: flex;
      flex-direction: row;
      width: 50%; /*or any other*/
    }

    .green {
      background: yellowgreen;
    }

    .blue {
      background: steelblue;

    }

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

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