学习如何使用flexBox，与典型的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>
解决方法
您可以将justify-content：space-between添加到父元素。在这样做的时候，孩子们的flexBox物品将与它们之间的空间对齐。
#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>
