在多行flex容器中是否可以有相等的高度列？ [英] Is it possible to have equal height columns in a multi-line flex container?

问题描述

您可以看到，第一个行中的列表项有相同的 height 。但第二个行中的项目具有不同的 height 。我想让所有项目都有统一的 height 。

是否还有固定高度，而且只使用 flexbox ？

b
$ b

这是我的代码

  .list {display：flex; flex-wrap：wrap; max-width：500px;}。list-item {background-color：#ccc;显示：flex; padding：0.5em;宽度：25％;利润率：1％; margin-bottom：20px;}。list-content {width：100％;}  

 < ul class =list> < li class =list-item> < div class =list-content> < h2>框1< / h2> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> < / div> < / li> < li class =list-item> < div class =list-content> < h3>框2< / h3> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> < / div> < / li> < li class =list-item> < div class =list-content> < h3> box 2< / h3> < p> Lorem ipsum dolor< / p> < / div> < / li> < li class =list-item> < div class =list-content> < h3>框2< / h3> < p> Lorem ipsum dolor< / p> < / div> < / li> < li class =list-item> < div class =list-content> < h1> h1< / h1> < / div> < / li>< / ul>  

解决方案

原因在flexbox规范中提供：

6。 Flex行

在多行flex容器中（即使只有一行），
的交叉大小每行是在行上包含
flex项目（在对齐之后由于 align-self ）所需的最小大小，并且
行在flex容器中与 align-content
属性对齐。

换句话说，当基于行的flex容器中有多行时，每行的高度（cross size）是 flex项目在线

。

考虑使用Javascript替代方案。

As you can see, the list-items in the first row have same height. But items in the second row have different heights. I want all items to have a uniform height.

Is there anyway to achieve this without giving fixed-height and only using flexbox?

Here is my code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

解决方案

The answer is NO.

The reason is provided in the flexbox specification:

6. Flex Lines

In a multi-line flex container (even one with only a single line), the cross size of each line is the minimum size necessary to contain the flex items on the line (after alignment due to align-self), and the lines are aligned within the flex container with the align-content property.

In other words, when there are multiple lines in a row-based flex container, the height of each line (the "cross size") is the "minimum size necessary to contain the flex items on the line".

Consider a Javascript alternative.

这篇关于在多行flex容器中是否可以有相等的高度列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！