今天开发时使用flex布局发现上下行间距太大,有点难看,如下图所示!
这是css代码,我把无关代码去掉了,简洁一点好明白
.iconArea {
display: flex;
flex-wrap: wrap;
li {
display: flex;
justify-content: center;
align-items: center;
}
很简单就父类iconArea 使用了flex布局,然后li里的icon元素水平垂直居中对齐,然后这样换行后,上下行之间的间隔就会被平分,也就是图上这样的效果,我们需求是想紧挨着,这时很简单,只需要加个align-content:flex-start;就能解决,如下图所示
.iconArea {
display: flex;
flex-wrap: wrap;
align-content:flex-start;//加这个属性就能解决
li {
display: flex;
justify-content: center;
align-items: center;
}
解决效果图:
希望本篇文章能帮到你!!