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/1sp

Answer 1

There are different ways but simplest would be to use the space-between see the example at the end

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

see the example