https://jsfiddle.net/vhem8scs/
是否可以让两个项目与flexbox左对齐，一个项目与flexbox右对齐？链接更清楚地显示了这一点。最后一个例子是我想要实现的目标
在flexbox中，我有一个代码块。对于float，我有四块代码。这就是我喜欢flexbox的原因之一
HTML
<；div class=“wrap”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>；
<；！--期望的结果-->；
<；div class=“结果”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>；
CSS
.wrap{
显示器：flex；
背景：#ccc；
宽度：100%；
证明内容：之间的空间；
}
.结果{
背景：#ccc；
边缘顶部：20px；
}
.结果：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.成绩科{
浮动：左；
}
.result div：最后一个孩子{
浮动：对；
}
要将一个flex子项向右对齐，请将其设置为marginleft:auto
从flex规范：
主轴中自动边距的一个用途是分离弹性项目
分成不同的“组”。下面的示例显示了如何使用此
复制一个通用的UI模式-一个带有一些
左对齐，右对齐
.wrap div:最后一个子级{
左边距：自动；
}
更新小提琴
.wrap{
显示器：flex；
背景：#ccc；
宽度：100%；
证明内容：之间的空间；
}
.wrap div:最后一个孩子{
左边距：自动；
}
.结果{
背景：#ccc；
边缘顶部：20px；
}
.结果：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.成绩科{
浮动：左；
}
.result div：最后一个孩子{
浮动：对；
}<；div class=“wrap”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>；
<；！--期望的结果-->；
<；div class=“结果”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>注:
您可以通过在中间的flex项（或速记flex:1）上设置flex grow:1来实现类似的效果，这会将最后一项推到右边。（演示）
然而，明显的区别是中间的项目变得比它可能需要的更大。向弹性项添加边框以查看差异
演示
.wrap{
显示器：flex；
背景：#ccc；
宽度：100%；
证明内容：之间的空间；
}
.包裹部{
边框：3个实心番茄；
}
.margin div：最后一个孩子{
左边距：自动；
}
.grow div:n个孩子（2）{
弹性：1；
}
.结果{
背景：#ccc；
边缘顶部：20px；
}
.结果：之后{
内容：''；
显示：表格；
明确：两者皆有；
}
.成绩科{
浮动：左；
}
.result div：最后一个孩子{
浮动：对；
}<；div class=“包装页边距”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>；
<；div class=“包裹生长”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>；
<；！--期望的结果-->；
<；div class=“结果”>；
<；部门>；一</部门>；
<；部门>；两个</部门>；
<；部门>；三个</部门>；
</部门>