微信小程序 當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;
}

 

但是得到的確實如下效果：😢。。。what?! why?👀疑惑，非常疑惑

 

經過一番折騰，有了實現預期效果的解決方法，如下：

// .wxml文件 （.wxss文件的內容不變）
<view class='btns'>
    <view>
      <button>按鈕1</button>
    </view>
    <view>
      <button>按鈕2</button>
    </view>
    <view>
      <button>按鈕3</button>
    </view>
    <view>
      <button>按鈕4</button>
    </view>
    <view>
      <button>按鈕5</button>
    </view>
    <view>
      <button>按鈕1</button>
    </view>
    <view>
      <button>按鈕2</button>
    </view>
    <view>
      <button>按鈕3</button>
    </view>
  </view>

 

當button遇到flex布局時，要是不用view包起來的話，實現的效果如justify-content:space-evenly的效果，其中space-evenly表示：項目間間距、第一個項目離主軸起點和最后一個項目離主軸終點距離等於項目間間距。

 

為什么會實現這樣的效果，我還不得而知，如果你知道，歡迎指教！