How to align a flex item to the right?

Question

I'd like to put the RED button to the right, like I would do using floats in the past

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>

How do I make the button align to the right?

Answer 1

Add this style:

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

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