如何左右对齐flexbox列？

Posted 2023-03-05

【中文标题】如何左右对齐flexbox列？

【英文标题】：How to align flexbox columns left and right?

【发布时间】：2015-05-09 10:27:30

【问题描述】：

使用典型的 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>

【参考方案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，解释如下：***.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;