Html 右对齐或左对齐一个弹性项目，同时保持其他项目居中 >我希望有 < >代码> b>代码>和 c>代码>中间对齐。

如何使

D

完全向右移动

之前：

之后：

ul{
填充：0；
保证金：0；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
李{
显示器：flex；
保证金：1px；
填充物：5px；
背景：#aaa；
}
李：最后一个孩子{
背景：ddd；
/*向右转的魔法*/
}

A
B
C
D

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

• CSS定位
• 具有不可见DOM元素的Flexbox
• 具有不可见伪元素的Flexbox
• 带有

  flex:1的Flexbox

• CSS网格布局

---

方法#1:CSS定位属性 将

position:relative

应用于flex容器

将

位置：绝对
应用于项目D

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

更具体地说，项目D将从文档流中删除，但保留在文档的边界内

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


li：最后一个孩子{
位置：绝对位置；
排名：0；
右：0；
背景：ddd；
}
保险商实验室{
位置：相对位置；
填充：0；
保证金：0；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
李{
显示器：flex；
保证金：1px；
填充物：5px；
背景：#aaa；
}
p{
文本对齐：居中；
边际上限：0；
}
跨度{
背景色：浅绿色；
}

A
B
C
D

真正的中心
问题非常清楚。经过几个小时的挖掘，我忍不住把答案贴了出来。我们可以用表格、表格单元格、绝对位置、变换来解决这个问题，但我们只能用flexbox来解决：）

我在的上展开了


.center-flex\uu 2-of-3>：第n个子项（1），.center-flex\uu 2-of-3>：第n个子项（3）{
弹性：1；
}
.center-flex\uu 2-of-3>：第n个子项（1）{
调整内容：灵活启动；
}
.center-flex\uu 2-of-3>：第n个子项（3）{
证明内容：柔性端；
}
.center-flex\uu 1-of-2>：第n个子项（1）{
保证金：自动；
}
.center-flex\uu 1-of-2>：第n个子项（2）{
弹性：1；
证明内容：柔性端；
}
.center-flex\uu 2-of-2>：第n个子项（1）{
弹性：1；
调整内容：灵活启动；
}
.center-flex\uu 2-of-2>：第n个子项（2）{
保证金：自动；
}
.center-flex_uu1-of-2:之前，.center-flex_uu1-of-1:之前{
内容：''；
弹性：1；
}
.center-flex_uu1-of-1:after、.center-flex_uu2-of-2:after{
内容：''；
弹性：1；
}
[类别*=中心柔性]{
显示器：flex；
列表样式：无；
保证金：0；
填充：0；
边框：10px实心rgba（0,0,0,0.1）；
}
[类别*=中心柔性]>*{
显示器：flex；
}
李{
填充物：3px 5px；
}
<代码>第2页，共3页

Accusamus
波罗
居中
这个
Accusamus
波罗
过失
坐着




第1页，共2页

居中
这个
Accusamus
波罗
过失
坐着




第2页，共2页

Accusamus
波罗
过失
坐着
居中
这个




第1页，共1页

居中
这个
接受的答案可以稍作更改，因为您可以使用网格模板区域，并且不使用伪元素

grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr

使用
display:grid
方法，您只需将所有
ul
子项放入同一单元格，然后设置
justify self
：


.ul{
显示：网格；
}
.ul>*{
网格列开始：1；
网格行开始：1；
自我辩护：中心；
}
.ul>*：最后一个孩子{
自我辩护：正确；
}
/*装腔作势*/
李先生{
显示：内联块；
保证金：1px；
填充物：5px；
背景:#bbb ;；
}

A.
B
C
D
如果要使其对齐，只需附加一个空跨距并将三个子跨距拆分为它们。
最简单的方法


.box{
显示器：flex；
证明内容：中心；
}
.项目1{
弹性：1；
显示器：flex；
证明内容：中心；
转换：translateX（10px）；/*D元素宽度[如果需要]*/
}

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


ul{
显示器：flex；
证明内容：中心；
}
a.d{
左边距：自动；
}

a
B
C
d
ul{
填充：0；
保证金：0；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
}
李{
显示器：flex；
保证金：1px；
填充物：5px；
背景：#aaa；
}
李：最后一个孩子{
背景：ddd；
位置：绝对位置；
右：10px；
}


A
B
C
D

灵感来自of的解决方案，因为我使用的是Tailwind，到目前为止，默认情况下仍然无法访问所有网格选项。这似乎有效：

ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}


A
B
C


PS：不确定这样混合flex和grid是否是个好主意
 这并不能使中间的项目真正居中，因为它只考虑剩余空间，而不是整个空间@迈克尔，你的右边没有注意到，我的错。回到使用绝对位置：（也许你的高代表你应该设置一个悬赏让这个问题得到解决。我会的
ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
li:nth-child(1) { justify-content: flex-start; } // OR: margin-right: auto
li:nth-child(3) { justify-content: flex-end; } // OR: margin-left:auto
li: {align-self: center;}

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