居中一个和右/左对齐其他flexbox元素

Question

我想在中间对齐AB和C。

如何使D完全向右移动？

以前：

之后：

css prettyprint-override">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

最简单的方法

.box{
  display:flex;
  justify-content:center;
}
.item1{
   flex:1;
   display: flex;
   justify-content: center;
   transform: translateX(10px);/*D element Width[if needed]*/
}

 <div class="box">
   <div class="item1">
      <div>A</div>
      <div>B</div>
      <div>C</div>
   </div>
   <div class="item2">D</div>
 </div>

Answer 2

最简单的解决方案是将资源中心与父容器对齐，并为第一个子元素和最后一个子元素提供自动左边距。

ul {
  display:flex;
  justify-content:center;
}


.a,.d {
  margin-left:auto;
}

<ul>
  <li class="a">A</li>
  <li>B</li>
  <li>C</li>
  <li class="d">D</li>
</ul>

Answer 3

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

• CSS定位
• 具有不可见DOM元素的Flexbox
• 带有不可见伪元素的Flexbox
• 带有flex:1的Flexbox
• CSS网格布局

应用位置：相对到flex容器。

应用位置：绝对到D项。

现在，此项完全位于flex容器中。

更具体地说，项目D从文档流中删除，但保持在最近定位的祖先的边界内。

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

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>