flex布局最后一行元素左对齐
<style> * { margin: 0; padding: 0; } .container { width: 350px; border: 1px solid red; display: flex; flex-wrap: wrap; justify-content: space-between; } .container::after { content: ''; width: 100px; } .item { width: 100px; height: 100px; background-color: yellowgreen; } </style> </head> <body> <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body>
实现:
给父容器添加after伪元素,宽度和子元素宽度保持一致,不要设置高度
效果: