3

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?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
LoveAndHappiness
  • 9,735
  • 21
  • 72
  • 106
  • 2
    Possible duplicate of [How do I align an item to the right inside a flex container?](http://stackoverflow.com/questions/24984194/how-do-i-align-an-item-to-the-right-inside-a-flex-container) – Rob Nov 03 '15 at 16:33

1 Answers1

12

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>
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • 2
    @ManojKumar, `align-self: flex-end` works on the cross axis (in this case, the vertical plane). You would need something like `justify-self: flex-end` for the main axis, which doesn't exist, but `auto` margins is a good substitute. – Michael Benjamin Nov 03 '15 at 16:13
  • 2
    Got it, thanks. It works when `flex-direction` is set to `column` when the cross axis is now horizontal plane. I think I stumbled upon your question here: http://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties Worth adding here as a comment. *Had to delete my above comment since the demo code had different properties.* [**JSfiddle demo**](http://jsfiddle.net/Manojkr/ppv7h4fd/3/) – m4n0 Nov 03 '15 at 16:22