小程序 当button遇上Flex布局

Posted 2021-02-13 XA_Fanny

当需要将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;
}

 

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

以上是关于小程序 当button遇上Flex布局的主要内容，如果未能解决你的问题，请参考以下文章

Flex 实现表格布局 （微信小程序）

#yyds干货盘点#愚公系列2022年11月 微信小程序-Flex布局详解

微信小程序flex布局

小程序的flex布局

微信小程序之view的flex布局(2)

微信小程序之Flex布局