问题：
当我们使用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
可能会出现的问题：当子元素数量少无法占满父元素的宽度时，会出现以下问题：
image.png
要使“5”“6”两个元素靠左，且两列元素的间隔为之前设置的
margin值，如何解决？目前可实现的憨方法(遇到好方法就更新0.0)：将现父元素test的
width设为0（无法设置背景色，可在外部嵌套一层元素，在该元素上设置背景色）
image.png
