如何调整柔性箱列左右？

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

253628 次浏览
小开
最佳答案

可以将 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>

小开

我想出了4种方法来达到这个结果

方法一:

#a {
margin-right: auto;
}

方法二:

#a {
flex-grow: 1;
}

方法三:

#b {
margin-left: auto;
}

方法四:

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

有不同的方式，但最简单的将是使用空间-之间看到的例子结束

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

看看这个例子

小开

另一种选择是在标记之间添加另一个 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;
}

这相当于伸缩: 11自动，它吸收任何额外的空间沿主轴。

小开

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

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

提交答案