https://jsfiddle.net/vhem8scs/
是否有可能有两个项目左对齐和一个项目右对齐与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;
}
要将一个flex子代向右对齐，请设置margin-left: auto;
来自flex规范:
主轴上的自动边距的一个用途是分离伸缩项
分成不同的“组”。下面的例子展示了如何使用它
重现一个通用的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:1)上设置flex-grow:1来实现类似的效果，这将把最后一项一直推到右边。(演示)
然而，明显的区别是，中间的项目变得比它可能需要的更大。为伸缩项添加边框以查看差异。
Demo
.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>
对于一个简洁、纯粹的flexbox选项，将左对齐的项和右对齐的项分组:
<div class="wrap">
<div>
<span>One</span>
<span>Two</span>
</div>
<div>Three</div>
</div>
使用空格:
.wrap {
display: flex;
background: #ccc;
justify-content: space-between;
}
通过这种方式，您可以将多个项目分组到右侧(或只有一个)。
https://jsfiddle.net/c9mkewwv/3/
