微信小程序开发之flex布局

微信小程序view布局说之flex布局常用七大属性

微信小程序支持 block 和 flex 布局( 默认 block 布局 )，目前推荐使用 flex 布局;

既然推荐了，就说一下 flex 布局带给我们得#好处#

• 快速、效率高、精准布局
• 兼容性优
• 由于低版本浏览器在国内，还占有一小部分席地。所以，在国内的pc端网站还要考虑兼容性问题。反观，在移动设备上应用就较为广泛
• 移动端 flex布局已经占据主流

wxss: 我这里主要介绍属性的使用，莫要感觉到枯燥嘛，要用程序员的眼光去阅读哈（在实际应用场景，有贴图哦）

1. flex布局 属性 display: flex，默认横向布局

.view {

display: flex;

}

2. flex-dircetion

设置横向和竖向布局，它有4个值；

• row: 从左到右水平方向为主轴；
• row-reverse: 从右到左水平方向为主轴；
• column: 从上到下垂直方向为主轴；
• column-reverse: 从下到上垂直方向为主轴；

3. justify-content

设置元素在横向上得布局方向，它有 5 个属性值

• flex-start: 主轴起点对齐；
• flex-end: 主轴终点对齐；
• center: 在主轴中心对齐；
• space-between: 两端对齐，除了两端得子元素分别容器两端以外，其他得子元素之间得间隔都相等；
• space-around: 所有子元素得间隔都相等，两端距离容器壁也相等；

4. align-items

设置元素在竖向上的布局方向，它有5个属性值

• stretch: 填充整个容器
• flex-start: 侧轴的起点对齐
• flex-end: 侧轴的终点对齐
• center: 在侧轴中居中对齐
• baseline: 以子元素的第一行文字对齐

5. （子元素属性）align-self

会覆盖父元素的 align-items，它有6个值（增加的 auto，其他5个值同 align-items）

• auto: 继承父元素 align-items 属性

6. flex-wrap

控制子元素 view 是否换行，它有3个值

• nowrap: 默认不换行
• wrap: 换行
• wrap-reverse: 换行，第一行在最下面

7. （子元素属性）order

控制子元素的排列顺序，默认为0

• 0： 位置不变
• 1： 至于末尾
• -1： 至于首位

                    

    应用场景

           1. 子元素居中对齐 （常用的应用场景）

.parent {
    width: 100%;
    height: 100%;
    display: flex;
    /* 横向-居中 */
    justify-content: center;

    /* 竖向-居中 */
    align-items: center;
}
.parent .child {
    /* 宽高随意 */
}