問(wèn)題：

當(dāng)我們使用flex布局并設(shè)置自動(dòng)換行時(shí)，最后一行的元素不會(huì)按照我們的預(yù)期靠左布局，如：

<view class="test">
    <view class="item">1</view>
    <view class="item">2</view>
    <view class="item">3</view>
    <view class="item">4</view>
    <view class="item">5</view>
</view>

css:

.test{
    width: 100%;
    background-color: blue;
    display: flex;
    //flex-direction: row;//橫向排列，row是默認(rèn)值
    //justify-content: space-around;//有換行不推薦使用彈性布局的對(duì)齊方式，否則最后一行元素會(huì)被擠到一起
    flex-wrap: wrap;
    
    .item{
        width: 22%;
        height: 100rpx;
        margin: 10rpx;
        background-color: red;
    }
}

結(jié)果：

image.png

需求：使"5"這個(gè)元素靠左布局

解決方法：給父元素增加一個(gè)偽元素，即：

.test{
        width: 100%;
        background-color: blue;
        display: flex;
        flex-wrap: wrap;
        &::after{
          flex: auto;
          content: "";
        }
    
        .item{
            width: 22%;
            height: 100rpx;
            margin: 10rpx;
            background-color: red;
            
        }
    }

結(jié)果：

image.png

同理，可實(shí)現(xiàn)縱向排列最后一行靠上排列：

.test{
        width: 100%;
        height: 450rpx;
        background-color: blue;
        display: flex;
        flex-direction: column;//縱向排列
        flex-wrap: wrap;
        &::after{
          flex: auto;
          content: "";
        }
    
        .item{
            height: 20%;
            margin: 10rpx;
            background-color: red;
            
        }
    }

image.png

可能會(huì)出現(xiàn)的問(wèn)題：當(dāng)子元素?cái)?shù)量少無(wú)法占滿(mǎn)父元素的寬度時(shí)，會(huì)出現(xiàn)以下問(wèn)題：

image.png

image.png