flex space-between 均分换行,不够一行的时候从左侧开始
*{ margin: 0; padding: 0; list-style: none; } .flex-wrap{ width: 600px; display: flex; border: 15px solid #0077AA; justify-content: space-between; flex-wrap: wrap; background-color: lightgreen; box-sizing: border-box; } .flex-wrap:after{ content: ""; width: 180px; height: 0; visibility: hidden; } .flex-item { display: flex; flex-direction: column; width: 180px; height: 180px; margin-bottom: 30px; background-color: lightcoral; overflow: hidden; padding-top: 30px; text-align: center; box-sizing: border-box; border-radius: 25px; border: 1px solid #eee; }
<div class="flex-wrap"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> <div class="flex-item">4</div> <div class="flex-item">5</div> </div>