如何左右对齐flexbox列？答案

【问题标题】：How to align flexbox columns left and right?如何左右对齐flexbox列？
【发布时间】：2015-05-09 10:27:30
【问题描述】：

使用典型的 CSS，我可以将两列中的一列向左浮动，另一列向右浮动，中间有一些间距。我将如何使用 flexbox 做到这一点？

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

嘿，你能解释一下如何使用margin-left: auto在这里正确对齐元素吗？
@hulkinBrain，解释如下：stackoverflow.com/a/33856609/3597276
注意：margin-left: auto 和 margin-right: auto 技巧不兼容 IE11，对于那些仍然需要支持它的人。

【解决方案2】：

我想出了 4 种方法来实现结果。这里是demo

方法一：

#a {
    margin-right: auto;
}

方法二：

#a {
    flex-grow: 1;
}

方法三：

#b {
    margin-left: auto;
}

方法四：

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

【讨论】：

方法5：在任何你想要额外空间的地方插入一个带有flex:1;的额外空元素:)
如果您嵌入代码 sn-p 而不是链接到 jsfiddle，这将是最好、最完整的答案。
方法1和3不兼容IE 11！
注意：方法 #2 - 我认为不正确对齐 #b，而是让 #a 增长，所以这不能回答问题 - “之间有排水沟空间”。

【解决方案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，它会吸收沿主轴的任何额外空间。

【讨论】：

【解决方案4】：

有不同的方法，但最简单的方法是使用空格 - 参见最后的示例

#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

【讨论】：

【解决方案5】：

除了 Jost 的回答，如果你也需要垂直对齐，如果需要，使用align-items: center;。

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

【讨论】：