一文读懂微信小程序 flex 布局：容器属性全面解析

于 2025-02-26 10:39:02 发布
阅读量1k 收藏 25
点赞数 19
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2301_79226238/article/details/145872168
版权

目录

flex布局介绍

flex-direction

    示例介绍

    各文件说明和示例代码

flex-wrap

    示例介绍

    各文件说明和示例代码

flex-flow

justify-content

align-items

align-content

flex布局介绍

    Flex 布局是 CSS3 提供的一种新的布局模式，能够简便、完整且响应式地实现各种页面布局。通过设置容器和项目的属性，可以灵活控制子元素的排列方式、对齐方式以及空间分配。

    通过将元素的display属性设置为flex或inline-flex，可以应用Flex布局。设置不同的值可以改变主轴的方向，如：row（水平）或column（垂直）。

    需要注意的是，当应用Flex布局后，一些其他布局相关的属性，如float、clear和vertical-align可能会失效。 

    CSS中提供了以下属性来实现Flex布局：

    容器属性：包括display、flex-direction、flex-wrap、flex-flow、justify-content、align-items和align-content，用于定义弹性盒子的基本布局和行为。

属性

描述

display

指定容器为 Flex 布局（flex 或 inline-flex）。

flex-direction

设置子元素的排列方向（row、row-reverse、column、column-reverse）。

flex-wrap

设置子元素是否换行（nowrap、wrap、wrap-reverse）。

flex-flow

flex-direction 和 flex-wrap 的简写形式。

justify-content

设置子元素在主轴上的对齐方式（如 flex-start、center、space-between）。

align-items

设置子元素在侧轴上的对齐方式（如 stretch、center、flex-start）。

align-content

设置多行子元素在侧轴上的对齐方式（如 space-around、center）。

    项目属性：包括order、align-self、flex、flex-grow、flex-shrink和flex-basis，用于控制子元素在容器中的排列顺序、对齐方式以及空间分配。

属性

描述

order

设置子元素的排列顺序（数值越小，排列越靠前）。

align-self

覆盖容器的 align-items 属性，设置单个子元素的对齐方式。

flex

flex-grow、flex-shrink 和 flex-basis 的简写形式。

flex-grow

设置子元素的扩展比率（默认 0，不扩展）。

flex-shrink

设置子元素的收缩比率（默认 1，允许收缩）。

flex-basis

设置子元素的初始大小（如 auto、100px）。

flex-direction

示例介绍

    该示例是一个微信小程序，用于演示 Flex 布局中 flex-direction 属性的四种排列方式（row、row-reverse、column、column-reverse）。

    核心功能：通过切换 flex-direction 的值，展示子元素在不同主轴方向上的排列效果。

    页面结构：包含一个容器页面（container），展示四种排列方式的效果。

    页面效果图如下：

图片

各文件说明和示例代码

    flex-direction 用于定义 Flex 容器的主轴方向，控制子元素的排列方式。

    属性介绍：

值

描述

row

默认值，主轴沿水平方向从左到右排列。

row-reverse

主轴沿水平方向从右到左排列。

column

主轴沿垂直方向从上到下排列。

column-reverse

主轴沿垂直方向从下到上排列。

initial

将此属性设置为默认值（row）。

inherit

从父元素继承此属性的值。

    示例代码如下：

    app.js

App({

// 代码                                       

})

    app.json

{

 "pages": [

   "pages/item/item",

   "pages/container/container"

 ],

 "window": {

   "navigationBarBackgroundColor": "#07c160",

   "navigationBarTextStyle": "white"

 },

 "tabBar": {

   "color": "a0a0a0",

   "selectedColor": "#07c160",

   "position": "top",

   "list": [

     {

       "pagePath": "pages/container/container",

       "text": "容器属性"

     },

     {

       "pagePath": "pages/item/item",

       "text": "项目属性"

     }

   ]

 },

 "sitemapLocation": "sitemap.json"

}

    说明：配置小程序的页面路径、窗口样式和顶部导航栏。pages：定义小程序的两个页面（container 和 item）。tabBar：设置顶部导航栏，包含“容器属性”和“项目属性”两个选项。

    container.json

{

    "navigationBarTitleText": "容器属性"  

}

    说明：设置当前页面的导航栏标题为“容器属性”。

    container.js

Page({

    //代码  

})

    说明：当前页面暂无逻辑代码，仅作为页面初始化使用。

    container.wxml

<view class="w">  

    <view class="title">一、flex-direction</view>  

    <view class="subTitle">row</view>  

    <view class="row">  

        <view class="item">1</view>

        <view class="item">2</view>

        <view class="item">3</view>

        <view class="item">4</view>

        <view class="item">5</view>  

    </view>  

    <view class="subTitle">row-reverse</view>  

    <view class="row_reverse">  

        <view class="item">1</view>

        <view class="item">2</view>

        <view class="item">3</view>

        <view class="item">4</view>

        <view class="item">5</view>  

    </view>  

    <view class="subTitle">column</view>  

    <view class="column">  

        <view class="item">1</view>

        <view class="item">2</view>

        <view class="item">3</view>

        <view class="item">4</view>

        <view class="item">5</view>  

    </view>  

    <view class="subTitle">column-reverse</view>  

    <view class="column_reverse">  

        <view class="item">1</view>

        <view class="item">2</view>

        <view class="item">3</view>

        <view class="item">4</view>

        <view class="item">5</view>  

    </view>  

</view>  

    说明：定义页面结构，展示四种 flex-direction 排列方式的效果。使用 <view> 标签创建容器和子元素。每个子容器（row、row_reverse、column、column_reverse）分别应用不同的 flex-direction 值。

    container.wxss

.w{

    padding:20rpx;  

}

.title{

    font-size:40rpx;  

    font-weight:bold;  

    margin-bottom:10rpx;  

}

.subTitle{

    font-size:32rpx;  

    margin-bottom:10rpx;  

}

.row,.row_reverse,.column,.column_reverse{

    width:100%;  

    height:auto;  

    border:2rpx solid #ccc;  

    margin-bottom:10rpx;  

    display: flex;  

}

.row{

    flex-direction:row;  

}

.row_reverse{

    flex-direction:row-reverse;  

}

.column{

    flex-direction:column;  

}

.column_reverse{

    flex-direction: column-reverse;  

}

.item{

    width:100rpx;  

    height:100rpx;  

    background-color:pink;  

    border:2rpx solid red;  

}

    说明：定义页面样式，控制布局和视觉效果。使用 display: flex 启用 Flex 布局。通过 flex-direction 设置子元素的排列方向。子元素（.item）统一设置为固定宽高和背景色。

flex-wrap

示例介绍

    该示例是一个微信小程序页面，用于演示 Flex 布局中 flex-wrap 属性的三种排列方式（nowrap、wrap、wrap-reverse）。通过不同的 flex-wrap 值，控制子元素在容器中的换行行为。

    页面效果图如下：

图片

各文件说明和示例代码

    flex-wrap 用于控制 Flex 容器中的子元素是否换行，以及换行的顺序。

    属性介绍：

值

描述

nowrap

默认值，子元素不换行，可能会溢出容器。

wrap

子元素在需要时换行，从上到下排列。

wrap-reverse

子元素在需要时换行，从下到上排列。

initial

将此属性设置为默认值（nowrap）。

inherit

