html - 如何将 flex 元素右对齐？

Question

我想把红色按钮放在右边，就像我过去使用 float 一样

fiddle :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>

如何让按钮右对齐？

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>