我有一个列表,在我的网站中,我将在包装器中有图像,所有高度都不同。我希望每个弹性行都是最高图像的高度。
<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将内容对齐到底座。我知道你可以用表格单元格或绝对定位来解决这个问题。
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>
答案 0 :(得分:1)
使每个li
成为(嵌套的)弹性容器。
然后将每个div(现在是弹性项目)对齐到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;
}
&#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;