柔性容器中的高度相等的行

正如你所看到的，第一row的list-items具有相同的height 。 但是第二row物品有不同的heights 。 我希望所有的物品都有统一的height 。

有没有办法实现这一点，而不是固定的高度 ，只使用flexbox ？

这是我的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> 

Answer 1

答案是不。

原因在Flexbox规范中提供：

6.柔线

在多行柔性容器中，每行的交叉大小是包含行上的柔性项目所需的最小大小。

换句话说，当在一个基于行的柔性容器中有多条线时，每条线的高度（“交叉尺寸”）是包含该线上的柔性条目所需的最小高度。

然而，在CSS网格布局中，等高行是可能的：

• CSS网格布局中的等高行

否则，请考虑使用JavaScript替代方法。

Answer 2

不，如果不设置固定高度（或使用脚本），则无法实现这一点。

Answer 3

在你的情况下，高度将自动计算，所以你必须提供高度
用这个

 .list-content{ width: 100%; height:150px; } 

Answer 4

您可以通过固定“P”标签的高度或固定“list-item”的高度来完成。

我已经通过固定“P”

并应该隐藏溢出。

 .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%; } p{height:100px;overflow:hidden;} 

 <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> 

Answer 5

相同的高度，你应该chage你的CSS“显示”属性。 有关更多详细信息，请参阅给定示例

 .list{ display: table; flex-wrap: wrap; max-width: 500px; } .list-item{ background-color: #ccc; display: table-cell; 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>