1. Toy模板网首页
  2. > Toy博客

微信小程序——flex布局

10月前 作者：日月为卿 分类：Toy博客 阅读(55) 违法举报

这篇具有很好参考价值的文章主要介绍了微信小程序——flex布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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(日课表功能)

微信小程序——flex布局

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

微信小程序——flex布局

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

  • 首先需要确定最外层的大格子为父容器，给予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>

最后的效果图：

（加了色块以后的）

微信小程序——flex布局

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

（去除掉色块之后）

微信小程序——flex布局

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

总结：

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

到了这里，关于微信小程序——flex布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）

    微信小程序进阶——Flex弹性布局&轮播图&会议OA项目（首页）

    目录 一、Flex弹性布局 1.1 什么是Flex弹性布局 1.1.1 详解 1.1.2 图解  1.1.3 代码演示效果 1.2 Flex弹性布局的核心概念 1.3 Flex 弹性布局的常见属性 1.4 Flex弹性布局部分属性详解 1.4.1 flex-direction属性 1.4.2 flex-wrap属性 1.4.3 flex-flow属性 1.4.4 justify-content属性 1.4.5 align-items属性 1.4.6 

    2024年02月05日
    浏览(43)
  • 微信小程序入门与实战之rpx响应式单位与flex布局

    微信小程序入门与实战之rpx响应式单位与flex布局

    小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： app.json必须有一个pages数组： 一个小程序页面由四个文件组成，分别是： 注意：为了方便开发者减少配置项，描述页面的四个文件必须具有

    2024年02月03日
    浏览(39)
  • 使用flex弹性布局来为微信小程序写自适应页面

    使用flex弹性布局来为微信小程序写自适应页面

    我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖 display 属性 + position属性 + float属性，但是浮动布局有一些致命的小问题，比如垂直居中比较费劲，比如著名的float坍塌问题，另外有些极端情况下，还得使用模型+clear

    2024年02月09日
    浏览(49)
  • 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效

    页面使用了scroll-view，对应的wxss使用了flex布局，也就是scroll-view设置了display:flex； 会发现flex不生效，并且这个时候微信小程序会警告[pages/XXX/XXX] 设置 enable-flex 属性以使 flexbox 布局生效。   代码如下： 添加上这个属性之后，就可以了。

    2024年02月12日
    浏览(48)

  • 微信小程序23__flex布局 相关的3种居中: 水平居中_垂直居中_水平垂直居中

    类似这样写法 display:  flex; flex-direction:  column;                //垂直布局 align-items:  center;                    // 水平居中     justify-content:  space-around; //垂直方向分散布局 类似这样写法 display:  flex; flex-direction: row;          //水平布局       align-items: center;    

    2024年02月03日
    浏览(46)
  • 【微信小程序】6天精准入门（第3天：小程序flex布局、轮播图组件及mock运用以及综合案例）附源码

    【微信小程序】6天精准入门（第3天：小程序flex布局、轮播图组件及mock运用以及综合案例）附源码

    布局的传统解决方案，基于[盒状模型]，依赖display属性 + position属性 + float属性 Flex是 Flexible Box 的缩写，意为” 弹性布局 ”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 display: ‘flex’         容器默认存在两根轴： 水平的主轴（main axi

    2024年02月08日
    浏览(49)

  • uni-app/微信小程序：scroll-view纵向滚动高度自适应flex布局填充剩余高度

    uni-app文档：https://uniapp.dcloud.net.cn/component/scroll-view.html 使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height 微信文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height 所以，给scroll-view设置

    2024年02月09日
    浏览(66)
  • 【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

    【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

    一. 新建一个项目 二. 添加页面和删除页面 （1） 添加页面 ——app.json/pages中添加路径，并删除原有的路径 （2）删除页面——路径已经被删除，现在删除文件 三.设置导航栏效果 ——app.json/windows中更改 效果图： 代码如下： 四.设置tabBar效果 ——在app.json中创建tabBar（与win

    2024年04月16日
    浏览(47)
  • 前端知识——css 之 flex 布局

    前端知识——css 之 flex 布局

    🔥🔥🔥更多知识，欢迎访问我的个人博客：Nan-ying’s Blog 长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决： 比如在父内容里面垂直居

    2024年02月07日
    浏览(54)

  • Web数据库基本知识,SQL基本语法

    当我们谈论整个技术栈时，实际上涉及了一系列步骤，而在Web开发中，这些步骤可以被具体化为以下几个阶段： DBMS-GUI-翻译器-查询语言 在web中具体如下: postgreSQL-Hasura-Apollo+ts-GraphQL 具体解释 DBMS（数据库管理系统）： 作用： 数据库管理系统允许我们直接使用SQL语言来操作数

    2024年02月03日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包