[1] needs:
[2] Solution:
Recently met the requirements on layout item was not justified, and the last line of the requirements in the case of left-aligned columns of discontent, use of flex justify-content: space-between;
found last line does not realize when left-aligned, but it was not justified manner .
Not want the project results
# Check some information online, there are two ways to achieve results:
** 1 ** add several empty item (most effective for me, and for most scenes)
Add item according to the number of empty column layout, such as n columns of each row maximum, then the last n-2 was added to empty item
<html> <style> .box { display: flex; flex-wrap: wrap; justify-content: space-between; } .item { width: 30%; height: 50px; background-color: #f1f8ff; margin-bottom: 10px; } .placeholder { width: 30%; height: 0px; } </style> <body> <div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="placeholder"></div> </div> </body> </html>
Achieve results
** 2. Beneficial after or before (or 3 applied to each row 4) **
.box:after { display:block; content:""; width: 30%; height:0px; }
.