CSS3 Flex：将孩子拉到右边 [英] CSS3 Flex: Pull child to the right

问题描述

以下是我的小提琴

  ul {display：flex; justify-content：flex-start; flex-direction：row; align-items：center;宽度：100％; height：100px;背景：＃333; padding：15px;} ul li {padding：15px; margin：5px;背景：#efefef; border：1px solid #ccc;显示：inline-block; list-style：none;}＃item-1 {height：50px;}＃item-2 {height：70px;}  

 < ul> < li id =item-1>主页< / li> < li id =item-2>菜单< / li> <李>详情< /锂> <李>东西< /锂> < li>设定< / li>< / ul>  

我希望将弹性盒内的最后一项拉到右侧（我的小提琴中的设置），同时保持所有其他项目的方式。 设置-item也应该垂直居中放置。所有内容。

align-self：flex-end push （我希望它在右边）。

我非常喜欢使用柔性盒的解决方案，因为我的项目具有可变高度，应该始终垂直居中。

什么是最简单的方法？

感谢您的帮助！

解决方案

简单修复，使用自动调整边距：

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

您可能也不想使用 width：100 ％，以便元素保持在可见区域内：

  ul {
 display：柔性; 
 justify-content：flex-start; 
 flex-direction：row; 
 align-items：center; 
 / *宽度：100％; * / 
 height：100px; 
背景：＃333; 
 padding：15px; 
} 
  

http://jsfiddle.net/dwLHE/

另见http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

here's what I have Fiddle

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>

I want the last item inside the flex-box to be pulled to the right ("Settings" in my fiddle) while keeping all other items the way they are. The "Settings"-item should also be centered vertically and everything.

align-self: flex-end pushes the item to the bottom (I want it on the right).

I would very much prefer a solution using flex-box because my items have variable heights and should always be centered vertically.

What is the cleanest way to achieve this?

Thanks for your help!

解决方案

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/

See also http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/#auto-margins

这篇关于CSS3 Flex：将孩子拉到右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！