开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序学习笔记④——Flex布局[实战样例之画骰子] -> 正文阅读

[移动开发]微信小程序学习笔记④——Flex布局[实战样例之画骰子]

? 关于 Flex，很多优秀的前辈已经总结过了，比如：阮一峰的《Flex 布局教程：语法篇》、知乎林东洲的《30 分钟学会 Flex 布局》等等。他们主要是基于网页的，小辈斗胆笔耕一篇倾向于 “微信小程序” 的 Flex 博客。

微信小程序开发 🌲

上一篇文章链接: 微信小程序学习笔记③——wxml+wxss+js基础入门[样例+解析]

下一篇文章链接: 🚧 🚧 …

一、Flex 概述

● 为什么要学 “布局”？
因为后面设计微信小程序的展示界面时，若没有一个良好的 “底层页面摆放逻辑”，那么我们的小程序很可能来实用过程中出现 “内容显示不全”、“图片变形或错位”、“表格错位”、“文本框重叠” 等莫名其妙的 Bug。学 “布局” 不是一个需要我们去敲它的底层逻辑，而是去学如何良好的使用它。

● 为什么要学 “Flex布局”？原因如下：
2009年，W3C（万维网联盟，全称World Wide Web Consortium）提出了一种新的方案——“Flex布局”，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局将成为未来布局的首选方案。

在这里插入图片描述

◆ 说明：以上是主流浏览器支持的力度。最下面的版本是最新版本，可以发现，几乎全部都是 “Supported”。

● Flex 简介：全称为 “Flexible Box Layout”，即 “弹性盒布局”，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。

● Flex 布局背后的主要思想：是让容器能够改变其项目的宽度/高度（或顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸），以防止显示不完整或溢出。

● “Flex 布局”与 “常规布局” 的对比：与常规布局（基于垂直的块和基于水平的内联）相反，弹性盒布局与方向无关。虽然这些适用于页面，但它们缺乏灵活性来支持大型或复杂的应用程序（尤其是在涉及方向更改、调整大小、拉伸、收缩等方面 → 比如说在拉伸缩小页面时，页面显示的东西也跟着 “弹性地” 变化，你可以试试拉伸这个网站：《A Complete Guide to Flexbox》）。

● 注意： Flexbox 布局最适合应用程序的组件和小规模布局，而 Grid 布局适用于更大规模的布局。

● 学习 Flex 的官方文章：《A Complete Guide to Flexbox》、《A Visual Guide to CSS3 Flexbox Properties》

二、基础知识和术语

● 采用 Flex 布局的元素，称为『Flex容器(flex container)』，简称 ”容器”。它的所有子元素自动成为容器成员，称为『Flex项目(flex item)』，简称”项目”。

在这里插入图片描述
◆ 说明：
??① 容器默认存在两根轴：水平的『主轴(main axis)』和垂直的『交叉轴(cross axis)』。【注，我们可以通过修改使垂直方向变为主轴，水平方向变为交叉轴，后面会讲】

??② 主轴与左右边框的交叉点，分别叫作『主轴开始处(main start)』、『主轴结束处(main end)』。

??③ 交叉轴与左右边框的交叉点，分别叫作『交叉轴开始处(cross start)』、『交叉轴结束处(cross end)』。

??④ 项目默认沿主轴排列。单个项目占据的主轴空间【注，这里的空间是一维的，即“长度空间”】叫作『占主轴尺寸(main size)』，占据的交叉轴空间叫做『占交叉轴尺寸(cross size)』。

三、Flex 容器初了解

在这里插入图片描述

● 任何一个容器都可以指定为 Flex 布局。样例如下：

▼ WXML代码如下：

<image src="./Images_Flex/Flex项目1.png" style="width: 60px;height: 60px;"></image>
<image src="./Images_Flex/Flex项目2.png" style="width: 60px;height: 60px;"></image>
<image src="./Images_Flex/Flex项目3.png" style="width: 60px;height: 60px;"></image>
<image src="./Images_Flex/Flex项目4.png" style="width: 60px;height: 60px;"></image>
<image src="./Images_Flex/Flex项目5.png" style="width: 60px;height: 60px;"></image>


