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

  • 为什么Firefox的flex项目没有百分比填充/边距?
  • 在不同的柔性容器中柔性物品的高度相等的列
  • Flexbox代码可用于除Safari之外的所有浏览器。 为什么?
  • Chrome / Safari没有填充flex父项的100%高度
  • Flexbox替代IE9
  • 使用flex order属性重新安排桌面和移动视图的项目
  • Flexbox在IE中不垂直居中
  • 在什么情况下Flex-shrink应用于柔性元素,它是如何工作的?
  • 2 Solutions collect form web for “CSS将一个项目与flexboxalignment”

    要将一个柔性子对象设置为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> 

    对于简洁的纯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/