Question

如何强制Flexbox项目具有相同的高度。

在网上找到的例子中，人们使用align-items: stretch css属性，但我的例子更复杂。

Here是一个codepen示例：

＆＃13;

.container {
  background-color: red;
  display: flex;
  align-items: stretch;
}

.boxes {
  background-color: yellow;
  margin: 5px;
  display: flex;
}

.boxes-column {
  flex-direction: column;
}

.box {
  background-color: green;
  width: 100px;
  margin: 5px;
}

.heading {
  background-color: pink;
}

＆＃13;

<body>
  <div class="container">
    <div class="boxes boxes-column">
      <div class="heading">This is heading</div>
      <div class="boxes">
        <div class="box">Content content content content content content content</div>
        <div class="box">Content content</div>
        <div class="box">Content</div>
        <div class="box">Contento contento</div>
        <div class="box">Cc</div>
        <div class="box">Contetno contento contento</div>
      </div>
    </div>
    <div class="boxes boxes-column">
      <div class="heading">This is heading 2</div>
      <div class="boxes">
        <div class="box">Content</div>
        <div class="box">Contentno Contetn</div>
        <div class="box">C</div>
      </div>
    </div>

  </div>
</body>

＆＃13;

以下项目的高度＆＃39;标题＆＃39;以及项目的高度＆＃39;标题2＆＃39;应该是平等的。

Answer 1

使用此css，现在这些框具有相同的高度：

.container > .boxes > .boxes {
  flex: 1;
}

请看下面的代码：

.container {
  background-color: red;
  display: flex;
  align-items: stretch;
}

.boxes {
  background-color: yellow;
  margin: 5px;
  display: flex;
}

.boxes-column {
  flex-direction: column;
}

.box {
  background-color: green;
  width: 100px;
  margin: 5px;
}

.heading {
  background-color: pink;
}

.container > .boxes > .boxes {
  flex: 1;
}

<body>
  <div class="container">
    <div class="boxes boxes-column">
      <div class="heading">This is heading</div>
      <div class="boxes">
        <div class="box">Content content content content content content content</div>
        <div class="box">Content content</div>
        <div class="box">Content</div>
        <div class="box">Contento contento</div>
        <div class="box">Cc</div>
        <div class="box">Contetno contento contento</div>
      </div>
    </div>
    <div class="boxes boxes-column">
      <div class="heading">This is heading 2</div>
      <div class="boxes">
        <div class="box">Content</div>
        <div class="box">Contentno Contetn</div>
        <div class="box">C</div>
      </div>
    </div>

  </div>
</body>

相同大小的Flexbox项

1 个答案: