Flexbox溢出-x最后边距[重复]

Posted 2023-03-06

【中文标题】Flexbox溢出-x最后边距[重复]

【英文标题】：Flexbox overflow-x last margin [duplicate]

【发布时间】：2018-08-11 11:12:03

【问题描述】：

我使用翻译器。 我的意见不能准确传达。

ul 
  display: flex;
  overflow-x: auto;
  border: 1px solid aqua;
  background-color: tomato;
  width: 400px;
  list-style:none;
  padding-left:0px;

li 
  border: 1px solid Aquamarine;
  min-width: 300px;
  margin: 10px;

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>

https://codepen.io/anon/pen/bLJREL

与我尝试做的不同，最后一个元素没有边距。

如果你想在 'item4' 元素之后添加边距怎么办？

【参考方案1】：

您可以使用:after 伪元素和width 与边距相同来创建该空间，但您还需要从最后一个li 中删除margin-right。

ul 
  display: flex;
  overflow-x: auto;
  border: 1px solid aqua;
  background-color: tomato;
  width: 400px;
  list-style: none;
  padding-left: 0;

ul:after 
  content: '';
  flex: 0 0 10px;

li 
  border: 1px solid Aquamarine;
  min-width: 300px;
  margin: 10px;

li:last-child 
  margin-right: 0;

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>