html - flex 等高列和底部对齐

Question

我有一个列表，在我的站点中，我将在包装内放置图片，所有图片的高度都不同。我希望每个 flex 行都是最高图像的高度。

<ul>
    <li><div class="wrapper">hello</div></li>
    <li class="large"><div class="wrapper">hello</div></li>
    <li><div class="wrapper">hello</div></li>
    ....
</ul>

我已经通过以下方式实现了这一目标:

ul{
    display: flex;
    flex-flow: row wrap;
}

我的问题是我想将元素对齐到每个 flex 行的底部，我可以通过以下方式做到这一点:

align-items: baseline

这里的问题是所有李的高度都不一样。

我怎样才能保持所有 li 的高度相同(不指定高度，因为它将是动态的)并使用 flex 将内容与底部对齐。我知道您可以通过表格单元格或绝对定位来实现这一目标。

JSFiddle

ul{
  list-style-type:none;
  display: flex;
  flex-flow: row wrap;
}
li{
  background: gold;
  border: 1px solid grey;
  flex-basis: 20%;
}

.wrapper{
  background: blue;
   //what here?
}

.large{
  height: 250px;
}

<ul>
<li><div class="wrapper">hello</div></li>
<li class="large"><div class="wrapper">hello</div></li>
<li><div class="wrapper">hello</div></li>
<li><div class="wrapper">hello</div></li>
</ul>

Answer 1

使每个 li 成为(嵌套的) flex 容器。

然后将每个 div(现在是一个 flex 元素)对齐到 ul 的底部。

ul {
  list-style-type:none;
  display: flex;
  flex-flow: row wrap;
}

li {
  background: gold;
  border: 1px solid grey;
  flex-basis: 20%;
  display: flex;             /* NEW */
  align-items: flex-end;     /* NEW */
}

.wrapper {
  background: blue;
  width: 100%;               /* NEW */
}

.large{
  height: 250px;
}

<ul>
  <li>
    <div class="wrapper">hello</div>
  </li>
  <li class="large">
    <div class="wrapper">hello</div>
  </li>
  <li>
    <div class="wrapper">hello</div>
  </li>
  <li>
    <div class="wrapper">hello</div>
  </li>
</ul>

Revised Fiddle