使用display:flex实现多个子标签等分间距排列

今天做项目遇到一个问题：ul标签下有若干个li标签（个数不固定），想要实现平均等分的排列；如效果图：

因为li标签的个数是不固定的，所以不想使用给固定的margin来实现，这样的话太生硬了；

 

于是想到了使用display:flex;justify-content: space-between;align-items: center;（有浏览器兼容问题）

但出现了如下问题：

li标签之间的间距并没有真正意义上的等分；

先是复习了一遍space-between属性的意思：

justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最左和最右
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等

重点是：“除第一个子元素和最后一个子元素外”；

所以最终的解决方法是：在li标签的开头和末尾分别加上一个伪类

ul:before {
    content: "";
    display: block;
}
ul:after {
    content: "";
    display: block;
}

已经加过伪类清浮动的可只往开头添加一个伪类即可；即：ul:before { content: ""; display: block; }

问题到此解决；希望能帮到各位

 

来源：CSDN

作者：来吧小哒

链接：https://blog.csdn.net/monkey_xiaoda/article/details/103815750