flexbox align column left and right

Learning how to use flexbox, 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">
a
b
</div>

solution

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">
a
b
</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">
a
b
</div>