<view class="MyContainer">
    <image src="./Images_Flex/Flex项目1.png" style="width: 60px;height: 60px;"></image>
    <image src="./Images_Flex/Flex项目2.png" style="width: 60px;height: 60px;"></image>
    <image src="./Images_Flex/Flex项目3.png" style="width: 60px;height: 60px;"></image>
    <image src="./Images_Flex/Flex项目4.png" style="width: 60px;height: 60px;"></image>
    <image src="./Images_Flex/Flex项目5.png" style="width: 60px;height: 60px;"></image>
</view>

▼ WXSS代码如下：

.MyContainer_1 {
    display: flex;
    justify-content: space-around;
}

◆ 代码说明：
??① 引入图片用的是 “image” 标签，src 指向图片的存储路径，style 和 class 的功能类似，只不过可以直接在标签项里面写。
??② px 是像素的意思，是一中计量单位，60px 表示占电脑屏幕的 60 个像素点。
??③ .wxml 代码中的第二段中出现了 “嵌套”，这是笔者写 “微信小程序学习笔记” 以来第一次出现。可以理解为内层的标签『项目』会包含在它外层的标签『项目』的里面。
??④ container 是一个 WXSS 里面内嵌的一个 “封装好的选择器”，我们不用它，用自己写的。
??⑤ display 是该选择器里面的一个( 布局)属性。
??⑥ 项目默认沿主轴排列。

● 图片存储情况和运行结果：

在这里插入图片描述

◆ 说明：左边演示框的上面一堆是普通的摆放，下面的是 flex 布局。为什么为这样子摆放，是 “justify-content: space-around;” 起的作用，后面会学到。【justify-content: space-around; → 每个项目两侧的间隔相等。且项目之间的间隔比项目与边框的间隔大一倍】

四、Flex 容器的属性

● Flex 容器常用的有 6 个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。接下来将依次对其进行学习。并在文末进行实践运用。

4.1 flex-direction 属性

● flex-direction 属性：决定主轴的方向(即项目的排列方向)。它常用的有 4 个选项。

在这里插入图片描述

.box {
  flex-direction: row;  /* 或 row-reverse 或 column 或 column-reverse; */
}

选项	功能
`row`(默认值)	主轴为水平方向，起点在左端
`row-reverse`	主轴为水平方向，起点在右端
`column`	主轴为垂直方向，起点在上沿
`column-reverse`	主轴为垂直方向，起点在下沿

4.2 flex-wrap 属性

● 默认情况下，项目都排在一条线(又称”轴线”)上。flex-wrap 属性：定义如果一条轴线排不下，如何换行。它常用的有 3 个选项。

在这里插入图片描述

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;   /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

选项	功能	演示图
`nowrap`(默认值)	不换行	下图中红色方块的排列方式
`wrap`	换行，第一行在上方	下图中黄色方块的排列方式
`wrap-reverse`	换行，第一行在下方	下图中蓝色方块的排列方式

在这里插入图片描述

4.3 flex-flow 属性

