弹性盒的justify-content: space-around使我的列表项水平均匀分布。有没有办法拥有完全相同的东西，唯一的区别是左边的第一个项目左边没有空间？ （也就是说，列表从容器的左边缘“开始”）
而不是使用justify-content: space-around, use auto项目的边距。
通过给每个弹性项目margin-right: auto，容器空间将在项目之间均匀分配（例如justify-content），但第一项将保留在左边框边缘。
flex-container[one] {
display: flex;
justify-content: space-around;
border: 1px dashed green;
}
flex-container[one]>flex-item {
background-color: lightgreen;
}
flex-container[two] {
display: flex;
border: 1px dashed red;
}
flex-container[two]>flex-item {
margin-right: auto;
background-color: orangered;
}
flex-item {
width: 50px;
height: 50px;
}
<code>justify-content: space-around</code>
<flex-container one>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
<br>
<code>margin-right: auto</code>
<flex-container two>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container>
jsFiddle 演示 https://jsfiddle.net/t5yzknxe/
了解更多关于弹性的信息auto这里的边距：在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？ https://stackoverflow.com/q/32551291/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
