微信小程序——flex布局

编程语言 2023-06-05 21:41:24 阅读次数: 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(日课表功能)

在一款校园类软件新引进日课表功能，其中的单个盒子就可使用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布局出来的产物啦，各位瞅瞅效果如何呢？（个人感觉还是很不错的，你们觉得呢？）

总结：

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

猜你喜欢

转载自blog.csdn.net/wct040923/article/details/129694693
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022