html - 如何左右对齐 flexbox 列？

Question

使用典型的 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 添加到父元素。这样做时，子 flexbox 元素将对齐到相对的边，它们之间有空间。

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>

---

您还可以将 margin-left: auto 添加到第二个元素以使其右对齐。

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>