微信小程序——flex布局

爱被打了一巴掌 2024-04-24 14:42 7阅读 0赞

## flex布局的基本知识 ##

flex布局作用于父容器之上，用于控制其子盒子的位置和排列的方式。

flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

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

.box{
      display: flex;
    }

行内元素也可以使用Flex布局。

.box{
      display: inline-flex;
    }

Webkit内核的浏览器，必须加上-webkit前缀。

.box{
      display: -webkit-flex; 
      display: flex;
    }

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

## flex的基本属性 ##

##### flex在使用时存在6个属性： #####

##### flex-direction #####

*  row（默认值）：主轴为水平方向，起点在左端。

*  row-reverse：主轴为水平方向，起点在右端。

*  column：主轴为垂直方向，起点在上沿。

*  column-reverse：主轴为垂直方向，起点在下沿。

##### flex-wrap #####

*  nowrap（默认）：不换行。

*  wrap：换行，第一行在上方。

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

##### flex-flow #####

**flex-flow** 属性是 flex-direction 和 flex-wrap 的简写。（可直接使用flex-direction和flex-wrap里面的属性）

element{flex-flow: column-reverse wrap;}

##### justify-content #####

**justify-content**属性定义了项目在主轴上的对齐方式。

*  flex-start（默认值）：左对齐

*  flex-end：右对齐

*  center： 居中

*  space-between：两端对齐，项目之间的间隔都相等。

*  space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

##### align-items #####

**align-items**属性定义项目在交叉轴上如何对齐。

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

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

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

*  baseline: 项目的第一行文字的基线对齐。

*  stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

##### align-content #####

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

该属性可能取6个值。

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

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

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

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

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

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

## 案列介绍 ##

### 小小的demo(日课表功能) ###

![96f1a549c3714f9395a597a396f04365.png][]

在一款校园类软件新引进日课表功能，其中的单个盒子就可使用flex布局

![832d549225db459c9b343e6a0e43f898.png][]

具体的盒子分布方式可如上划分（其中建筑的方格可最后考虑，因为此图片位于文字的下方，需要用其他定位方式来进行定位，层级调低一个即可）

*  首先需要确定最外层的大格子为父容器，给予flex布局的标志（display:flex）。

*  在框里面的方格时要找准下一个较低的父容器的盒子的划分（在较低的父容器其中也要加入display:flex）。

*  对父容器中的元素做规划，先计划好需要使用哪些属性，随后在按照优先级（父容器的优先级就是看那个谁是最大的父容器然后依次递减）进行添加

这里介绍一个很有用的办法呀！用**色块**的方法可以很有效的知道自己的布局情况呀！

以下会使用**色块**的布局方法演示一下效果

**代码部分：**

wxss部分:

