Flex等高柱和底部对齐

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> 

我已经使用实现了这一点：

align-items: baseline 

：

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

我的问题是，我要对齐的项目，以每个柔性行的底部，我可以通过这样做

这里的问题就是所有的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（现在是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