● flex-flow 属性：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.box{
   flex-flow: <flex-direction：有四种> <flex-wrap：有三种>;   /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

样例:
.box{
   flex-flow: row nowrap;  
}

4.4 justify-content 属性

● justify-content 属性：定义了项目在『主轴(main axis)』上的对齐方式。它常用的有 6 个选项。

在这里插入图片描述

.box{
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;   
  /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

选项	功能
`flex-start`(默认值)	左对齐
`flex-end`	右对齐
`center`	居中
`space-between`	两端对齐，项目之间的间隔都相等
`space-around`	每个项目两侧的间隔相等。且项目之间的间隔比项目与边框的间隔大一倍
`space-evenly`	每个项目两侧的间隔相等。且项目之间的间隔与项目与边框的间隔一样大

4.5 align-items 属性

● align-items 属性：定义项目在『交叉轴(cross axis)』上如何对齐。它常用的有 5 个选项。【具体对齐方式与轴的方向有关。下面的演示图一律假设主轴为从左到右，交叉轴为从上到下】

在这里插入图片描述

.box{
  align-items: flex-start | flex-end | center | baseline | stretch;  
  /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

选项	功能
`flex-start`	交叉轴的起点对齐
`flex-end`	交叉轴的终点对齐
`center`	交叉轴的中点对齐
`baseline`	项目的第一行文字的基线对齐
`stretch`(默认值)	如果项目未设置高度或设为auto，将占满整个容器的高度

4.6 align-content 属性

● align-content 属性：定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。它常用的有 6 个选项。【具体对齐方式与轴的方向有关。下面的演示图一律假设主轴为从左到右，交叉轴为从上到下】

在这里插入图片描述

.box{
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

选项	功能
`flex-start`	与交叉轴的起点对齐
`flex-end`	与交叉轴的终点对齐
`center`	与交叉轴的中点对齐
`space-between`	与交叉轴两端对齐，轴线之间的间隔平均分布
`space-around`	每根轴线两侧的间隔都相等，且轴线之间的间隔比轴线与边框的间隔大一倍
`stretch`(默认值)	轴线伸展(即项目拉伸)以占用剩余空间

五、项目的属性

● 前面把 “容器” 的属性讲完了，接下来讲 “容器” 里面的 “项目”。

● Flex 项目常用的有 6 个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self。

5.1 order 属性

● order 属性：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

在这里插入图片描述

.item {
  order: <integer>;		/* <integer> 即是我们需要写的数字*/
}

5.2 flex-grow 属性

● flex-grow 属性：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

在这里插入图片描述

.item {
  flex-grow: <number>; 	/* <number> 即是我们需要编写的数字*/
}

◆ 说明：如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。如上图的第二个样例。

5.3 flex-shrink 属性

● flex-shrink 属性：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。【下图中，中间个项目的 flex-shrink 为 0，其他两个为 1】

在这里插入图片描述

.item {
  flex-shrink: <number>; 	/* <number> 即是我们需要编写的数字*/
}

◆ 说明：
??① 如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。
??② 如果这时存在一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小，后者全部等比例缩小。
??③ 负值对该属性无效。

5.4 flex-basis 属性

● flex-basis 属性：定义了在分配多余空间之前，项目占据的『占主轴尺寸(main size)』。它的默认值为 auto，即项目的本来大小。但如果设置了 flex-basis，权重会比 width 属性高，因此会覆盖 widtn 属性。（假设主轴方向为 width 方向）

在这里插入图片描述

.item {
  flex-basis: <length>;		/* <length> 即是我们需要编写的数字*/
}

◆ 说明：它可以设为跟 width 或 height 属性一样的值(比如350px)，则项目将占据固定空间。

5.5 flex 属性

● flex 属性：是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

.item {
    flex: auto | none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]	
}

● 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

◆ 说明：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

5.6 align-self 属性

● align-self 属性：允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。它常用的有 6 个选项。

在这里插入图片描述

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
    /* 这样写只是为了方便展示, WXSS 没有这样的语法*/
}

选项	功能
`auto`(默认值)	表示继承父元素的 `align-items` 属性，如果没有父元素，则等同于 `stretch`
`flex-start`	交叉轴的起点对齐
`flex-end`	交叉轴的终点对齐
`center`	交叉轴的中点对齐
`baseline`	项目的第一行文字的基线对齐
`stretch`	如果项目未设置高度或设为auto，将占满整个容器的高度

六、实战样例 —— 画骰子????

● 光说不练假把式，又说又练真把式！

● 设计要求：用一个 “容器” 装 6 个骰子，每个骰子显示一个面。

在这里插入图片描述

● WXML代码如下：

<view class="MyContianer">
    <!-- 一点 -->
    <view class="square">
        <view class="null_paral"> 
            <view class="null_Point"></view>
        </view>

        <view class="second_1">
            <view class="Point"></view>
        </view>

        <view class="null_paral"> 
            <view class="null_Point"></view>
        </view>
    </view>

    <!-- 两点 -->
    <view class="square">
        <view class="first_1">
            <view class="Point"></view>
        </view>
        <view class="null_paral"> 
            <view class="null_Point"></view>
        </view>
        <view class="three_1">
            <view class="Point"></view>
        </view>
    </view>

    <!-- 三点 -->
    <view class="square">
        <view class="first_2">
            <view class="Point"></view>
        </view>
        <view class="second_1">
            <view class="Point"></view>
        </view>
        <view class="three_1">
            <view class="Point"></view>
        </view>
    </view>

    <!-- 四点 -->
    <view class="square">
        <view class="first_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
        <view class="null_paral"> 
            <view class="null_Point"></view>
        </view>
        <view class="three_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
    </view>

    <!-- 五点 -->
    <view class="square">
        <view class="first_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
        <view class="second_1">
            <view class="Point"></view>
        </view>
        <view class="three_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
    </view>

    <!-- 六点 -->
    <view class="square">
        <view class="first_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
        <view class="second_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
        <view class="three_2">
            <view class="Point"></view>
            <view class="Point"></view>
        </view>
    </view>
</view>

◆ 代码说明：
??① 我的设计方案是：最外层(第1层)一个大容器，flex 布局，且可换行。第2层是六个骰子(即“小容器”)。第3层是每个骰子里面的 “上、中、下” 的三个 “隐形的长方型框框”。最后一层(第4层)是画 “点” 的『view 组件』。
??② 我设计 “空行” 的方法是：在那个 “隐形的长方型框框” 塞一个和背景(黑色)颜色一样的骰子。
??③ first_1 的意思是：first 行存在 1 个 “点” 的情况。

● WXSS代码如下：

.MyContianer {
    margin-top:50px;
    background-color: #e1e7e9;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    height: 200px;
    width: auto;
    
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;  /* 主轴 */
    align-items: center;            /* 交叉轴(默认是竖轴)居中 */
}

.square {
    background-color: rgb(0, 0, 0);   /* 骰子底色*/
    width: 20%;     /* 容器 width 的 20% */
    height: 40%;    /* 容器 height 的 20% */
    margin-left: 5px; /* 外边距 */
    margin-right: 5px;

    /* 使用 flex 布局 */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.null_paral, .first_1, .first_2, .second_1, .second_2, .three_1 ,.three_2 { /* 共有的属性*/
    padding: 3px;           /* 间距 */
    display: flex;          /* 使用flex布局 */
    align-items: center;    /* 交叉轴(默认是竖轴)居中 */
}

.null_paral {
    flex-direction: row;    /* 从左到右排列 */ 
    justify-content: space-between; /* 两端对齐，项目之间的间隔都相等 */
}

.first_1 {
    flex-direction: row;       /* 从左到右排列 */ 
}

.first_2 {
    flex-direction: row;       /* 从左到右排列 */ 
    justify-content: space-between;    /* 两端对齐，项目之间的间隔都相等 */
}
.second_1 {
    flex-direction: row;        /* 从左到右排列 */ 
    justify-content: center;    /* 水平居中 */
}

.second_2 {     /* 和 first_2 一样 */
    flex-direction: row;       /* 从左到右排列 */ 
    justify-content: space-between;    /* 两端对齐，项目之间的间隔都相等 */
}

.three_1 {  
    flex-direction: row-reverse;    /* 从右到左排列 */ 
}

.three_2 {     /* 和 first_2 一样 */
    flex-direction: row;       /* 从左到右排列 */ 
    justify-content: space-between;    /* 两端对齐，项目之间的间隔都相等 */
}

.Point {	/* 白色的点 */
    display: block;
    height: 20px;
    width: 20px;
    background-color: #ffffff;
    border-radius: 50%;
}

.null_Point {	/* “隐藏”的点 */
    display: block;
    height: 20px;
    width: 20px;
    background-color: black;
    border-radius: 50%;
}