当我们在父元素设置justify-content: space-between;元素会实现两端对齐,但最后一行会如图所示,不大美观 /*父元素*/.wrapper{display:flex;justify-content:space-between;flex-wrap:wrap;}/*子元素*/wrapper .item{width:190rpx;height:120rpx;border-radius:10rpx;text-align:center;line-height:120rpx;border:1...
display: grid;grid-template-columns:repeat(auto-fill,100px);justify-content: space-between;gap:10px;
css flex布局多列,两端对齐,justify-content: space-between;换行往左靠拢有效解决办法 95万百万评论热歌全集丨时实更新中42万网易云音乐流行热歌精选<
只需要在后面多加(每一列n个 n-2个)子元素,不设置高度或者后面加的子元素不设置高度,不然会出现空白
/*!!!重点理解:容器只有设置了宽度,space-between两端对齐才有效,否则无效。高度则不用设置,只需要设置交叉轴对齐就可以了。*/ /*公共样式*/ .box{ background-color: #4DBCB0; width:100px; height:100px; border-radius:10px; /*边角设置弧度*/ } ....