微信小程序开发02--flex布局

原创于 2025-08-08 11:23:35 发布 · 1.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #html

前端学习大三部曲自用专栏收录该内容

4 篇文章

订阅专栏

前言、

本文为微信小程序开发自用笔记

（学习视频参考B站 BV1EFcve9EH1 或 BV1WgQdYNERe(推荐这个，视频内容更完整））

正式内容开始前，需准备好以下软件：微信开发者工具、pycharm或vscode（提前配置好html与解释器）

flex布局（html）

一、 flex 布局是什么

① 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便（比如：垂直居中）

② Flex 是 Flexible Box 或 flexbox 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性

③ 可以指定任何一个容器为 Flex 布局。

④ flex 只是一种布局方式，跟微信小程序没有必然联系

--web前端

--微信小程序

⑤ 这里使用 web前端页面为例

--vscode举例

二、 flex 布局的好处

① 简单易懂：与传统布局相比，其语法更简单且容易理解上手。

② 弹性与白适应：其可以自适应不同尺寸的设备屏幕，让页面更具弹性。

③ 等高布局：可以方便地实现多列等高布局

④ 对齐与排序：Flex 布局支持各种对齐方式，包括水平与垂直对齐，并且可以通过设置 order 属性对子元素进行排序。

⑤ 可以与传统布局结合使用：Flex 布局并非完全替代传统布局的方式，它可以与传统布局方式结合使用，实现更多且更灵活的布局效果。

三、 flex 布局中的概念（重点）

① 采用 Flex 布局的元素，称为 Flex 容器（flex container)，简称 “ 容器 ”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称 “ 项目 ”

容器与项目：container、item

② 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴与交叉轴：main axis、cross axis

③ 主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。

（1）起始位置：main start（主轴起始位置）、cross start（侧轴起始位置）

（2）结束位置：main end（主轴结束位置）、cross end（侧轴结束位置）

④ 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size

（1）主轴尺寸

（2）侧轴尺寸

四、容器样式属性（container）

重点：

flex-direction	决定主轴方向
flex-wrap	如果一条轴线排不下，如何换行
flex-flow	flex-direction 和 flex-flow 的简写属性
justify-content	定义项目在主轴上的对齐方式
align-items	定义项目在交叉轴上如何对齐
align-content	定义了多根轴线的对齐方式，若项目只有一根轴线，则该属性不起作用。

① flex-direction：决定主轴的方向

（1）flex-direction 属性决定主轴的方向（即项目排列的方向）

（2）有4个值：

row（默认值）	主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在右端
column	主轴为垂直方向，起点在上沿
column-reverse	主轴为垂直方向，起点在下沿

（3）强调：使用 flex-direction 属性后，因为主轴的位置发生了改变，使用和主轴或交叉轴有关的属性之前一定要确定好主轴的位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
                display: flex;
                flex-direction: row;  /* reverse   column   column-reverse*/
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: pink;
                border: 1px solid black;
            } 

    </style>


</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

② flex-wrap 如果一条轴线排不下，如何换行

（1）默认情况下，项目都排在一条线（轴线）上。flex-wrap 属性定义，如果一条轴线排不下，如何换行。

（2) flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠方向

（3）3个值 flex-wrap：nowrap | wrap | wrap-reverse；

nowrap	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
                display: flex;
                flex-direction: row;  /* reverse   column   column-reverse*/
                flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: pink;
                border: 1px solid black;
            } 

    </style>


</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>

</html>

③ flex-flow：flex-direction 和 flex-flow 的简写属性

flex-flow: flex-direction || flex-wrap

④ justify-content：定义项目在主轴上的对齐方式。

（1）justify-content 属性定义了项目在主轴上的的对齐方式

（2）6个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右

flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
space-evenly	项目与项目之间，项目于边框之间的间隔都相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
          
            display: flex;
           
            /*    flex-direction: row;  /* reverse   column   column-reverse*/
            /*    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            
            flex-flow:row wrap;
           
            /*经常用：6个选择
            flex-start, flex-end, center, space-between, space-around, space-evenly*/
            justify-content:space-evenly;
            align-items: stretch;
            }
            .box>div{
                width: 100px;
                height: 100px; 
                background: pink;
                border: 1px solid black;
            }
            
            /*.box div:nth-child(1){
                padding-top: 10px;
            }

            .box div:nth-child(2){
                padding-top: 15px;
            }

            .box div:nth-child(4){
                padding-top: 20px;
            }
            */
    </style>

