我想让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/
当前回答
非常清楚的问题。经过几个小时的挖掘，我忍不住把答案贴了出来。我们可以用表格，表格单元格，绝对位置，转换来解决这个问题，但我们必须用flexbox来做:)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}
http://codepen.io/rgfx/pen/BLorgd
其他回答
非常清楚的问题。经过几个小时的挖掘，我忍不住把答案贴了出来。我们可以用表格，表格单元格，绝对位置，转换来解决这个问题，但我们必须用flexbox来做:)
.parent {
display: flex;
justify-content: flex-end;
}
.center {
margin: auto;
}
http://codepen.io/rgfx/pen/BLorgd
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;
position:absolute;
right:10px;
}
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
接受的答案可以改变一点，因为你可以使用网格模板区域，没有假元素
grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr
最简单的方法: .wrap { 显示:flex; ｝ .full-width { 宽度:100%; ｝ .centered { 显示:flex; justify-content:中心; ｝ .btn { 显示:flex; justify-content:结束; ｝ < div class = " wrap " > < div class = "宽屏" > < / div > <div class="full-width居中"> < div > < / div > div < div > < / B > < div > C < / div > < / div > <div class="full-width btn">D</div> < / div >
使用display:grid方法，你可以简单地把所有的ul子元素放到同一个单元格中，然后设置justification -self:
.ul { 显示:网格; ｝ .ul > * { grid-column-start: 1; grid-row-start: 1; justify-self:中心; ｝ .ul > *:last child { justify-self:正确; ｝ /* Make Fancy */ .li { 显示:inline-block; 保证金:1 px; 填充:5 px; 背景:# bbb; ｝ < div class =“ul”> < span > < span类=‘李’> < / span > B <跨类=‘李’> < / span > < span类=‘李’> C > < /跨度 < / span > D <跨类=‘李’> < / span > < / div >
