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

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/

  • 居中并右alignmentflexbox元素
  • 只有CSS的砌体布局,但水平排列元素
  • 用flexbox将元素与底部alignment
  • 你怎么能保持中心框在柔性盒布局的中心?
  • 使用display:flex填充剩余的垂直空间
  • 无法滚动到溢出容器的弹性项目的顶部
  • CSS3 Flexbox保持图像宽高比
  • 当flexbox项目以列模式包装时,容器不会增加其宽度