从父元素继承此属性的值。

    示例代码如下：

    container.wxml

    <view class="w">    <view class="title">二、flex-wrap</view>    <view class="subTitle">nowrap</view>    <view class="row nowrap">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view> <view class="item">6</view><view class="item">7</view><view class="item">8</view><view class="item">9</view><view class="item">10</view>    </view>    <view class="subTitle">wrap</view>    <view class="row wrap">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view> <view class="item">6</view><view class="item">7</view><view class="item">8</view><view class="item">9</view><view class="item">10</view>    </view>    <view class="subTitle">wrap-reverse</view>    <view class="row wrap_reverse">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view> <view class="item">6</view><view class="item">7</view><view class="item">8</view><view class="item">9</view><view class="item">10</view>    </view>  </view> 

        说明：展示 flex-wrap 的三种排列方式（nowrap、wrap、wrap-reverse）。每个子容器（nowrap、wrap、wrap-reverse）分别应用不同的 flex-wrap 值。

        container.wxss

      .nowrap{    flex-wrap: nowrap;  }  .wrap{    flex-wrap:wrap;  }  .wrap_reverse{    flex-wrap:wrap-reverse;  }

          说明：定义 flex-wrap 的样式，控制子元素的换行行为。

      flex-flow

          flex-flow 是 flex-direction 和 flex-wrap 两个属性的简写形式，用于同时定义主轴方向和换行行为。

          语法格式如下：

      flex-flow:flex-direction flex-wrap;  

          示例代码如下：

          container.wxml

        <view class="w">    <view class="title">三、flex-flow</view>    <view class="flex_flow">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view> <view class="item">6</view><view class="item">7</view><view class="item">8</view><view class="item">9</view><view class="item">10</view>    </view>  </view> 

            说明：展示 flex-flow 的使用效果。使用 <view> 标签创建容器和子元素。

            container.wxss

          .row,.row_reverse,.column,.column_reverse,.flex_flow{    width:100%;    height:auto;    border:2rpx solid #ccc;    margin-bottom:10rpx;    display: flex;  }  .flex_flow{    flex-flow: row-reverse wrap;  }

              说明：定义 flex-flow 的样式，控制子元素的排列方向和换行行为。flex-flow: row-reverse wrap：子元素从右到左排列，并在需要时换行。

              运行结果，截图如下：

          图片

          justify-content

              justify-content 用于定义 Flex 容器中子元素在主轴上的对齐方式。

              属性介绍：

          值

          描述

          flex-start

          默认值，子元素左对齐。

          flex-end

          子元素右对齐。

          center

          子元素居中对齐。

          space-between

          子元素两端对齐，项目之间的间隔是相等的。

          space-around

          子元素两侧的间隔相等。

          initial

          将此属性设置为默认值（flex-start）。

          inherit

          从父元素继承属性的值

              示例代码如下：

              container.wxml

            <view class="w">    <view class="title">四、justify-content</view>    <view class="subTitle">flex-start</view>    <view class="flex flex_start">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view>    </view>    <view class="subTitle">flex-end</view>    <view class="flex flex_end">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view>    </view>    <view class="subTitle">center</view>    <view class="flex center">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view>    </view>    <view class="subTitle">space-between</view>    <view class="flex space_between">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view>    </view>    <view class="subTitle">space-around</view>    <view class="flex space_around">      <view class="item">1</view><view class="item">2</view><view class="item">3</view><view class="item">4</view><view class="item">5</view>    </view>  </view>  

                说明：展示 justify-content 的五种对齐方式。使用 <view> 标签创建容器和子元素。每个子容器（flex_start、flex_end、center、space_between、space_around）分别应用不同的 justify-content 值。

                container.wxss

              .row,.row_reverse,.column,.column_reverse,.flex_flow,.flex{    width:100%;    height:auto;    border:2rpx solid #ccc;    margin-bottom:10rpx;    display: flex;  }  .flex{    flex-flow:row wrap;  }  .flex_start{    justify-content: flex-start;  }  .flex_end{    justify-content: flex-end;  }  .center{    justify-content: center;  }  .space_between{    justify-content:space-between;  }  .space_around{    justify-content:space-around;  } 

                  说明：定义 justify-content 的样式，控制子元素在主轴上的对齐方式。

                  运行结果，截图如下：

              图片

              align-items

                  align-items用于定义 Flex 容器中子元素在侧轴上的对齐方式。

                  属性介绍：

              值

              描述

              stretch

              默认值，子元素将被拉伸以填满容器高度。

              center

              子元素在容器中央对齐。

              flex-start

              子元素在容器顶部对齐。

              flex-end

              子元素在容器底部对齐。

              baseline

              子元素与容器的基线对齐。

              initial

              设置为属性的默认值。

              inherit

              从父元素继承属性的值。

                  示例代码如下：

                  container.wxml

                <view class="w">    <view class="title">五、align-items</view>    <view class="subTitle">flex-start</view>    <view class="align_item item_flex_start">      <view class="item_box fz12">一</view><view class="item_box fz16">二</view><view class="item_box fz14">三</view><view class="item_box fz14">四</view><view class="item_box fz16">五</view>    </view>    <view class="subTitle">flex-end</view>    <view class="align_item item_flex_end">      <view class="item_box fz12">一</view><view class="item_box fz16">二</view><view class="item_box fz14">三</view><view class="item_box fz14">四</view><view class="item_box fz16">五</view>    </view>    <view class="subTitle">center</view>    <view class="align_item item_center">      <view class="item_box fz12">一</view><view class="item_box fz16">二</view><view class="item_box fz14">三</view><view class="item_box fz14">四</view><view class="item_box fz16">五</view>    </view>    <view class="subTitle">stretch</view>    <view class="align_item item_stretch">      <view class="item_box fz12">一</view><view class="item_box fz16">二</view><view class="item_box fz14">三</view><view class="item_box fz14">四</view><view class="item_box fz16">五</view>    </view>    <view class="subTitle">baseline</view>    <view class="align_item item_baseline">      <view class="item_box fz12">一</view><view class="item_box fz16">二</view><view class="item_box fz14">三</view><view class="item_box fz14">四</view><view class="item_box fz16">五</view>    </view>  </view> 

                    container.wxss

                  .align_item{    width:100%;    height:150rpx;    border:2rpx solid #ccc;    margin-bottom:10rpx;    display: flex;    flex-flow:row wrap;    justify-content: center;  }  .item_flex_start{    align-items: flex-start;  }  .item_flex_end{    align-items: flex-end;  }  .item_center{    align-items: center;  }  .item_stretch{    align-items: stretch;  }  .item_baseline{    align-items:baseline;  }  .item_box{    width:100rpx;    min-height:100rpx;    background-color:pink;    border:2rpx solid red;  }  .fz12{    font-size:24rpx;  }  .fz14{    font-size:28rpx;  }  .fz16{    font-size:32rpx;  } 

                      分析：通过flex 布局展示了 align-items 属性的不同取值对子元素在交叉轴上对齐方式的影响。通过不同的样式类，可以清晰地看到 flex-start、flex-end、center、stretch 和 baseline 的效果。

                      运行结果，截图如下：

                  图片

                  align-content

                      align-content 用于定义多行 Flex 容器中子元素在侧轴上的对齐方式（仅适用于多行布局）。

                      属性介绍：

                  值

                  描述

                  stretch

                  默认值，将项目拉伸以占据剩余空间。

                  center

                  项目在容器内居中排列。

                  flex-start

                  项目在容器的顶部排列。

                  flex-end

                  项目在容器的底部排列。

                  space-between

                  子元素均匀分布，第一行在顶部，最后一行在底部。

                  space-around

                  子元素均匀分布，每行间距相等。

                  initial

                  设置为属性的默认值。

                  inherit

                  从父元素继承该属性的值。

                  软件工匠
                  关注
                  评论
                  添加红包

                  请填写红包祝福语或标题

                  个

                  红包个数最小为10个

                  元

                  红包金额最低5元

                  当前余额3.43元 前往充值 >
                  需支付：10.00元
                  成就一亿技术人!
                  领取后你会自动成为博主和红包主的粉丝 规则
                  hope_wisdom
                  发出的红包
                  实付元
                  使用余额支付
                  点击重新获取
                  扫码支付
                  钱包余额 0

                  抵扣说明：

                  1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
                  2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

                  余额充值