参见英文答案 >
Control order of vertically stacked elements using only CSS Flexbox1个
如何使用CSS将“3”移动到列表的末尾？
如何使用CSS将“3”移动到列表的末尾？
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.end {
align-self: flex-end; /* this doesn't work; how can I move 3 to the end? */
}
<ul>
<li class="end">3</li>
<li>1</li>
<li>2</li>
</ul>
解决方法
使用订单属性.在这种情况下,order：1有效,因为其他元素的顺序默认设置为0.
ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
li {
border: 1px solid black;
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
.end {
order: 1;
}
<ul>
<li class="end">3</li>
<li>1</li>
<li>2</li>
</ul>
