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> 

Answer 1

您可以将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> 

Answer 2

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

方法1：

 #a { margin-right: auto; } 

方法2：

 #a { flex-grow: 1; } 

方法3：

 #b { margin-left: auto; } 

方法4：

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

Answer 3

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

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

看到这个例子