如何将弹性项目对齐？

Question

我想把RED按钮放在右边,就像我过去使用花车一样

小提琴: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>