Question

我有一个列表，在我的网站中，我将在包装器中有图像，所有高度都不同。我希望每个弹性行都是最高图像的高度。

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

我的问题是我想将项目对齐到每个弹性行的底部，我可以通过以下方式执行此操作：

align-items: baseline

这个问题在于，所有的li都不是同一个高度。

如何保持所有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成为（嵌套的）弹性容器。

然后将每个div（现在是弹性项目）对齐到ul的底部。

＆＃13;

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

＆＃13;

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

＆＃13;

Revised Fiddle

Flex等高柱和底部对齐

1 个答案: