Flexbox与正确的MANY项目对齐

Question

每个人都知道如何在flexbox中将一个项目对齐。但是如何将两个最后的元素对齐并保持传统的左边？我在这里有一个例子。我希望类.r的元素与标题菜单的右侧对齐。

＆＃13;

＆＃13;

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;  
}

.r {
	margin-left: auto;
}

＆＃13;

<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

FIDDLE HERE

请求帮助。

Answer 1

仅将margin-left: auto放在倒数第二个弹性项目上。

＆＃13;

＆＃13;

.r {
  margin-left: auto;
}

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;
}

＆＃13;

<ul>
  <li>Home</li>
  <li>Menu</li>
  <li>More</li>
  <li>Stuff</li>
  <li class="r">Login</li>
  <li>Sign Up</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

revised fiddle

当弹性项目具有margin-left: auto时，它会将自己从左侧的所有内容推开，并将其右侧的所有内容与其一起移动。

在您的情况下，margin-left: auto对倒数第二个孩子有意义。但对最后一个孩子来说没有意义。

或者，您可以在STUFF上使用margin-right: auto：

＆＃13;

＆＃13;

li:nth-child(4) {
	margin-right: auto;
}

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;  
}

＆＃13;

<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li>Login</li>
    <li >Sign Up</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：将ul中想要对齐的两个链接包裹起来，如下所示：

<ul class="r">
  <li>Login</li>
  <li>Sign Up</li>
</ul>

http://jsfiddle.net/dwLHE/45/

Answer 3

@Michael_B的解决方案就是我要使用的，但您也可以使用伪元素和order属性将伪元素楔入标记并将其设置为flex-grow填补左右两侧之间的空间。

＆＃13;

＆＃13;

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;
}
ul:after {
  content: '';
  flex-grow: 1;
}
.r {
  order: 1;
}

＆＃13;

<ul>
    <li>Home</li>
    <li>Menu</li>
    <li>More</li>
    <li>Stuff</li>
    <li class="r">Login</li>
    <li class="r">Sign Up</li>
</ul>

＆＃13;

＆＃13;

＆＃13;