我想让A、B和C在中间对齐。
怎样才能让D完全向右移动呢?
之前:
后:
ul { 填充:0; 保证金:0; 显示:flex; flex-direction:行; justify-content:中心; 对齐项目:中心; ｝ 李{ 显示:flex; 保证金:1 px; 填充:5 px; 背景:# aaa级; ｝ 李:胎{ 背景:# ddd; /*魔术扔到右边*/ ｝ < ul > <李> < /李> <李> B < /李> <李> C < /李> <李> D < /李> < / ul >
https://jsfiddle.net/z44p7bsx/
当前回答
最简单的解决方案是将justify-content center设置为父容器，并将margin-left auto设置为第一个和最后一个子元素。
ul { 显示:flex; justify-content:中心; ｝ 。。d { margin-left:汽车; ｝ < ul > <李类= " " > < /李> <李> B李< / > <李> C李< / > d <李类= " d " > < /李> < / ul >
其他回答
接受的答案可以改变一点，因为你可以使用网格模板区域，没有假元素
grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr
最简单的解决方案是将justify-content center设置为父容器，并将margin-left auto设置为第一个和最后一个子元素。
ul { 显示:flex; justify-content:中心; ｝ 。。d { margin-left:汽车; ｝ < ul > <李类= " " > < /李> <李> B李< / > <李> C李< / > d <李类= " d " > < /李> < / ul >
最简单的方法
.box { 显示:flex; justify-content:中心; ｝ .item1 { flex: 1; 显示:flex; justify-content:中心; 变换:translateX(10px);/*D元素宽度[如果需要]*/ ｝ < div class = "盒子" > < div class = " item1”> < div > < / div > div < div > < / B > < div > C < / div > < / div > < div class = "第二条“> D < / div > < / div >
非常清楚的问题。经过几个小时的挖掘，我忍不住把答案贴了出来。我们可以用表格，表格单元格，绝对位置，转换来解决这个问题，但我们必须用flexbox来做:)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}
http://codepen.io/rgfx/pen/BLorgd
受到方法#5:@Michal Benjamin的解决方案的CSS网格布局的启发，因为我正在使用顺风，到目前为止，默认情况下仍然没有访问所有的网格选项。这似乎很有效:
ul { 显示:网格; Grid-template-columns: repeat(3, minmax(0, 1fr)); ｝ 李{ align-self:中心; ｝ 李:nth-child (1) { justify-content: flex-start;/*或margin-right:自动*/ ｝ 李:nth-child (3) { justify-content: flex-end;/* OR margin-left:自动*/ ｝ < ul > <李> < /李> <李> B < /李> <李> C李< / > < / ul >
PS:不确定把flex和grid混合起来是不是一个好主意!
