flex布局justify

发布时间：2024-11-30 00:19

'Fitocracy Flex'简化版，适合忙碌人群轻量级健身 #生活知识# #健康生活# #健身技巧# #健身APP推荐#

最新推荐文章于 2024-09-24 11:41:48 发布

onlyoneLIJINGYI 于 2019-09-17 20:10:40 发布

.div1{ display: flex; justify-content: space-between; flex-wrap: wrap; flex-direction: row; width: 600px; background-color: #e92332; } .div1 div{ width: 100px; height: 80px; margin: 50px; border-radius: 10px; text-align: center; background-color: yellow; } </style> <body> <div class="div1"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body>

1234567891011121314151617181920212223242526

使用flex布局的justify-content: space-between属性，结果显示为：
在这里插入图片描述
解决末尾中间留白，使其靠左分布的方法：给父容器使用伪元素占位，宽度设置为一个30%即可。