html – flex容器中的等高行

概述如您所见，第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。 有没有办法实现这一点，而不给出固定高度，只使用flexbox？ 这是我的代码 .list { display: flex; flex-wrap: wrap; max-width: 500px;}.list-item { background-color: #ccc; di 如您所见，第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。

有没有办法实现这一点，而不给出固定高度，只使用flexBox？

这是我的代码

.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 >  <li >    <div >      <h2>Box 1</h2>      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>    </div>  </li>  <li >    <div >      <h3>Box 2</h3>      <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit.</p>    </div>  </li>  <li >    <div >      <h3>Box 2</h3>      <p>Lorem ipsum dolor</p>    </div>  </li>  <li >    <div >      <h3>Box 2</h3>      <p>Lorem ipsum dolor</p>    </div>  </li>  <li >    <div >      <h1>h1</h1>    </div>  </li></ul>

解决方法 答案是不。

原因在flexBox规范中提供：

07000

In a multi-line flex container,the cross size of each line is the minimum size necessary to contain the flex items on the line.

换句话说，当基于行的Flex容器中有多行时，每行的高度(“交叉大小”)是在行上包含d性项所需的最小高度。

但是，CSS GrID Layout中可以使用相等高度的行：

> Equal height rows in CSS Grid Layout

否则，请考虑JavaScript替代方案。

总结

以上是内存溢出为你收集整理的html – flex容器中的等高行全部内容，希望文章能够帮你解决html – flex容器中的等高行所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。