这是我的小提琴
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
将项目推到底部(我希望它在右侧)。
我非常喜欢使用弹性框的解决方案,因为我的项目具有可变的高度,并且应始终垂直居中。
实现这一目标的最干净方法是什么?
感谢您的帮助!
简单修复,使用自动调整边距:
ul li:last-child {
margin-left: auto;
}
您可能还希望不使用width: 100%
以便元素保留在可见区域内:
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/
另请参阅 https://www.w3.org/TR/css-flexbox-1/#auto-margins