Html 如何左右对齐flexbox列？

How to align flexbox columns left and right?

提问by archytect

With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?

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

http://jsfiddle.net/1sp9jd32/

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>

回答by Josh Crozier

You could add justify-content: space-betweento the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

您可以添加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>

---

---

You could also add margin-left: autoto the second element in order to align it to the right.

您还可以添加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>

回答by geniuscarrier

I came up with 4 methods to achieve the results. Here is demo

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

Method 1:

方法一：

#a {
    margin-right: auto;
}

Method 2:

方法二：

#a {
    flex-grow: 1;
}

Method 3:

方法三：

#b {
    margin-left: auto;
}

Method 4:

方法四：

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

回答by konyak

Another option is to add another tag with flex: autostyle in between your tags that you want to fill in the remaining space.

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

https://jsfiddle.net/tsey5qu4/

https://jsfiddle.net/tsey5qu4/

The HTML:

HTML：

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

The CSS:

CSS：

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

This is equivalent to flex: 1 1 auto, which absorbs any extra space along the main axis.

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

回答by Ali Adravi

There are different ways but simplest would be to use the space-between see the example at the end

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

#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

看例子