.dailyScheduleIndexList {
      height: 134rpx;
      margin-left: 16rpx;
      margin-right: 16rpx;
      background-color: khaki;
      display: flex;
      justify-content: space-around;
    }
    
    .dailyScheduleTimeBox {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0rpx;
      background-color: palegreen;
      height: 134rpx;
      width: 58rpx;
    }
    
    .dailyScheduleTime {
      width: 58rpx;
      height: 104rpx;
      margin-top: 16rpx;
      margin-bottom: 16rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background-color: rgb(0, 65, 139);
    }
    
    .dailyScheduleTime1 {
      width: 58rpx;
      height: 40rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 23rpx;
      line-height: 40rpx;
      color: rgba(41, 41, 69, 0.6);
    }
    
    .dailyScheduleTimeLine {
      width: 22rpx;
      height: 0rpx;
      background: rgba(42, 69, 41, 0.6);
      border: 2rpx solid rgba(41, 41, 69, 0.6);
      transform: rotate(90deg);
    }
    
    .dailyScheduleBox {
      width: 626rpx;
      height: 134rpx;
      background: #9a9be3;
      border-radius: 8rpx;
      display: flex;
      flex-direction: row;
    }
    
    .dailySchedule {
      width: 70%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-around;
      padding-left: 20rpx;
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      background-color: rgb(128, 240, 234);
    }
    
    .dailyScheduleClassBox {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 16rpx;
      height: 44rpx;
      width: 90%;
      background-color: rgb(245, 21, 21);
    }
    
    
    .dailyScheduleClass {
      height: 44rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 32rpx;
      line-height: 44rpx;
      color: #FFFFFF;
      overflow: hidden;
    }
    
    .dailyScheduleAdBox {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8rpx;
      width: 90%;
      height: 34rpx;
      background-color: rgb(4, 51, 53);
    }
    
    
    .dailyScheduleAdIcon {
      width: 18rpx;
      height: 18rpx;
      margin-top: -17rpx;
      margin-right: 4rpx;
    }
    
    .dailyScheduleAdIcon image {
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTMiIHZpZXdCb3g9IjAgMCAxNCAxMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTU2NjIgMC4wNzI2NjI0QzcuMDEwNDkgMC4wNzI2NjI0IDcuMDYzODQgMC4wODMyNzM5IDcuMTEzNjIgMC4xMDM4OTFDNy4xNjMzOSAwLjEyNDUwOSA3LjIwODYyIDAuMTU0NzI4IDcuMjQ2NzEgMC4xOTI4MjRDNy4yODQ4MSAwLjIzMDkxOSA3LjMxNTAzIDAuMjc2MTQ2IDcuMzM1NjUgMC4zMjU5MkM3LjM1NjI2IDAuMzc1Njk1IDcuMzY2ODcgMC40MjkwNDMgNy4zNjY4NyAwLjQ4MjkxOVYxLjY4MDg3QzcuMzk2ODIgMS42OTQ4MiA3LjQyNTk1IDEuNzEwODIgNy40NTQyNiAxLjcyODQ2TDcuNTE2NjIgMS43NzA3MUwxMC42NTM4IDQuMDg3ODRDMTAuNzQwOSA0LjE1MjA3IDEwLjgwNjQgNC4yNDExMyAxMC44NDE5IDQuMzQzMzFDMTAuODc3MyA0LjQ0NTQ5IDEwLjg4MSA0LjU1NiAxMC44NTI1IDQuNjYwMzJDMTAuODIzOSA0Ljc2NDY0IDEwLjc2NDUgNC44NTc4OCAxMC42ODE5IDQuOTI3NzhDMTAuNTk5NCA0Ljk5NzY4IDEwLjQ5NzYgNS4wNDA5NiAxMC4zOTAxIDUuMDUxOTRMMTAuMzM1NSA1LjA1NDQxSDEwLjE2MTVMMTAuMTYxMSA1LjczNjY2SDEzLjEyODFDMTMuMjI4NyA1LjczNjY5IDEzLjMyNTcgNS43NzM2NCAxMy40MDA4IDUuODQwNDlDMTMuNDc1OSA1LjkwNzM1IDEzLjUyMzggNS45OTk0NiAxMy41MzU1IDYuMDk5MzNMMTMuNTM4NCA2LjE0NjkyQzEzLjUzODMgNi4yNDc0IDEzLjUwMTUgNi4zNDQzOSAxMy40MzQ3IDYuNDE5NDhDMTMuMzY3OSA2LjQ5NDU3IDEzLjI3NTkgNi41NDI1NSAxMy4xNzYxIDYuNTU0M0wxMy4xMjgxIDYuNTU3MThIMTIuNzg0N1YxMS45MjQxQzEyLjc4NDcgMTEuOTc4IDEyLjc3NDEgMTIuMDMxNCAxMi43NTM1IDEyLjA4MTFDMTIuNzMyOSAxMi4xMzA5IDEyLjcwMjcgMTIuMTc2MSAxMi42NjQ2IDEyLjIxNDJDMTIuNjI2NSAxMi4yNTIzIDEyLjU4MTIgMTIuMjgyNiAxMi41MzE1IDEyLjMwMzJDMTIuNDgxNyAxMi4zMjM4IDEyLjQyODMgMTIuMzM0NCAxMi4zNzQ1IDEyLjMzNDRIMS42MjA0MUMxLjUxOTg2IDEyLjMzNDQgMS40MjI4MyAxMi4yOTc0IDEuMzQ3NzMgMTIuMjMwNkMxLjI3MjYyIDEyLjE2MzcgMS4yMjQ2OSAxMi4wNzE2IDEuMjEzMDMgMTEuOTcxN0wxLjIxMDE2IDExLjkyNDFMMS4yMDk3NSA2LjU1NzE4SDAuODIwNDEzQzAuNzE5OTI3IDYuNTU3MTYgMC42MjI5NDEgNi41MjAyNyAwLjU0Nzg1IDYuNDUzNUMwLjQ3Mjc1OSA2LjM4NjcyIDAuNDI0Nzg1IDYuMjk0NzEgMC40MTMwMjggNi4xOTQ5MkwwLjQxMDE1NiA2LjE0NjkyQzAuNDEwMTcgNi4wNDY0MyAwLjQ0NzA2MSA1Ljk0OTQ1IDAuNTEzODM0IDUuODc0MzZDMC41ODA2MDcgNS43OTkyNiAwLjY3MjYxNyA1Ljc1MTI5IDAuNzcyNDEzIDUuNzM5NTNMMC44MjA0MTMgNS43MzY2NkgzLjg4NzQ5VjUuMDU0NDFIMy43MDQ1MkMzLjU5NzM4IDUuMDU0MzggMy40OTI3MSA1LjAyMjIzIDMuNDA0MDMgNC45NjIxMkMzLjMxNTM1IDQuOTAyMDEgMy4yNDY3MiA0LjgxNjY5IDMuMjA3MDIgNC43MTcxOEMzLjE2NzMxIDQuNjE3NjcgMy4xNTgzNSA0LjUwODU1IDMuMTgxMjkgNC40MDM5QzMuMjA0MjIgNC4yOTkyNSAzLjI1ODAxIDQuMjAzODggMy4zMzU2OSA0LjEzMDFMMy4zODA0MSA0LjA5MjM1TDYuNDIyMDUgMS43Nzg1MUM2LjQ2MTI4IDEuNzQ4NjcgNi41MDI4NSAxLjcyMjA2IDYuNTQ2MzYgMS42OTg5MlYwLjg5MzE3NUg0LjkyMjk4QzQuODE0MTcgMC44OTMxNzUgNC43MDk4MiAwLjg0OTk1MiA0LjYzMjg4IDAuNzczMDE0QzQuNTU1OTQgMC42OTYwNzYgNC41MTI3MiAwLjU5MTcyNiA0LjUxMjcyIDAuNDgyOTE5QzQuNTEyNzIgMC4zNzQxMTIgNC41NTU5NCAwLjI2OTc2MiA0LjYzMjg4IDAuMTkyODI0QzQuNzA5ODIgMC4xMTU4ODYgNC44MTQxNyAwLjA3MjY2MjQgNC45MjI5OCAwLjA3MjY2MjRINi45NTY2MlpNMTEuOTY0MiA2LjU1NzE4SDEwLjE2MTFWMTEuNTEzNUgxMS45NjQyVjYuNTU3NTlWNi41NTcxOFpNMy44ODc0OSA2LjU1NzE4SDIuMDI5ODVMMi4wMzAyNiAxMS41MTM5TDMuODg3NDkgMTEuNTEzNVY2LjU1NzE4Wk02LjkzOTggMi40MTkzM0w2LjkxODg3IDIuNDMxNjRMNC40ODc2OSA0LjI4MDY2QzQuNTQ2NCA0LjMxMTI0IDQuNTk2ODQgNC4zNTU1NiA0LjYzNDcgNC40MDk4NkM0LjY3MjU3IDQuNDY0MTUgNC42OTY3MyA0LjUyNjggNC43MDUxMyA0LjU5MjQ2TDQuNzA4IDQuNjQ0MTVWMTEuNTEzOUw1LjUzODM2IDExLjUxMzVWOS42NTAxTDUuNTQxNjQgOS41NzAxQzUuNTkwODcgOC44MjY3MSA2LjIxODU3IDguMjQ4NjYgNi45NzQyNiA4LjI0ODY2QzcuNzY1MjMgOC4yNDg2NiA4LjQxMDE2IDguODgwNDYgOC40MTAxNiA5LjY2MzY0VjExLjUxMzVIOS4zNDEwM1Y0LjY0NDU2QzkuMzQxMDMgNC41MSA5LjQwNTg1IDQuMzkwMiA5LjUwNjM2IDQuMzE1NTNMOS41NDU3NSA0LjI4OTY5TDcuMDI5MjMgMi40MzEyM0M3LjAxNjU1IDIuNDIxODIgNy4wMDE2NyAyLjQxNTgzIDYuOTg2MDEgMi40MTM4MkM2Ljk3MDM2IDIuNDExODEgNi45NTQ0NCAyLjQxMzg1IDYuOTM5OCAyLjQxOTc0VjIuNDE5MzNaTTYuOTc0MjYgOS4wNjk1OEM2LjY0NzY5IDkuMDY5NTggNi4zODA2MiA5LjMxNTc0IDYuMzYwOTMgOS42MTExMkw2LjM1ODg3IDkuNjY0MDVWMTEuNTE0M0g3LjU4OTY0VjkuNjY0MDVDNy41ODk2NCA5LjMzNzQ4IDcuMzE2IDkuMDY5MTcgNi45NzQyNiA5LjA2OTE3VjkuMDY5NThaTTYuMTUzNzUgNi4yMzk2NEg3Ljc5NDc3QzcuODk5MzQgNi4yMzk3NSA3Ljk5OTkxIDYuMjc5NzkgOC4wNzU5NSA2LjM1MTU3QzguMTUxOTggNi40MjMzNiA4LjE5Nzc0IDYuNTIxNDYgOC4yMDM4NyA2LjYyNTg1QzguMjEgNi43MzAyNCA4LjE3NjAzIDYuODMzMDIgOC4xMDg5MiA2LjkxMzIxQzguMDQxODEgNi45OTMzOSA3Ljk0NjYxIDcuMDQ0OTMgNy44NDI3NyA3LjA1NzI4TDcuNzk0NzcgNy4wNTkzM0g2LjE1Mzc1QzYuMDQ4NTQgNy4wNjAxNiA1Ljk0NzA0IDcuMDIwNTQgNS44NzAyMSA2Ljk0ODY3QzUuNzkzMzkgNi44NzY3OSA1Ljc0NzExIDYuNzc4MTQgNS43NDA5NSA2LjY3MzEyQzUuNzM0NzkgNi41NjgwOSA1Ljc2OTIxIDYuNDY0NzEgNS44MzcxIDYuMzg0MzRDNS45MDQ5OSA2LjMwMzk3IDYuMDAxMTcgNi4yNTI3NiA2LjEwNTc1IDYuMjQxMjhMNi4xNTM3NSA2LjIzODgySDcuNzk0NzdINi4xNTM3NVY2LjIzOTY0Wk03Ljc5NDc3IDQuNDgxMjhDNy44OTkzNCA0LjQ4MTM5IDcuOTk5OTEgNC41MjE0MyA4LjA3NTk1IDQuNTkzMjJDOC4xNTE5OCA0LjY2NSA4LjE5Nzc0IDQuNzYzMSA4LjIwMzg3IDQuODY3NDlDOC4yMSA0Ljk3MTg4IDguMTc2MDMgNS4wNzQ2NiA4LjEwODkyIDUuMTU0ODVDOC4wNDE4MSA1LjIzNTA0IDcuOTQ2NjEgNS4yODY1NyA3Ljg0Mjc3IDUuMjk4OTJMNy43OTQ3NyA1LjMwMTc5SDYuMTUzNzVDNi4wNDkxOCA1LjMwMTY3IDUuOTQ4NiA1LjI2MTYzIDUuODcyNTcgNS4xODk4NUM1Ljc5NjUzIDUuMTE4MDcgNS43NTA3OCA1LjAxOTk2IDUuNzQ0NjUgNC45MTU1OEM1LjczODUyIDQuODExMTkgNS43NzI0OCA0LjcwODQgNS44Mzk2IDQuNjI4MjJDNS45MDY3MSA0LjU0ODAzIDYuMDAxOTEgNC40OTY1IDYuMTA1NzUgNC40ODQxNUw2LjE1Mzc1IDQuNDgxMjhINy43OTQ3N1oiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=");
      width: 28rpx;
      height: 28rpx;
    }
    
    .dailyScheduleAd {
      width: 170rpx;
      height: 34rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #FFFFFF;
    }
    
    .dailyScheduleKcBox {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding-top: 28rpx;
      padding-bottom: 20rpx;
      padding-right: 20rpx;
      background-color: rgb(80, 106, 255);
    }
    
    .dailyScheduleKc {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
    
    .whichKc {
      height: 34rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 24rpx;
      text-align: right;
      color: #FFFFFF;
    }
    
    .whichTc {
      height: 34rpx;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      text-align: right;
      color: #FFFFFF;
      margin-top: 18rpx;
    }
    
    
    .dailyScheduleBd {
      width: 184rpx;
      height: 102rpx;
      position: absolute;
      overflow: hidden;
      right: 0;
      top: 34rpx;
      z-index: 0;
    }
    
    .ground {
      width: 184rpx;
      height: 102rpx;
      background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTIiIHZpZXdCb3g9IjAgMCA5MiA1MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTM1Ljg2NjkgMTkuNTUyN1YyMC4wOTQ0SDU2LjI5NlYxOS41NTI3SDM1Ljg2NjlaTTM1Ljg2NjkgMjEuNzIzOFYyNS4yNjMzSDU2LjI5NlYyMS43MjM4SDM1Ljg2NjlaTTM1Ljg2NjkgMjYuODkzM1YyNy40MzVINTYuMjk2VjI2Ljg5MzNIMzUuODY2OVpNMzUuODY2OSAyOS4wNjQ1VjUxLjY1ODdIMzYuNTUxOVY0MS41NDE5SDU1LjQ2NjRWNTEuNjU4N0g1Ni4yOTZWMjkuMDY0NUgzNS44NjY5Wk0zNS44NjY5IDI3Ljk3OTJWMjguNTIwOUg1Ni4yOTZWMjcuOTc5MkgzNS44NjY5Wk0zNS44NjY5IDI1LjgwNzVWMjYuMzQ5MUg1Ni4yOTZWMjUuODA3NUgzNS44NjY5Wk0zNS44NjY5IDIwLjYzOFYyMS4xNzk3SDU2LjI5NlYyMC42MzhIMzUuODY2OVpNMzUuODY2OSAxOC40Njc1VjE5LjAwOTJINTYuMjk2VjE4LjQ2NzVIMzUuODY2OVpNNzAuNjk5NSAwLjUxMzYxMUg2OS40MjZMNjUuMDc0NiAyLjcyMTEzVjMuNDQ0Mkg2My42OTUzVjIuNzIxMTNMNTkuNTU2MSAxLjEyMTgyTDU4LjA3MDQgMS4xOTc3N0w1Ni42OTA0IDIuNzIxMTNWOS40OTM2OUM1Ni42OTA0IDkuNDkzNjkgNDcuOTM4MiA4LjQ2NzQ1IDQ2LjA1MzYgOC42MTkzNEM0NC4xNjc4IDguNDY3NDUgMzUuNDE2MSA5LjQ5MzY5IDM1LjQxNjEgOS40OTM2OVYyLjcyMTEzTDM0LjAzNTYgMS4xOTc3N0wzMi41NDk5IDEuMTIxODJMMjguNDEyIDIuNzIxMTNWMy40NDQySDI3LjAzMTRWMi43MjExM0wyMi42ODA2IDAuNTEzNjExSDIxLjQwNzFMMjAuMjQwMSAxLjgwNzI0VjkuMTUyMjRMMjAuMjMxOSA5LjE1Mjg2VjUxLjY2TDIwLjI0MDEgNTEuNjU5M0gzNS40MTU1VjE0LjI4NkgzNS44NjYzVjE3LjkyMzNINTYuMjk1NFYxNC4yODZINTYuNzQ2OFY1MS42NTkzSDcxLjg2NjVWMS44MDcyNEw3MC42OTk1IDAuNTEzNjExWk01Ni43NDc0IDEzLjI2MjJDNTYuNzQ3NCAxMy4yNjIyIDQ3LjE5NTYgMTEuMzU5MSAzNS40MTU1IDEzLjI2MjJWMTIuNTAxNUMzNS40MTU1IDEyLjUwMTUgNDQuNjQ4IDEwLjk3ODggNTYuNzQ3NCAxMi41MDE1VjEzLjI2MjJaTTAuMDYzOTY0OCAxMS4yODM4VjUxLjY1OTNIMTkuMzY4NVY5LjI0Mzg4TDAuMDYzOTY0OCAxMS4yODM4Wk03Mi43MzEyIDkuMjQzODhWNTEuNjU5M0g5Mi4wNDM5VjExLjI4MzhMNzIuNzMxMiA5LjI0Mzg4WiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8L3N2Zz4K");
    }

wxml部分：

<view class="dailyScheduleIndexList">
        <view class="dailyScheduleTimeBox">
          <view class="dailyScheduleTime">
            <view class="dailyScheduleTime1">10:30</view>
            <view class="dailyScheduleTimeLine"></view>
            <view class="dailyScheduleTime1">12:00</view>
          </view>
        </view>
        <view class="dailyScheduleBox">
            <view class="dailySchedule">
              <view class="dailyScheduleClassBox">
                <view class="dailyScheduleClass">大学英语4</view>
              </view>
              <view class="dailyScheduleAdBox">
                <view class="dailyScheduleAdIcon">
                  <image></image>
                </view>
                <view class="dailyScheduleAd">教学楼</view>
              </view>
            </view>
            <view class="dailyScheduleKcBox">
              <view class="dailyScheduleKc">
                <view class="whichKc">第1~2节</view>
                <view class="whichTc">XXX老师</view>
              </view>
            </view>
            <view class="dailyScheduleBd">
              <image class="ground"></image>
            </view>
        </view>
    </view>

最后的效果图：

（加了色块以后的）

![6f706da7fb5a44d8a05169f65b5e5771.png][]

在这里可以很清楚的看到自己的页面布局也没有出现问题（记得要颜色差别比较大的哦），可以看出来自己的flex布局也没有存在任何问题哦

（去除掉色块之后）

![1310aa1efe9d439e86e25a3298dc9fcd.png][]

这就是一个完完整整的flex布局出来的产物啦，各位瞅瞅效果如何呢？（个人感觉还是很不错的，你们觉得呢？）

## 总结： ##

在这个小小的demo中可以收获很多的，对于我来说让我自己对flex的布局方式有了更加清晰的认识了，在此**色块**的布局方法的帮助下，可以很快的看出自己flex布局出现的问题，这里十分推荐大家可以尝试一下，那么这次对于flex布局的方式分享就到这里了，各位咱们下次再见呀!（ps：最后感谢一下帮助我解决这个问题的小师傅呀，不然还不知道要错到什么时候呢）

[96f1a549c3714f9395a597a396f04365.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/1f33100fd88548c7b49bd8cb7a1552cb.png
[832d549225db459c9b343e6a0e43f898.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/74ebc8dcc7574141bfd8aeda4eb0e78d.png
[6f706da7fb5a44d8a05169f65b5e5771.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/9be699b5ec524ea1b3d145c01cb42fa5.png
[1310aa1efe9d439e86e25a3298dc9fcd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/24/2b414638dc5d40d7a5c7623903191318.png