flex布局设置space-between(around)最后一行不左对齐问题


问题点:在微信小程序中或者网页布局中使用flex的设置justify-content为space-around或者space-between;发现最后一行不左对齐,而是两端对齐的方式
使用justify-content:space-between的布局方式如下图

使用justify-content:space-around的布局方式如下图

解决办法有两种
1.添加几个空格字,格子高度设置为0
根据布局列数添加红格子(指上面的div),每行最大n列,那么在最后添加n-2个空红格子即可,比如要求每行四列,也就是要求每行4个红格子

flex弹性布局
1
2
3
3
3
3
3
3
3
3
2.伪元素after 1.当每行为3列时,见代码 flex弹性布局
1
2
3
3
3
3
3
3
3
3
3
2.当每行为4列时,见代码 flex弹性布局
1
2
3
3
3
3
3
3
3
3
3
3.不确定列数,见下


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM