微信小程序学习(一)

学习一、微信小程序的flex布局详解

1、flex布局原理  

 flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何容器都可以指定为 flex 布局

当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局
采用 Flex 布局的元素，成为 Flex 容器（Flex container），简称容器，它的所有子元素自动成为容器成员，成为 Flex 项目（Item）

总：
通过给 父容器添加 flex 属性，来控制子盒子的位置和排列方式

2、Flex布局的特点

• 任意方向的伸缩，向左，向右，向下，向上

• 在样式层可以调换和重排顺序

• 主轴和侧轴方便配置

• 子元素的空间拉伸和填充

• 沿着容器对齐

3、伸缩容器

设有display:flex或者display:block的元素就是一个flex container(伸缩容器)，里面的子元素称为flex item(伸缩项目)，flex container中子元素都是使用Flex布局排版。

display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:block。

display:flex:指定为行内容器模式，在一行内显示子元素，可以使用flex-wrap属性指定其是否换行，flex-wrap有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)

3.1、display:block 代码示例

index.wxml 

<view class="box">

  <view class="flex-1"></view>

  <view class="flex-2"></view>

  <view class="flex-3"></view>

  <view class="flex-4"></view>

</view>

index.scss

.box{

    display: block;

    

    

    .flex-1{

        width: 5%;

        height: 130rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 10%;

        height: 130rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 15%;

        height: 130rpx;

        background-color: greenyellow;

    }

    .flex-4{

        width: 20%;

        height: 130rpx;

        background-color: red;

    }

    .flex-5{

        width: 25%;

        height: 130rpx;

        background-color: blue;

    }

}

效果：

3.2、display:flex 代码示例 

