是否可以用flexbox让两个项目向左对齐,一个项目向右对齐?该链接显示得更清楚。最后一个例子是我想实现的。
在flexbox中,我有一个代码块。使用float,我有四个代码块。这是我更喜欢flexbox的一个原因。
HTML
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
CSS
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
要将一个灵活的孩子向右对齐,请将其设置为margin-left: auto;
。
来自flex spec。
主轴上的自动边距的一个用途是将flex项目分开 成不同的"组"。下面的例子显示了如何使用它来 重现了一个常见的用户界面模式--一个单一的行动栏,其中有一些 排列在左边,其他的排列在右边。
.wrap div:last-child {
margin-left: auto;
}
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div:last-child {
margin-left: auto;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!--结束片段-->。
注意。
你可以通过在中间的flex项目上设置flex-grow:1(或简称flex:1
)来达到类似的效果,这将把最后一个项目全部推到右边。([演示][3])
然而,明显的区别是,中间的项目变得比它可能需要的要大。在flex项目上添加一个边框,可以看到区别。
.wrap {
display: flex;
background: #ccc;
width: 100%;
justify-content: space-between;
}
.wrap div {
border: 3px solid tomato;
}
.margin div:last-child {
margin-left: auto;
}
.grow div:nth-child(2) {
flex: 1;
}
.result {
background: #ccc;
margin-top: 20px;
}
.result:after {
content: '';
display: table;
clear: both;
}
.result div {
float: left;
}
.result div:last-child {
float: right;
}
<div class="wrap margin">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<div class="wrap grow">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!-- DESIRED RESULT -->
<div class="result">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
<!--结束片段-->。