⑤ align-items 定义项目在交叉轴上如何对齐

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
          
            display: flex;
           
            /*    flex-direction: row;  /* reverse   column   column-reverse*/
            /*    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            
            flex-flow:row wrap;
           
            /*经常用：6个选择
            flex-start, flex-end, center, space-between, space-around, space-evenly*/
            justify-content:space-evenly;
            align-items: stretch;
            }
            .box>div{
                width: 100px;
                height: 100px; 
                background: pink;
                border: 1px solid black;
            }
            
            /*.box div:nth-child(1){
                padding-top: 10px;
            }

            .box div:nth-child(2){
                padding-top: 15px;
            }

            .box div:nth-child(4){
                padding-top: 20px;
            }
            */
    </style>


</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>

    </div>
</body>

</html>

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

flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与交叉轴两端对齐，轴线之间的间隔平均分布
space-around	每根轴线两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）	轴线占满整个交叉轴

注：align-content 的属性值和前面都一样，只需要注意在使用 align-content 的属性之前一定要加上 flex-wrap: wrap;属性

五、项目属性（items）

order	定义项目的排列顺序。数值越小，排列越靠前，默认为0
flex-grow	定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
flex-shrink	定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis	定义了分配多余空间之前，项目占据的主轴空间（main size）。它的默认值 auto，即项目的本来大小
flex	flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选
align-self	允许单个项目与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto

① order 属性

（1）定义项目的排列顺序。数值越小，排列与靠前，默认为0

（2）.item { order: integer;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
          
            display: flex;
           
            /*    flex-direction: row;  /* reverse   column   column-reverse*/
            /*    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            
            flex-flow:row wrap;

            }
            .box>div{
                width: 100px;
                height: 100px; 
                background: pink;
                border: 1px solid black;
            }
            
            .box div:nth-child(1){
                order: -1;
            }
            .box div:nth-child(2){
                order: 2;
            }
            .box div:nth-child(3){
                order: 4;
            }
            .box div:nth-child(4){
                order: 0;
            }
            .box div:nth-child(5){
                order: 3;
            }
            .box div:nth-child(6){
                order: 7;
            }
    </style>


</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>

    </div>
</body>

</html>

② flex-grow 属性

（1）定义项目的放大比例，默认为0，即如果存在剩余空间，也不进行放大

（2）.item { flex-grow: number; /* default 0 */ }

（3）如果所有项目的 flex-grow 属性都为1，则它们将等分的剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为 2，其他项目属性为 1，则前者占据的剩余空间将比其他项多一倍。

③ flex-shrink 属性

（1）flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小

（2）.item { flex-shrink: number; /* default 1 */ }

（3）如果所有项目的 flex-shrink 属性都为 1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

（4）负值对该属性无效

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
          
            display: flex;
           
            /*    flex-direction: row;  /* reverse   column   column-reverse*/
            /*    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            
            flex-flow:row;

            }
            .box>div{
                width: 400px;
                height: 100px; 
                background: pink;
                border: 1px solid black;
            }
            

            .box div:nth-child(1){
                flex-shrink: 1;
            }

            .box div:nth-child(2){
                flex-shrink: 0;
            }

            .box div:nth-child(3){
                flex-shrink: 1;
            }

            .box div:nth-child(4){
                flex-shrink: 1;
            }

    </style>

</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>

    </div>
</body>

</html>

④ flex-basis 属性

（1）flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余的空间。它的默认值为 auto，即项目的本来大小

（2）.item { flex-basis: length | auto; /* default auto */ }

                /* 将项目2的宽度设为200px */
                flex-basis: 200px;
            }

⑤ flex 属性

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

（2）.item { flex : none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

（3）该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）

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

（5）一般项目下 flex 属性用于将项目平均占满空间

.box div {
    /* 使所有项目平均占满空间 */
    flex: 1;
}

⑥ align-self 属性（用的少）

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

（2）.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}

（3）该属性可能取 6 个值，除了 auto，其他属性与 align-items 完全一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <style>
            .box{
                width: 800px;
                height: 400px;
                border: 1px solid red;
                margin: auto;
            /* 把这个容器设置为flex布局 */
          
            display: flex;
           
            /*    flex-direction: row;  /* reverse   column   column-reverse*/
            /*    flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */
            
            flex-flow:row;

            }
            .box>div{
                width: 400px;
                height: 100px; 
                background: pink;
                border: 1px solid black;
                flex:1;
            }
            .box div:nth-child(2){
                /* 使第二个项目在交叉轴上终点对齐 */
                align-self: flex-end;
            }



    </style>


</head>
<body>
    
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>


    </div>
</body>


</html>

运行结果