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

问题描述

正如你所看到的，第一个行中的列表项具有相同的高度。但第二个行中的项目有不同的高度。我希望所有物品都有统一的 height 。

有没有办法在不给固定高度的情况下实现此目的，只能使用 flexbox ？

这是我的代码

  .list {display：flex; flex-wrap：wrap; max-width：500px;}。list-item {background-color：#ccc;显示：flex;填充：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 class =list-item> < div class =list-content> < h3>方框2< / h3> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。< / p> < / DIV> < /锂> < li class =list-item> < div class =list-content> < h3>方框2< / h3> < p> Lorem ipsum dolor< / p> < / DIV> < /锂> < li class =list-item> < div class =list-content> < h3>方框2< / h3> < p> Lorem ipsum dolor< / p> < / DIV> < /锂> < li class =list-item> < div class =list-content> < H1> H1< / H1> < / DIV> < / li>< / ul>  

解决方案

原因在flexbox规范中提供：

6。 Flex行

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

换句话说，当一个基于行的flex容器中有多行时，每行的高度cross size）是包含行上的flex项目所需的最小高度。

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

• CSS Grid布局中的等高行
  
  
  

  否则，请考虑使用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:

  • Equal height rows in CSS Grid Layout

  Otherwise, consider a JavaScript alternative.

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