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