CSS3 Flex: 把孩子拉到右边

这是我的小提琴

ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
width: 100%;
height: 100px;
background: #333;
padding: 15px;
}


ul li {
padding: 15px;
margin: 5px;
background: #efefef;
border: 1px solid #ccc;
display: inline-block;
list-style: none;
}


#item-1 {
height: 50px;
}


#item-2 {
height: 70px;
}

<ul>
<li id="item-1">Home</li>
<li id="item-2">Menu</li>
<li>More</li>
<li>Stuff</li>
<li>Settings</li>
</ul>

我希望弹性框中的最后一个项目被拉到右边 (“设置”在我的小提琴) ，同时保持所有其他项目的原样。“设置”-项目也应该是中心垂直和一切。

align-self: flex-end将项目推到底部(我希望它在右边)。

我更喜欢使用 Flex-box 的解决方案，因为我的项目有可变的高度，应该总是垂直居中。

实现这一目标的最干净的方法是什么？

谢谢你的帮助！

html
css

89598 次浏览

小开

最佳答案

Simple fix, use an auto-adjusting margin:

ul li:last-child {
margin-left: auto;
}

You may also want to not use width: 100% so that the element stays inside the visible area:

ul {
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
/* width: 100%; */
height: 100px;
background: #333;
padding: 15px;
}

http://jsfiddle.net/dwLHE/