flexbox左右对齐列

Question

学习如何使用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到父元素.在这样做时,子弹性工具箱将与相对侧对齐,并且它们之间具有空间.

更新的示例

#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到第二个元素以使其与右侧对齐.

更新的示例

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

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

另一种选择是flex: auto在要填充剩余空间的标签之间添加另一个带有样式的标签。

https://jsfiddle.net/tsey5qu4/

HTML：

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

CSS：

.fill-remaining-space {
  flex: auto;
}

这相当于 flex: 1 1 auto，它吸收沿主轴的任何额外空间。