8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

将一个 Flexbox 元素居中对齐,并将其他 Flexbox 元素右/左对齐

NFern 1月前

15 0

我希望 AB 和 C 在中间对齐。如何让 D 完全移到右边?BEFORE: AFTER: ul { padding: 0; margin: 0; display: flex; flex-direction: ro...

我希望 A B C 位于中间。

我怎样才能 D 完全走向正确?

前:

enter image description here

后:

enter image description here

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/

帖子版权声明 1、本帖标题:将一个 Flexbox 元素居中对齐,并将其他 Flexbox 元素右/左对齐
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由NFern在本站《css》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 我尝试在代码片段演示中理解您的 CSS。您的注释标记无效,冒号也多余。如果不正确,请随时修改。

返回
作者最近主题: