时间戳

首页 > 解决方案 > 为 flex 容器中的元素的子元素赋予相同的高度

html - 为 flex 容器中的元素的子元素赋予相同的高度

问题描述

现在，我的橙色方块（flex 容器中的孩子）按预期工作，它们的高度都相同，但我不能让它适用于红色方块。

我想让红色项目（孩子的孩子）的高度都与最高的高度相同。

我的 HTML 如下：

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.col  {
  flex: 1;
  background:orange;
  margin: 1px;
}

.col-item {
  margin: 15px;
}
<html>
  <body>
    <div class="container">
        <div class="col">
          <div class="col-item" style="background: red;">
                <h2>Column 1</h2>
    <p>Hello World</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>

          </div>
      </div>
      <div class="col">
        <div class="col-item" style="background: red;">
              <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
          </div>
      </div>
    </div>
  </body>
</html>

标签： htmlcssflexbox

解决方案

父容器（container在您的示例中）上的 flex 属性不会传递给子元素，即使它们也是容器。因此，您还需要制作coldivs display:flex，如下所示：

.col  {
    flex: 1;
    display: flex;           /* make this a flex container so it has flex properties */
    justify-content: center; /* to horizontally center them in this flex display */
    /* REST OF YOUR CSS HERE */ 
}

请注意，您还需要添加flex: 1;到内容本身，使其不会缩小，例如：

.col-item {
    flex: 1;
    /* REST OF YOUR CSS HERE */ 
}

使用您的代码的工作示例：

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.col {
  flex: 1;
  background: orange;
  margin: 1px;
  display: flex;
  justify-content: center;
}

.col-item {
  flex: 1;
  margin: 15px;
}
<html>

<body>
  <div class="container">
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 1</h2>
        <p>Hello World</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 2</h2>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>
        <p>Hello World!</p>

      </div>
    </div>
    <div class="col">
      <div class="col-item" style="background: red;">
        <h2>Column 3</h2>
        <p>Some other text..</p>
        <p>Some other text..</p>
      </div>
    </div>
  </div>
</body>

</html>

推荐阅读