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不是正确的解决方案，因为它只能在一个方向上运行，而不是在你想要的两个方向（行和列）。请考虑使用CSS-grid。

固定宽度列，嵌套flex

1 个答案: