小程序 当button遇上Flex布局

当需要将button按行排列，当超过一行时，可以换行，从左到右排列，想实现如下效果（实现的比较粗糙，能说明问题就行，呵~~~）：

使用Flex布局，在设置主轴方向上对齐方式，使用justify-content属性，默认是flex-start：项目对齐主轴起点，项目间不留空隙。

所以在wxss中就不需要写了justify-content属性了

于是写如下代码：

// .wxml文件中
<view class='btns'>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

    <button>按钮4</button>

    <button>按钮5</button>

    <button>按钮1</button>

    <button>按钮2</button>

    <button>按钮3</button>

</view>

// .wxss文件
.btns {

  margin-top: 40rpx;

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

但是得到的确实如下效果：