要将一个flex子项与右侧对齐,请将其设置为margin-left: auto;
从flex spec人中:
主轴上自动页边距的一个用途是分隔弹性项
分成不同的"组".下面的示例说明如何使用它来
重现通用UI模式-单个操作栏,包含一些
左对齐,其他对齐右对齐.
.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:1
)上设置FLEX-GROW:1来达到类似的效果,这将把最后一个项目一直推到右边.(100)
然而,明显的区别是,中间的项目变得比它可能需要的更大.在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>