Flex容器中的等高行

Question

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

有没有办法实现这一目标而不提供固定高度且只使用 flexbox ？

这是我的code

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

答案是否定的。

原因在flexbox规范中提供：

  

6. Flex Lines

     

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

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

然而，CSS网格布局中可以使用相等高度的行：

• Equal height rows in CSS Grid Layout

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

Answer 2

您现在可以使用display: grid完成：

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  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，但它的行为非常类似于flexbox 容器，网格内的项目可以是flex 。

在您需要响应式网格的情况下，网格布局也非常方便。也就是说，如果您希望网格每行的列数不同，则只需更改grid-template-columns：

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

依旧......

您可以将其与媒体查询混合，并根据页面大小进行更改。

遗憾的是，浏览器（开箱即用）中仍然不支持container queries / element queries，以便根据容器大小更改列数而不是页面大小（这将是非常适合与可重复使用的Web组件一起使用。）

有关网格布局的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

支持浏览器的网格布局：

https://caniuse.com/#feat=css-grid

Answer 3

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

以下是我的2个答案，展示了如何使用脚本来实现这样的目标：

• How to get header from cards or similar to have the same height with flex box?

• Same height for flex items in the flex-direction column flex container

Answer 4

如果您知道要映射的项目，可以通过一次执行一行来实现此目的。我知道这是一种解决方法，但它确实有效。

对我来说，我每行有4个项目，所以我把它分成两行，每行4行height: 50%，摆脱flex-grow，<RowOne />和{{1在<RowTwo />中<div>。这样就可以了解

flex-column

Answer 5

这似乎适用于具有固定父级高度的情况（在Chrome和Firefox中测试）：

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

如果由于某种原因无法使用网格，也许它就是解决方案。

Answer 6

你应该为你的 flex 显示使用 justify-content:stretch 和 align-items:stretch 属性，我认为这会使每个元素的高度，在 flex 中，相等

Answer 7

在您的情况下，将自动计算高度，因此您必须提供高度
使用这个

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

Answer 8

你可以通过固定“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 9

您可以使用flexbox：

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

Answer 10

对于相同的高度你应该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>