flex容器中的等高行

Question 1

如您所见，list-items第一个row具有相同的height。但是第二个项目row有不同heights。我希望所有物品都穿制服height。

有什么方法可以在不提供固定高度且仅使用flexbox的情况下实现此目的？

这是我的 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>

展开摘要

Question 2

答案是不。

在flexbox规范中提供了原因：

6.伸缩线

在多行flex容器中，每行的交叉尺寸是在行中包含flex项所需的最小尺寸。

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

但是，在CSS网格布局中可以使用相等高度的行：

CSS网格布局中的等高行

否则，请考虑使用JavaScript。

Question 3

您现在可以使用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

等等...

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

遗憾的是，浏览器（开箱即用）仍然不支持容器查询/元素查询，以使其能够根据容器大小而不是页面大小更改列数，从而很好地工作（使用起来非常好）与可重复使用的Web组件）。

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout

浏览器对网格布局的支持：

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

Question 4

不，没有设置固定高度（或使用脚本）就无法实现。

这是我的2个答案，显示了如何使用脚本来实现类似的目标：

Question 5

如果您知道要映射的项目，则可以一次完成一行。我知道这是一种解决方法，但是可以。

对我来说，我有4个项目每行，所以我把它分成4两排，每排height: 50%，摆脱flex-grow，都<RowOne />和<RowTwo />在<div>用flex-column。这将解决问题

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Question 6

在父母身高固定的情况下（在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;
}

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

Question 7

关于第一个答案中提到的交互式替代解决方案...可以在加载时使用jQuery来使flex列在所有行中具有相同的高度：

$(function () {
    // Set the cards height to be the same in all lines
    $('.same-wrap-height').each(function () {
        let heighest = 0;

        $('.new-card', this).each(function () {
            if ($(this).height() > heighest) {
                heighest = $(this).height();
            }
        });

        $('.new-card', this).height(heighest);
    });
});

我的Bootstrap布局：

<div class="row same-wrap-height">
    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>

    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>
</div>

Question 8

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

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

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

展开摘要

Question 10

您可以通过固定“ P”标签的高度或固定“列表项”的高度来实现。

我已经通过固定“ 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>

Question 11

对于相同的高度，您应该更改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>