html – flex容器中的等高行

发布时间：2020-12-14 21:20:36 所属栏目：资源来源：网络整理

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

如您所见，第一行中的列表项具有相同的高度。但是第二行中的项目具有不同的高度。我希望所有物品的高度均匀。

有没有办法实现这一点，而不给出固定高度，只使用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 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>

解决方法

答案是不。

原因在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容器中有多行时，每行的高度(“交叉大小”)是在行上包含弹性项所需的最小高度。

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

> Equal height rows in CSS Grid Layout

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!