弹性容器中的等高行 [英] Equal height rows in a flex container

查看：29
本文介绍了弹性容器中的等高行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如您所见，第一个 row 中的 list-items 具有相同的 height.但是第二个row 中的项目有不同的heights.我希望所有项目都具有统一的 height.

有没有办法在不提供固定高度而只使用flexbox的情况下实现这一目标?

这是我的代码 

.list {显示:弹性；flex-wrap: 包裹;最大宽度:500px；}.项目清单 {背景颜色:#ccc；显示:弹性；填充:0.5em；宽度:25%；右边距:1%；底边距:20px；}.list-内容{宽度:100%；}

    <li class="list-item"><div class="list-content"><h2>框1</h2><p>Lorem ipsum dolor sat amet, consectetur adipisicing elit.</p>

<li class="list-item"><div class="list-content"><h3>框2</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing elit.</p>

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

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

<li class="list-item"><div class="list-content"><h1>h1</h1>

解决方案

答案是否定的.

原因在 flexbox 规范中提供:

<块引用>

6.弹性线

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

换句话说，当基于行的弹性容器中有多行时，每行的高度(交叉尺寸")是包含行上弹性项目所需的最小高度.

然而，在 CSS 网格布局中可以使用等高的行:

否则，请考虑 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 any way 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, the cross size of each line is the minimum size necessary to contain the flex items on the line.

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 height necessary to contain the flex items on the line.

Equal height rows, however, are possible in CSS Grid Layout:

Otherwise, consider a JavaScript alternative.

这篇关于弹性容器中的等高行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