flexbox将列左右alignment

学习如何使用flexbox,通过使用典型的css,我可以将两列中的一列左移,而另一列右移一列之间的空格。 我将如何做到这一点与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> 

您可以将justify-content: space-between到父元素。 在这样做的时候,孩子们的柔性箱项目将被alignment到两侧,并在它们之间有空间。

更新示例

 #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> 

我想出了4种方法来达到结果。 这里是演示

方法1:

 #a { margin-right: auto; } 

方法2:

 #a { flex-grow: 1; } 

方法3:

 #b { margin-left: auto; } 

方法4:

 #container { justify-content: space-between; } 

有不同的方法,但最简单的方法就是使用空间 – 看最后的例子

 #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; } 

看到这个例子