.box{

    display: flex;

效果

4、主轴和侧轴 

Flex布局的伸缩容器可以使用任何方向进行布局。

容器默认有两个轴：主轴(main axis)和侧轴(cross axis)。

主轴的开始位置为主轴起点(main start)，主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。

同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。详情见下图:

注意，主轴并不是一定是从左到右的，同理侧轴也不一定是从上到下，主轴的方向使用flex-direction属性控制,它有4个可选值:

row :从左到右的水平方向为主轴

row-reverse：从右到左的水平方向为主轴

column:从上到下的垂直方向为主轴

column-reverse从下到上的垂直方向为主轴

如果水平方向为主轴，那个垂直方向就是侧轴，反之亦然。

四种主轴方向设置的效果图:

 5、flex 父项常见属性

1. flex-direction :设置主轴的方向
2. justify-content :设置主轴上的子元素排列方式
3. flex-wrap :设置子元素是否换行
4. align-content :设置侧轴上的子元素的排列方式(多行)
5. align-items :设置侧轴上的子元素排列方式(单行)
6. flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

 6、使用 flex 设置水平弹性布局 

 6.1 Flex 布局的方向轴

• Flex 布局有两根方向轴：水平的主轴 和 垂直的交叉轴
• Flex 布局默认是水平主轴的

将上述的父容器 （box）属性 display属性 设置为 flex 布局 

index.scss

.box{

    display: flex;

 效果：

6.1.1 水平主轴布局 row （水平向右）  

•  flex-direction: row;（默认值）

.box{

    display: flex;

    flex-direction: row;

•  flex-direction: row-reverse;（主轴反向） 

.box{

    display: flex;

    flex-direction: row-reverse;

 

 6.1.2 垂直侧轴布局 column （水平向下）

• flex-direction: column;（垂直方向）

.box{

    display: flex;

    flex-direction: column;

• flex-direction: column-reverse; （垂直反向）

.box{

    display: flex;

    flex-direction: column-reverse;

6.2 justify-conent 定义子元素在主轴上面的对齐方式

为了测试效果，修改index.scss

.

.box{

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    

    .flex-1{

        width: 5%;

        height: 100rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 10%;

        height: 150rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 15%;

        height: 200rpx;

        background-color: greenyellow;

    }

    .flex-4{

        width: 20%;

        height: 250rpx;

        background-color: red;

    }

    .flex-5{

        width: 25%;

        height: 300rpx;

        background-color: blue;

    }

}

效果 

6.2.1 flex-start 主轴起点对齐(默认值)

.box{

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

6.2.2 flex-end 侧轴的起点对齐

.box{

    display: flex;

    flex-direction: row;

    justify-content: flex-end;

6.2.3 center 在主轴中居中对齐

.box{

    display: flex;

    flex-direction: row;

    justify-content: center;

6.2.4 space-between 两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等

.box{

    display: flex;

    flex-direction: row;

    justify-content: space-between;

6.2.5 space-around 每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同

.box{

    display: flex;

    flex-direction: row;

    justify-content: space-around;

6.3 align-items 定义子元素在侧轴上对齐的方式

默认flex-direction: row;

6.3.1 stretch 填充整个容器(默认值)

如果项目未设置高度或设为auto，将占满整个容器的高度。 

修改代码 子项目高度不设置

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    align-items: stretch;

    

    .flex-1{

        width: 5%;

        background-color: aquamarine;

    }

    .flex-2{

        width: 10%;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 15%;

        background-color: greenyellow;

    }

    .flex-4{

        width: 20%;

        background-color: red;

    }

    .flex-5{

        width: 25%;

        background-color: blue;

    }

}

 

6.3.2 flex-start 侧轴的起点对齐

修改代码 设置高度，并且文本居中 为了测试效果

.box{

   width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

        

    

    .flex-1{

        width: 5%;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 10%;

        height: 150rpx;

        text-align: center;

        line-height: 150rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 15%;

        height: 200rpx;

        text-align: center;

        line-height: 200rpx;

        background-color: greenyellow;

    }

    .flex-4{

        width: 20%;

        height: 250rpx;

        text-align: center;

        line-height: 250rpx;

        background-color: red;

    }

    .flex-5{

        width: 25%;

        height: 300rpx;

        text-align: center;

        line-height: 300rpx;

        background-color: blue;

    }

}

效果：

6.3.3 flex-end 侧轴的终点对齐

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    align-items: flex-end;

6.3.4 center 在侧轴中居中对齐

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    align-items: center;

6.3.5 baseline 以子元素的第一行文字对齐

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    align-items: baseline;

    .flex-1{

        width: 5%;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 10%;

        height: 150rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 15%;

        height: 200rpx;

        

        background-color: greenyellow;

    }

    .flex-4{

        width: 20%;

        height: 250rpx;

        text-align: center;

        line-height: 250rpx;

        background-color: red;

    }

    .flex-5{

        width: 25%;

        height: 300rpx;

        text-align: center;

        line-height: 300rpx;

        background-color: blue;

    }

}

6.4 flex-wrap 换行

6.4.1 nowrap（默认）：不换行

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: nowrap;

    .flex-1{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 150rpx;

        height: 150rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 100rpx;

        height: 200rpx;

        background-color: greenyellow;

    }

    .flex-4{

        width: 150rpx;

        height: 250rpx;

        text-align: center;

        line-height: 250rpx;

        background-color: red;

    }

    .flex-5{

        width: 100rpx;

        height: 300rpx;

        text-align: center;

        line-height: 300rpx;

        background-color: blue;

    }

    .flex-6{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

    .flex-7{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: blue;

    }

    .flex-8{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

        

    }

    .flex-9{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: blue;

    }

    .flex-10{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

}

6.4.2  wrap：换行，第一行在上方

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

6.4.3 wrap-reverse：换行，第一行在下方

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap-reverse;

 

 6.5 flex-flow flex-flow 属性是 flex-direction 和 flex-wrap 的简

可直接使用flex-direction和flex-wrap里面的属性）

6.6 align-content 定义了多根轴线的对齐方式

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

修改代码为 flex-wrap: wrap;

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 必须为wrap align-content 才可能多轴

    flex-wrap: wrap;

    .flex-1{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: aquamarine;

    }

    .flex-2{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: rebeccapurple;

    }

    .flex-3{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: greenyellow;

    }

    .flex-4{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

    .flex-5{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: blue;

    }

    .flex-6{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

    .flex-7{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: blue;

    }

    .flex-8{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

    .flex-9{

        width: 100rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: blue;

    }

    .flex-10{

        width: 150rpx;

        height: 100rpx;

        text-align: center;

        line-height: 100rpx;

        background-color: red;

    }

}

6.6.1 stretch（默认值）：轴线占满整个交叉轴

6.6.2 flex-start：与交叉轴的起点对齐

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

    align-content:flex-start;

6.6.3 flex-end：与交叉轴的终点对齐。

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

    align-content:flex-end;

 

6.6.4 center：与交叉轴的中点对齐。

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

    align-content:center;

 

6.6.5 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

    align-content:space-between;

 

6.6.6 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

.box{

    width: 100%;

    height: 400rpx;

    background: chocolate;

    display: flex;

    flex-direction: row;

    // 默认 mowrap

    flex-wrap: wrap;

    align-content:space-around;