解决flex布局换行最后一行的元素无法靠左/上布局的简单方法

问题：

当我们使用flex布局并设置自动换行时，最后一行的元素不会按照我们的预期靠左布局，如：

<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是默认值
    //justify-content: space-around;//有换行不推荐使用弹性布局的对齐方式，否则最后一行元素会被挤到一起
    flex-wrap: wrap;
    
    .item{
        width: 22%;
        height: 100rpx;
        margin: 10rpx;
        background-color: red;
    }
}

结果：

image.png

需求：使"5"这个元素靠左布局

解决方法：给父元素增加一个伪元素，即：

.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;
            
        }
    }

结果：

image.png

同理，可实现纵向排列最后一行靠上排列：

.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

---

可能会出现的问题：当子元素数量少无法占满父元素的宽度时，会出现以下问题：

image.png
要使“5”“6”两个元素靠左，且两列元素的间隔为之前设置的margin值，如何解决？
目前可实现的憨方法(遇到好方法就更新0.0)：将现父元素test的width设为0（无法设置背景色，可在外部嵌套一层元素，在该元素上设置背景色）
image.png