CSS将一个项目与flexboxalignment

https://jsfiddle.net/vhem8scs/

是否有可能有两个项目左alignment，一个项目与flexbox正确alignment？ 链接显示更清楚。 最后一个例子是我想要实现的。

在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; } 

Answer 1

要将一个柔性子对象设置为margin-left: auto;

从flex规格 ：

在主轴上使用自动边距是将柔性项目分成不同的“组”。 下面的例子展示了如何使用这个来重现一个通用的UI模式 – 一个单独的一行动作，一些在左边alignment，另外一些在右边alignment。

 .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> 

Answer 2

对于简洁的纯Flexbox选项，将左alignment的项目和右alignment的项目分组：

 <div class="wrap"> <div> <span>One</span> <span>Two</span> </div> <div>Three</div> </div> 

并space-between以下space-between使用：

 .wrap { display: flex; background: #ccc; justify-content: space-between; } 

这样，您可以将多个项目分组到右侧（或者只是一个）。

https://jsfiddle.net/c9mkewwv/3/