我想让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/
当前回答
接受的答案可以改变一点，因为你可以使用网格模板区域，没有假元素
grid-template-areas '. b c'
grid-template-columns: 1fr 1fr 1fr
其他回答
我扩展了Michael_B的答案
.center-flex__2-of-3 > :nth-child(1), .center-flex__2-of-3 > :nth-child(3) { flex: 1; } .center-flex__2-of-3 > :nth-child(1) { justify-content: flex-start; } .center-flex__2-of-3 > :nth-child(3) { justify-content: flex-end; } .center-flex__1-of-2 > :nth-child(1) { margin: auto; } .center-flex__1-of-2 > :nth-child(2) { flex: 1; justify-content: flex-end; } .center-flex__2-of-2 > :nth-child(1) { flex: 1; justify-content: flex-start; } .center-flex__2-of-2 > :nth-child(2) { margin: auto; } .center-flex__1-of-2:before, .center-flex__1-of-1:before { content: ''; flex: 1; } .center-flex__1-of-1:after, .center-flex__2-of-2:after { content: ''; flex: 1; } [class*=center-flex] { display: flex; list-style: none; margin: 0; padding: 0; border: 10px solid rgba(0, 0, 0, 0.1); } [class*=center-flex] > * { display: flex; } li { padding: 3px 5px; } 2 of 3 <ul class="center-flex__2-of-3"> <span> <li>Accusamus</li> <li>Porro</li> </span> <span> <li>Center</li> <li>this</li> </span> <span> <li>Accusamus</li> <li>Porro</li> <li>Culpa</li> <li>Sit</li> </span> </ul> <br><br> 1 of 2 <ul class="akex center-flex__1-of-2"> <span> <li>Center</li> <li>this</li> </span> <span> <li>Accusamus</li> <li>Porro</li> <li>Culpa</li> <li>Sit</li> </span> </ul> <br><br> 2 of 2 <ul class="akex center-flex__2-of-2"> <span> <li>Accusamus</li> <li>Porro</li> <li>Culpa</li> <li>Sit</li> </span> <span> <li>Center</li> <li>this</li> </span> </ul> <br><br> 1 of 1 <ul class="center-flex__1-of-1"> <span> <li>Center</li> <li>this</li> </span> </ul>
这里有SASS作为一个代码依赖的帮助
接受的答案可以改变一点，因为你可以使用网格模板区域，没有假元素
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 >
如果您想使它对齐，您可以简单地附加一个空span并将三个子span分割为它们。
最简单的解决方案是将justify-content center设置为父容器，并将margin-left auto设置为第一个和最后一个子元素。
ul { 显示:flex; justify-content:中心; ｝ 。。d { margin-left:汽车; ｝ < ul > <李类= " " > < /李> <李> B李< / > <李> C李< / > d <李类= " d " > < /李> < / ul >
