居中并右alignmentflexbox元素

我想让A B和C在中间alignment。

我怎样才能让D完全走向正确的？

之前：

后：

这样做的最佳做法是什么？

 ul { padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } li:last-child { background: #ddd; /* magic to throw to the right*/ } 

 <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> 

https://jsfiddle.net/z44p7bsx/

Answer 1

以下是实现此布局的三个选项：

方法＃1：CSS定位属性

应用position: relative对于柔性容器。

申请position: absolute项目D.

现在这个项目是绝对定位在柔性容器内。

更具体地说，项目D从文档stream中被移除，但是停留在最近定位的祖先的界限内。

使用top和right的CSS偏移属性将此元素移动到位。

 li:last-child { position: absolute; top: 0; right: 0; background: #ddd; } ul { position: relative; padding: 0; margin: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; } li { display: flex; margin: 1px; padding: 5px; background: #aaa; } p { text-align: center; margin-top: 0; } span { background-color: aqua; } 

 <ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> </ul> <p><span>true center</span></p> 

Answer 2

非常明确的问题。 挖了几个小时之后，我忍不住发布了答案。 我们可以解决这个表格，表格单元格，绝对位置，转换，但我们只需要与flexbox 🙂

 .parent { display: flex; justify-content: flex-end; } .center { margin: auto; } 

http://codepen.io/rgfx/pen/BLorgd