携手创作，共同成长！这是我参与「AdminJS · 8 月更文挑战」的第4天，点击查看活动详情
前言
当时让我独自负责小程序这个项目，到现在也有半年之余了，从开始搭建，到设计页面，到因为新需求和旧需求的数据联动而重构，到现在的优化，一个人趟过很多坑，有翻遍文档和搜索不到的问题，有从没出现过的错误码，写了差不多近30个页面，让我觉得最轻松的，是用flex布局解决小程序大部分布局问题。
运用场景
一般比较常见的场景有：
1.带有icon图案的输入框
- display：flex
- 指定最外面的元素box为flex容器
- flex-direction:column
- 属性决定主轴的方向（即项目的排列方向）,column是垂直排序，cell元素在父元素box里从上到下垂直依次排列着
<!-- wxml文件 -->
<view class="box">
<view class="cell"></view>
</view>
<!-- wxss文件 -->
.box{
width:95vw;
display:flex;
flex-direction:column; <!--垂直布局-->
}
.cell{
width:100%; height:60rpx;
padding:10rpx 0;
}
这样就可以做出一个最简单的flex布局啦，然后我们在写里面的cell_icon和cell_text，这里用设置flex-grow属性的方法：
- flex-grow属性
- flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
- 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
-
这里我们可以先统一cell_icon的宽度和高度，设置cell_icon元素flex-grow：0元素不放大比例，然后再设置cell_text元素felx-grow:1等分剩余空间
-
flex-grow大于0的情况。该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
举个例子: 父元素cell宽400px，有两个子元素：cell_icon和cell_text。cell_icon宽为100px，cell_text宽为200px。 则空余空间为 400-（100+200）= 100px。 如果cell_icon和cell_text都不索取剩余空间，则有100px的空余空间。cell_icon设置flex-grow为1，cell_text设置flex-grow为2。则最终cell_icon的大小为 自身宽度（100px）+ cell_icon获得的剩余空间的宽度（100px (1/(1+2))）,最终cell_text的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px (2/(1+2))）
<!-- wxml文件 -->
<view class="box">
<view class="cell">
<view class="cell_icon"></view>
<view class="cell_text"></view>
</view>
</view>
<!-- wxss文件 -->
.box{
width:95vw;
display:flex;
flex-direction:column; //垂直方向
}
.cell{
width:100%; height:60rpx;
padding:10rpx 0;
}
.cell_icon{
width:80rpx; height:80rpx;
方法一：flex-grow:0;
方法二：flex-grow:1;
}
.cell_text{
height:80rpx;
方法一：flex-grow:1;
方法二：flex-grow:7;
}
2.按钮组
我们经常会在一个元素里有几个控制不同事件的按钮，小程序端最常见的样式就是这种一边一个按钮，控制着这个页面不同的事件。 和第一个场景不一样的是，这个按钮排布的主轴不再是垂直的，而是平行的，那这里的flex-direction:column就需要改变成水平布局flex-direction:row,然后再用justify-content属性让子元素在父元素主轴上听话的把自己放在该放的位置。
- justify-content属性
- justify-content属性定义了项目在主轴上的对齐方式。
- 它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<!-- wxml文件 -->
<view class="btn_group">
<view class="manage btn"></view>
<view class="add btn"></view>
</view>
<!-- wxss文件 -->
.btn_group{
width:100vw;height:80rpx;
padding:10rpx 0; background:#ffffff;
display:flex;
flex-direction:row; //水平方向
justify-content: space-between; //主轴对齐方式
}
.btn{
border-radius: 10rpx; padding: 20rpx 50rpx;color:#fff;
}
.manage{
border: 1px solid #777; color: #000;
}
.add{
background:#0b85f7;
}
以上，能满足大部分小程序的页面布局了，只要了解通透flex的各种属性，就可以让元素跟着你的想法放置啦~