Flexbox溢出-x最后一个边距[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flexbox溢出-x最后一个边距[重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
我用翻译器。我的意见无法准确传递。
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'元素之后添加保证金怎么办？
答案
您可以使用:after伪元素与width相同作为边距来创建该空间，但是您还需要从上一个margin-right中删除li。
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>以上是关于Flexbox溢出-x最后一个边距[重复]的主要内容，如果未能解决你的问题，请参考以下文章