如何将 flex 项目向右对齐？

Question

我想把红色按钮放到右侧，就像以前使用浮动一样。

示例链接：http://jsfiddle.net/vb61r4uL/

.container {
    height: 100%;
    width: 100%;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul, li {
    list-style: none;
    padding: 0px;
}

#list {
    width: 300px;
    background: grey;
}

.item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.destory-button {
    background:red;
    justify-content: flex-end;
}

<div class="container">
<ul id="list">
    <li>
        <div class="item">
             <input type="checkbox">
            Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
    <li>
        <div class="item">
             <input type="checkbox">
            2nd Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
    <li>
        <div class="item">
             <input type="checkbox">
            3rd Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
</ul>   
</div>

如何使按钮靠右对齐？

- LoveAndHappiness

---

可能是重复的问题：如何在 flex 容器内将项目向右对齐？ - Rob

Answer 1

添加这个样式：

.destory-button {
  margin-left: auto;
}

参考：http://www.w3.org/TR/css3-flexbox/#auto-margins

.container {
    height: 100%;
    width: 100%;
    background-color: yellow;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul, li {
    list-style: none;
    padding: 0px;
}

#list {
    width: 300px;
    background: grey;
}

.item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.destory-button {
  background:red;
  justify-content: flex-end;
  margin-left: auto;
}

<div class="container">
<ul id="list">
    <li>
        <div class="item">
             <input type="checkbox">
            Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
    <li>
        <div class="item">
             <input type="checkbox">
            2nd Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
    <li>
        <div class="item">
             <input type="checkbox">
            3rd Title
            <button class="destory-button">Destroy</button>           
        </div>        
    </li>
</ul>   
</div>

- Rick Hitchcock

---

@ManojKumar，align-self: flex-end适用于交叉轴（在这种情况下是垂直平面）。你需要像justify-self: flex-end这样的东西来处理主轴，但它不存在，但是“auto”边距是一个很好的替代品。 - Michael Benjamin

明白了，谢谢。当交叉轴为水平平面时，将 flex-direction 设置为 column 时它就起作用了。我想我在这里偶然发现了你的问题：https://dev59.com/tlwY5IYBdhLWcg3wgX6V 值得在此处添加评论。必须删除上面的评论，因为演示代码有不同的属性。JSfiddle演示 - m4n0