flex布局

最新推荐文章于 2024-03-05 10:43:13 发布

卖火柴的小男孩2

最新推荐文章于 2024-03-05 10:43:13 发布

阅读量1.4k

点赞数 2

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_42839746/article/details/128346804

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

/* flex布局的父亲的儿子，共同的样式 */
.son {
  background-color: #33ff33;
  width: 120rpx;
  height: 100rpx;
  border: 1px solid #030303;  /*边框*/
}

/* align-items属性定义儿子在交叉轴上对齐方式，这个不能给儿子设置高度，才能体现效果 */
.son-1 {
  background-color: #33ff33;
  width: 120rpx;
  border: 1px solid #030303;  /*边框*/
}


/* 给父亲盒子设置flex布局，再用 flex-direction 在父亲盒子里设置排列方向，则父亲盒子里面的儿子就会按照指定方向排列 */

上面的代码是用来显示盒子的大小

1、flex 横向排列

<view>简单的flex排列</view>
<view>1、flex 横向排列</view>
<view class="father_row">   <!-- flex横向排列值 row -->
  <view class="son"> 横向1 </view>
  <view class="son"> 横向2 </view>
  <view class="son"> 横向3 </view>
</view>

/* 1、flex 横向排列 */
.father_row {
  display: flex;
  /* flex-direction: row;    即使不添加该属性时，默认也是横向（row）排列*/
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

2、flex 纵向排列

<view>2、flex 纵向排列</view>
<view class="father_column">  <!-- flex纵向排列值 column -->
  <view class="son"> 纵向1 </view>
  <view class="son"> 纵向2 </view>
  <view class="son"> 纵向3 </view>
</view>

/* 2、flex 纵向排列 */
.father_column {
  display: flex;
  flex-direction: column; /* 纵向排列 */
  width: 100%;
  border: 1px dotted #A1A1A1;  /*边框*/
}

3、flex 从右边到左边横向排列

<view>3、flex  从右边到左边  横向排列</view>
<view class="father_row-reverse">   <!-- flex  从右边到左边  横向排列值 row-reverse -->
  <view class="son"> 横向1 </view>
  <view class="son"> 横向2 </view>
  <view class="son"> 横向3 </view>
</view>

/* 3、flex 从右到左 横向排列 */
.father_row-reverse {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

4、flex 从下到上纵向排列

<view>4、flex  从下面到上面  纵向排列</view>
<view class="father_column-reverse">  <!-- flex  从下面到上面  纵向排列值 column-reverse -->
  <view class="son"> 纵向1 </view>
  <view class="son"> 纵向2 </view>
  <view class="son"> 纵向3 </view>
</view>

/* 4、flex 从下到上 纵向排列 */
.father_column-reverse {
  display: flex;
  flex-direction: column-reverse; /* 纵向排列 */
  width: 100%;
  border: 1px dotted #A1A1A1;  /*边框*/
}

justify-content 属性定义了父亲里面的儿子在主轴上的对齐方式

5、儿子在主轴上的对齐方式的默认排列

<view>justify-content 属性定义了 父亲里面的儿子 在主轴上的对齐方式</view>
<view style="color: red;">5、儿子在主轴上的对齐方式的默认排列</view>
<view class="father_justify-content-start">  <!-- 代码 justify-content， 排列数值flex-start  -->
  <view class="son"> 横向1 </view>
  <view class="son"> 横向2 </view>
  <view class="son"> 横向3 </view>
</view>

/* justify-content 属性定义了 父亲里面的儿子 在主轴上的对齐方式 */

/* 5、在主轴上的对齐方式的默认排列 */
.father_justify-content-start {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: flex-start;  /* 默认 */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

6、居中

<view style="color: red;">6、儿子在主轴上的对齐方式为  居中</view>
<view class="father_justify-content-center">    <!-- 代码 justify-content， 排列数值center -->
  <view class="son"> 居中1 </view>
  <view class="son"> 居中2 </view>
  <view class="son"> 居中3 </view>
</view>

/* 6、居中 */
.father_justify-content-center {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: center;  /* 儿子在主轴上的对齐方式为  居中 */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

7、儿子在主轴上的对齐方式为靠右

<view style="color: red;">7、儿子在主轴上的对齐方式为  靠右</view>
<view class="father_justify-content-flex-end">    <!-- 代码 justify-content， 排列数值flex-end -->
  <view class="son"> 靠右1 </view>
  <view class="son"> 靠右2 </view>
  <view class="son"> 靠右3 </view>
</view>

/* 7、靠右 */
.father_justify-content-flex-end {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: flex-end;  /* 儿子在主轴上的对齐方式为  靠右 */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

8、主轴上两端对齐，儿子之间的间隔都相等

<view style="color: red;">8、主轴上两端对齐，儿子之间的间隔都相等</view>
<view class="father_justify-content-space-between">    <!-- 代码 justify-content， 排列数值space-between -->
  <view class="son"> 间距1 </view>
  <view class="son"> 间距2 </view>
  <view class="son"> 间距3 </view>
</view>

/* 8、主轴上两端对齐，儿子之间的间隔都相等 */
.father_justify-content-space-between {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: space-between;  /* 主轴上两端对齐，儿子之间的间隔都相等  */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

9、每个儿子两侧的间隔相等。儿子之间的间隔比最左边和最右边的间隔大1倍。具体看模拟器

<view style="color: red;">9、每个儿子两侧的间隔相等。儿子之间的间隔比最左边和最右边的间隔大1倍。具体看模拟器</view>
<view class="father_justify-content-space-around">    <!-- 代码 justify-content， 排列数值space-around -->
  <view class="son"> 间距1 </view>
  <view class="son"> 间距2 </view>
  <view class="son"> 间距3 </view>
</view>

/* 9、每个儿子两侧的间隔相等。儿子之间的间隔比最左边和最右边的间隔大1倍。具体看模拟器 */
.father_justify-content-space-around {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: space-around;  /* 主轴上两端对齐，儿子之间的间隔都相等  */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

10、主轴上的儿子靠近中间，且儿子之间的距离相等

<view style="color: red;">10、主轴上的儿子靠近中间，且儿子之间的距离相等</view>
<view class="father_justify-content-space-evenly">    <!-- 代码 justify-content， 排列数值space-evenly -->
  <view class="son"> 间距1 </view>
  <view class="son"> 间距2 </view>
  <view class="son"> 间距3 </view>
</view>

/* 10、主轴上的儿子靠近中间，且儿子之间的距离相等*/
.father_justify-content-space-evenly {
  display: flex;
  flex-direction: row;/* 该情况下主轴在水平（行）方向上 */
  justify-content: space-evenly;  /* 主轴上两端对齐，儿子之间的间隔都相等  */
  width: 100%;
  height: 120rpx;
  border: 1px dotted #A1A1A1;  /*边框*/
}

align-items属性定义儿子在交叉轴上对齐方式

交叉轴理解：交叉轴是垂直方向还是水平方向，需要根据主轴方向，如果主轴是水平方向，那么交叉轴为垂直方向，如果主轴方向垂直方向，交叉轴就是水平方向。

以下代码的主轴都是为水平方向，则交叉轴为垂直方向

11、儿子在交叉轴上默认对齐方式

<view style="color: red;">11、儿子在交叉轴上默认对齐方式</view>
<view class="father_align-items-stretch">    <!-- 代码 align-items， 排列数值stretch -->
  <view class="son-1"> 交叉轴1 </view>
  <view class="son"> 交叉轴2 </view>
  <view class="son"> 交叉轴3 </view>
</view>

.father_align-items-stretch {
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: stretch;  /* 默认 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

12、儿子顶部与交叉轴起点对齐

<view style="color: red;">12、儿子顶部与交叉轴起点对齐</view>
<view class="father_align-items-flex-start">    <!-- 代码 align-items， 排列数值flex-start -->
  <view class="son-1"> 交叉轴1 </view>
  <view class="son"> 交叉轴2 </view>
  <view class="son"> 交叉轴3 </view>
</view>

.father_align-items-flex-start {
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: flex-start;  /* 儿子顶部与交叉轴起点对齐 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

13、儿子在交叉轴居中对齐

<view>13、儿子在交叉轴居中对齐</view>
<view class="father_align-items-center">    <!-- 代码 align-items， 排列数值flex-center -->
  <view class="son-1"> 交叉轴1 </view>
  <view class="son"> 交叉轴2 </view>
  <view class="son"> 交叉轴3 </view>
</view>

/* 13、儿子在交叉轴居中对齐 */
.father_align-items-center {
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: center;  /* 儿子在交叉轴居中对齐 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

14、儿子底部与交叉轴终点对齐

<view>14、儿子底部与交叉轴终点对齐</view>
<view class="father_align-items-flex-end">    <!-- 代码 align-items， 排列数值flex-end -->
  <view class="son-1"> 交叉轴1 </view>
  <view class="son"> 交叉轴2 </view>
  <view class="son"> 交叉轴3 </view>
</view>

/* 14、儿子盒子与第一行文字的基线对齐，在未单独设置基线时等同于flex-start */
.father_align-items-flex-end {
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: flex-end;  /* 儿子底部与交叉轴终点对齐 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

15、儿子盒子与第一行文字的基线对齐，在未单独设置基线时等同于flex-start

<view>15、儿子盒子与第一行文字的基线对齐，在未单独设置基线时等同于flex-start</view>
<view class="father_align-items-baseline">    <!-- 代码 align-items， 排列数值baseline -->
  <view class="son-1"> 交叉轴1 </view>
  <view class="son"> 交叉轴2 </view>
  <view class="son"> 交叉轴3 </view>
</view>

/* 15、儿子盒子与第一行文字的基线对齐，在未单独设置基线时等同于flex-start */
.father_align-items-baseline {
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: baseline;  /* 儿子盒子与第一行文字的基线对齐 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

默认情况下，项目都排在一条线（又称轴线）上，flex-wrap属性用于定义如果一条轴线排不下时如何换行的问题。

16、默认值，所有元素都排在一行，不换行。则所有元素挤在一条线上

<view>16、默认值，所有元素都排在一行，不换行。则所有元素挤在一条线上</view>
<view class="father_flex-wrap-nowrap">    <!-- 代码 flex-wrap， 取值nowrap -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 默认情况下，项目都排在一条线（又称轴线）上，
flex-wrap属性用于定义如果一条轴线排不下时如何换行的问题。 */
/* 16、默认值，不换行，则所有元素挤在一条线上 */
.father_flex-wrap-nowrap {
  display: flex;
  flex-wrap: nowrap;   /* 默认值 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

17、换行，第一行在上方。

<view>17、换行，第一行在上方。</view>
<view class="father_flex-wrap-wrap">    <!-- 代码 flex-wrap， 取值wrap -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 17、换行，第一行在上方。 */
.father_flex-wrap-wrap {
  display: flex;
  flex-wrap: wrap;  /* 换行，第一行在上方。 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

18、换行，第一行在下方。

<view>18、换行，第一行在下方。</view>
<view class="father_flex-wrap-wrap-reverse">    <!-- 代码 flex-wrap， 取值wrap-reverse -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 18、换行，第一行在下方。 */
.father_flex-wrap-wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse;  /* 换行，第一行在下方。 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

stretch默认值，未设置儿子尺寸时，将各行中的儿子拉伸至尽量填满交叉轴。设置了儿子尺寸时，儿子尺寸不变，儿子拉伸至尽量填满交叉轴。当前列空隙不够时自动切换到下一列。

19——1、stretch默认值，儿子设置尺寸

<view>19——1、stretch默认值，儿子设置尺寸</view>   <!-- 19——1和19——2的代码一样，区别在儿子是否设置尺寸（高度height） -->
<view class="father_align-content-stretch">    <!-- 代码 align-content， 取值stretch -->
  <view class="son-1"> 行1 </view>    <!-- 此行儿子未设置高度height -->
  <view class="son"> 行2 </view>
  <view class="son-1"> 行3 </view>    <!-- 此行儿子未设置高度height -->
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

<view>19——2、stretch默认值，儿子设置尺寸</view>   <!-- 19——1和19——2的代码一样，区别在儿子是否设置尺寸（高度height） -->
<view class="father_align-content-stretch">    <!-- 代码 align-content， 取值stretch -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。多行排列要设置flex-wrap属性值为wrap，表示允许换行。 */

/* 19、stretch默认值，未设置儿子尺寸时，将各行中的儿子拉伸至尽量填满交叉轴。设置了儿子尺寸时，儿子尺寸不变，儿子拉伸至尽量填满交叉轴。当前列空隙不够时自动切换到下一列。*/
/* 19——1和19——2 */
.father_align-content-stretch {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: stretch;  /* 默认值 */
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

20、首行在交叉轴起点开始排列，行间不留间距。

<view>20、首行在交叉轴起点开始排列，行间不留间距。</view>
<view class="father_align-content-flex-start">    <!-- 代码 align-content， 取值flex-start -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 20、首行在交叉轴起点开始排列，行间不留间距。 */
 .father_align-content-flex-start {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: flex-start;    /* 首行在交叉轴起点开始排列，行间不留间距。 */
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

21、行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。

<view>21、行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。</view>
<view class="father_align-content-center">    <!-- 代码 align-content， 取值center -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 21、行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。 */
.father_align-content-center {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: center; /*行在交叉轴中点排列，行间不留间距，首行离交叉轴起点和尾行离交叉轴终点距离相等。*/
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

22、尾行在交叉轴终点开始排列，行间不留间距。

<view>22、尾行在交叉轴终点开始排列，行间不留间距。</view>
<view class="father_align-content-flex-end">    <!-- 代码 align-content， 取值flex-end -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 22、尾行在交叉轴终点开始排列，行间不留间距。*/
.father_align-content-flex-end {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: flex-end; /* 尾行在交叉轴终点开始排列，行间不留间距。  */
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

23、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。

<view>23、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。</view>
<view class="father_align-content-space-between">    <!-- 代码 align-content， 取值space-between -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 23、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。*/
.father_align-content-space-between {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: space-between; /* 行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为0。*/
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

24、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。

<view>24、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。</view>
<view class="father_align-content-space-around">    <!-- 代码 align-content， 取值space-around -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 24、行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。*/
.father_align-content-space-around {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: space-around; /* 行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点距离为行与行间间距的一半。  */
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

25、行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等

<view>25、行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等</view>
<view class="father_align-content-space-evenly">    <!-- 代码 align-content， 取值space-evenly -->
  <view class="son"> 行1 </view>
  <view class="son"> 行2 </view>
  <view class="son"> 行3 </view>
  <view class="son"> 行4 </view>
  <view class="son"> 行5 </view>
  <view class="son"> 行6 </view>
  <view class="son"> 行7 </view>
</view>

/* 25、行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等*/
.father_align-content-space-evenly {
  display: flex;
  flex-direction: row;/* 该情况下交叉轴在水平（行）方向上 */
  flex-wrap: wrap; /*多行排列要设置flex-wrap属性值为wrap，表示允许换行。*/
  align-content: space-evenly; /* 行间间距、以及首行离交叉轴起点和尾行离交叉轴终点距离相等 */
  width: 100%;
  height: 400rpx;
  border: 1px dotted #A1A1A1;
}

26、flex-flow是flex-direction和flex-wrap两个属性同时作用的简写，且属性值直接用空格连接，这个写法与给容器设置边框时的复合属性语法类似

<view>26、flex-flow是flex-direction和flex-wrap两个属性同时作用的简写，且属性值直接用空格连接，这个写法与给容器设置边框时的复合属性语法类似</view>
<view class="father_flex-flow-column-wrap">    <!-- 代码 flex-flow， 取值column wrap -->
  <view class="son"> 合并1 </view>
  <view class="son"> 合并2 </view>
  <view class="son"> 合并3 </view>
</view>

/* 26、flex-flow是flex-direction和flex-wrap两个属性同时作用的简写，且属性值直接用空格连接，这个写法与给容器设置边框时的复合属性语法类似 */
.father_flex-flow-column-wrap {
  border: 1px dotted #A1A1A1;  /* 边框 */
  width: 100%;
  height: 400rpx;
  /* flex-direction:column; 纵向排列 */
  /* flex-wrap:wrap; 换行 */

  /* 以上两句等同于flex-flow的一句*/
  flex-flow: column wrap;   /* 纵向排列、换行 */
}

剩余空间分配

27、flex-grow 取值为1

<view>27、flex-grow 取值为1</view>  <!-- 具体看课件第2章，31页 -->
<view style="display: flex;border: 1px dotted #A1A1A1;width: 100%;height: 150rpx;">  <!-- 代码 flex-grow， 取值1 -->
  <view class="son"> 分配1 </view>
  <view class="son_flex-grow"> 分配2 </view>
  <view class="son"> 分配3 </view>
</view>

/* 27、flex-grow属性用于设置项目扩张因子。当项目在主轴方向上还有剩余空间时，通过设置项目扩张因子进行剩余空间的分配，扩张因子只能是非负数，默认值为0，即不扩张。 */

/* flex-grow在默认值为0时，显示item的正常大小。值为1时，每个item同时在主轴上扩张，并铺满整个容器。当单独为某个item设置flex-grow属性值时，取值从0到1，该item宽度所占的比重逐渐增大，直至铺满主轴。另外flex-grow取大于1的值与1作用效果相同。 */

/* 27、flex-grow 取值为1 */
.son_flex-grow {
  flex-grow: 1;

  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

flex-shrink属性与flex-grow相反，用于设置项目收缩因子。当项目在主轴方向上溢出时，通过项目收缩因子的规定比例来压缩项目以适应容器，收缩因子只能为非负数。若所有项目的flex-shrink属性值都设为1，当空间不足时将等比例缩小，直至铺满水平的交叉轴，如图（a）所示。

若只有一个item的flex-shrink属性值为0，其他项目都为1，则空间不足时前者不缩小，如图（b）所示。flex-shrink属性值越大被压缩的越小，另外，压缩比例会受item内部文字的影响，在测试时要特别注意，否则看不到效果。

/* 注意：当一行线上的儿子盒子总宽度大于父亲的宽度时，flex-shrink才能生效 */

28、flex-shrink（压缩），取值为1（默认值）

<view>28、flex-shrink（压缩）， 取值为1（默认值）</view>  <!-- 具体看课件第2章，33页 -->
<view style="display: flex;border: 1px dotted #A1A1A1;width: 100%;height: 150rpx;">  <!-- 代码 flex-shrink， 取值1 -->
  <view class="son_flex-shrink"> 分配1 </view>
  <view class="son_flex-shrink-qwq"> 分配2 </view>
  <view class="son_flex-shrink"> 分配3 </view>
  <view class="son_flex-shrink"> 分配4 </view>
  <view class="son_flex-shrink"> 分配5 </view>
  <view class="son_flex-shrink"> 分配6 </view>
  <view class="son_flex-shrink"> 分配7 </view>
</view>

.son_flex-shrink-qwq {
  flex-shrink: 4;

  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

.son_flex-shrink {
  flex-shrink: 1;  /* 默认值 */

  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

29、flex-basis的值根据主轴方向的不同可以代替儿子的宽或高

<view>29、flex-basis的值根据主轴方向的不同可以代替儿子的宽或高，</view>
<view style="display: flex;border: 1px dotted #A1A1A1;width: 100%;height: 150rpx;flex-direction: row;">  <!-- 默认横向布局，则主轴为横向，将替换儿子的宽度 -->
  <view class="son_flex-basis"> 替换1 </view>    <!-- 设置flex-basis时，将替换儿子原来的宽度，直到铺满水平轴 -->
  <view class="son_flex-basis-xiangtong" > 替换2 </view>    <!-- 设置flex-basis和儿子一样宽度时，会替换width属性 -->
  <view class="son"> 替换3 </view>    <!-- 不设置flex-basis -->
</view>

/* 29、flex-basis的属性值是一个几十到几百不等的数值，单位为rpx或px，这个值根据主轴方向的不同可以代替儿子的宽或高，即原有的width或者height属性。 */
.son_flex-basis {    /* 儿子设置 flex-basis 时 */
  flex-basis: 300rpx;

  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}


.son_flex-basis-xiangtong {    /* 儿子设置 flex-basis 的值和宽度相同时 */
  flex-basis: 120rpx;

  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

30、flex可作为grow（扩张）、shrink（压缩）、basis（替代宽高）三个属性的简写。具体看课件第二章36页

<view>30、flex可作为grow（扩张）、shrink（压缩）、basis（替代宽高）三个属性的简写。具体看课件第二章36页</view>
<view style="display: flex;border: 1px dotted #A1A1A1;width: 100%;height: 150rpx;">
  <view class="son_grow-shrink-basis"> 简写1 </view>
  <view class="son_grow-shrink-basis"> 简写2 </view>
  <view class="son_grow-shrink-basis"> 简写3 </view>
</view>

/* 30、flex可作为grow（扩张）、shrink（压缩）、basis（替代宽高）三个属性的简写。 具体看课件第二章36页 */
.son_grow-shrink-basis {
  /* flex-grow: 1;
  flex-shrink: 1;
  flex-basis:500rpx; */
  /*以上三句等同于下面flex的一句*/
  flex: 1 1 500rpx;  /* grow（扩张）、shrink（压缩，默认值为1）、basis（替代宽高） */
  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

31、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

<view>31、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</view>
<view style="display: flex;border: 1px dotted #A1A1A1;width: 100%;height: 150rpx;">
  <view class="son_order" style="order: 3;"> 排列1 </view>  <!-- order的取值影响着排列顺序 -->
  <view class="son_order" style="order: 1;"> 排列2 </view>
  <view class="son_order" style="order: 2;"> 排列3 </view>
</view>

/* 31、order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 */
.son_order {
  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}

32、align-self（局部对齐方式）可以用来覆盖掉align-items（全局对齐方式），具体看课件第二章37页

<view>32、align-self（局部对齐方式）可以用来覆盖掉align-items（全局对齐方式），具体看课件第二章37页</view>
<view class="father_align-items">
  <view class="son_align-self" style="align-self: flex-start;"> 覆盖1 </view>
  <view class="son_align-self" style="align-self: center;"> 覆盖2 </view>
  <view class="son_align-self" style="align-self: baseline;"> 覆盖3 </view>
  <view class="son_align-self" style="align-self: flex-end;"> 覆盖4 </view>
  <view class="son_align-self" style="align-self: stretch;"> 覆盖5 </view>
</view>

/* 32、align-self属性与容器属性中的align-items属性是局部和全局的关系，但也允许item自行设置自己的排列，以覆盖全局的设置。 */

/* align-self默认属性值为auto，表示继承容器的align-items值。如果容器没有设置align-items属性，则align-self的默认值auto表示为stretch（因为align-items默认值为stretch）。 */

/* align-self（局部对齐方式）可以用来覆盖掉align-items（全局对齐方式） */
.father_align-items{    /* 全局 */
  display: flex;
  flex-direction: row;  /* 该情况下交叉轴在水平（行）方向上 */
  align-items: stretch;  /* 默认 */
  width: 100%;
  height: 200rpx;
  border: 1px dotted #A1A1A1;
}

.son_align-self {     /* 局部 */
  width: 120rpx;
  height: 100rpx;
  background-color: #33ff33;
  border: 1px solid #030303;  /*边框*/
}