How do I align an item to the right inside a flex container?

Question

I'm starting to use flex box but not sure how I set an element inside a flex container to be positioned on the right side? I've tried applying align-self: flex-end and justify-content: flex-end with no success so I'm hoping someone can help me out?

CSS

.ctn {
  background: lightblue;
  height: 100px;
  padding: 10px;
  display: flex;
  align-items: center;
}

.btn {
  outline: none;
  border: none;
  color: navy;
  background: lightyellow;
  height: 50px;
  line-height: 50px;
  width: 200px;
  text-transform: uppercase;
}

Codepen: http://codepen.io/styler/pen/pvJFA

Answer 1

The align-self property is similar to the align-items property: it only changes its alignment on the cross axis (that's vertically when you're using the row direction). Not what you want here.

You can use the justify-content property. If you have more than 2 items, they will be evenly spaced out with the first item all the way to the left and the last item all the way to the right:

.ctn {
  background: lightblue;
  height: 100px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Or you can use margin-left on the item you want to shift all the way to the right. If you have more than 2 items, it will shift all of the preceding items all the way to the left:

.btn {
  outline: none;
  border: none;
  color: navy;
  background: lightyellow;
  height: 50px;
  line-height: 50px;
  width: 200px;
  text-transform: uppercase;
  margin-left: auto;
}

Answer 2

Use this as your Flexbox Cheatsheet: Complete Guide

And you can use this handy tool too : FLEXY

UPDATE: As for OP pointed out in comments that this dosen't exactly solves the problem , so here's the jsfiddle: link . Do tell me if posting a code that solves browser-inconsistency ( FYI , there are 3 seperate versions of Flex : versions ) interferes with your exisiting solution.

Now for your question ,here is a sample code :

.ctn {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.btn{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

/*
    Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/

@-moz-document url-prefix() {
  .ctn {
      width: 100%;
      -moz-box-sizing: border-box;
   }

}