How to align flexbox columns left and right?

Question

With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?

http://jsfiddle.net/1sp9jd32/

#container {    width: 500px;    border: solid 1px #000;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;  }  #a {    width: 20%;    border: solid 1px #000;  }  #b {    width: 20%;    border: solid 1px #000;    height: 200px;  }

<div id="container">    <div id="a">      a    </div>    <div id="b">      b    </div>  </div>

Answer 1

You could add justify-content: space-between to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

Updated Example

#container {     width: 500px;     border: solid 1px #000;     display: flex;     justify-content: space-between; } 

#container {      width: 500px;      border: solid 1px #000;      display: flex;      justify-content: space-between;  }    #a {      width: 20%;      border: solid 1px #000;  }    #b {      width: 20%;      border: solid 1px #000;      height: 200px;  }

<div id="container">      <div id="a">          a      </div>      <div id="b">          b      </div>  </div>

---

You could also add margin-left: auto to the second element in order to align it to the right.

Updated Example

#b {     width: 20%;     border: solid 1px #000;     height: 200px;     margin-left: auto; } 

#container {      width: 500px;      border: solid 1px #000;      display: flex;  }    #a {      width: 20%;      border: solid 1px #000;      margin-right: auto;  }    #b {      width: 20%;      border: solid 1px #000;      height: 200px;      margin-left: auto;  }

<div id="container">      <div id="a">          a      </div>      <div id="b">          b      </div>  </div>