Alignment of ends in Flex Layout The following layout situation occurs when the last row is insufficient

The original image

Implementation effect

Scheme 1 (after pseudo-class method is added by the parent to solve the problem that the number of the last row is not enough to distribute at both ends)

<div class="flex">
    <div class="flex-item" v-for="item in len">The list of</div>
</div>
Copy the code
data(){
    return {
        len : 14}}Copy the code
.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-align: justify; } <! < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: inherit! Important;".flex:after{
    content: ' ';
    width: 30%;
    border:1px solid transparent;
}
.flex-item{
    width:30%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
}
Copy the code

Perfect solution to the confusion of both ends of the alignment layout

Of course, this solution only works if the layout has 3 columns per column, but if the layout has 4 or 5 columns per column, see Solution 2

Scheme 2 (complement node method, this scheme is suitable for a variety of arrangements)

<div class="flex">
    <div class="flex-item" v-for="item in len">The list of</div>
    <div class="list" v-for="item in (row - len % row)" v-if="len%row > 0"></div>
</div>
Copy the code
data(){
    return {
        len : 14.// How many are there
        row: 4    // There are several lines.}}Copy the code
.flex{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    justify-items: center;
    text-align: justify;
}

.flex-item{
    width:20%;
    border:1px solid #ff6600;
    margin-bottom: 10px;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
}

.list{
    content: ' ';
    width: 20%;
    border:1px solid transparent;
    padding: 5px;
    overflow: hidden;
}

Copy the code