微信小程序学习(一)

原创

已于 2024-01-13 17:07:54 修改 · 1.9k 阅读

标签

#微信小程序

于 2024-01-12 17:48:05 首次发布

学习一、微信小程序的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 父项常见属性

flex-direction :设置主轴的方向

justify-content :设置主轴上的子元素排列方式

flex-wrap :设置子元素是否换行

align-content :设置侧轴上的子元素的排列方式(多行)

align-items :设置侧轴上的子元素排列方式(单行)

flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap