「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」

Flex布局

以前在网页开发过程中，布局一直是不可或缺的，从最早的表格布局，到后来的DIV+CSS布局，现在再到CSS3的伸缩布局。最近在写小程序的项目中flex布局用得非常多，其适应性也非常强，其强大的伸缩性，发挥了极大的作用，因此就在这里整理一下flex布局的知识。

参考链接：developer.mozilla.org/zh-CN/docs/…

首先先明确一下主轴和侧轴的意思：

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向）

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的（y轴负向）

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction设置主轴的方向。首先要指定一个父盒子为伸缩盒子，即指定：display: flex

父项常见属性(设置父元素)

1. `flex-direction`

flex-direction属性决定了主轴的方向，注意这个属性是给父元素设置的。

row：默认值，从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

实现效果如下：

沿x轴正方向默认值(flex-direction: row)：请添加图片描述

沿着x轴负方向flex-direction: row-reverse: 请添加图片描述

2. justify-content

这个属性定义了子项目在主轴上的对齐方式。(下面图示均为主轴为x轴正方向的情况)

flex-start：默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end：从尾部开始排列

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Qgui6zT-1626893212992)(E:\微信小程序\笔记\flex_img\justify-content01.png)]$
center：在主轴居中对齐(如果主轴是x轴则水平居中)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NQWhZpJ4-1626893212994)(E:\微信小程序\笔记\flex_img\justify-content02.png)]$
space-around：平分剩余空间
space-between：先两边贴边再平分剩余空间(重要)

3. `flex-wrap`属性

默认情况下，所有的子项目都是排列在一条线上的，也就是说默认不换行。当所有子项目的总宽度大于父元素的宽度的时候，子项目会均分父元素的宽度。如下图所示，原来给子元素的宽度是100px，父元素宽度是500px，当超过了父元素的宽度的时候，子元素的宽度就会被缩小放到父元素里面。 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PfHGbkcN-1626893212997)(E:\微信小程序\笔记\flex_img\flexwrap.png)]$

如果不想要这个效果，想要让子元素保持原来的样子，就可以用flex-wrap: wrap来设置它可以换行。效果如下： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKZDVFkf-1626893212997)(E:\微信小程序\笔记\flex_img\flexwrap02.png)]$

4. align-item属性(单行)

该属性是设置侧轴上的子元素排列方式（上面那个flex-direction是设置在主轴的），也就是说，如果想要让子项目水平垂直居中，相当于实现项目在主轴和侧轴上的居中。align-item属性是控制子项在侧轴(默认是y轴)上的排列方式，可以在子项为单行的时候使用。

flex-start：默认值，从上到下
flex-end：从下到上

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WNeqHfbx-1626893212998)(E:\微信小程序\笔记\flex_img\align02.png)]$
center：挤在一起居中(垂直居中) $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nrQGnkbi-1626893212998)(E:\微信小程序\笔记\flex_img\align01.png)]$
stretch：拉伸，用这个的时候子盒子不要给高度。设置这个属性后盒子会沿着侧轴拉伸

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeplBPV1-1626893212999)(E:\微信小程序\笔记\flex_img\align03.png)]$

5. align-content(多行)

上面那个align-items属性针对单行的子项目，而align-content适用于子项出现换方(多行)的情况，在单行下是没有效果的。

flex-start：默认值，在侧轴的头部开始排列
flex-end：在侧轴的尾部开始排列
center：在侧轴中间显示

前三个的效果跟align-items差不多，就不一一展示了
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先分布在两头、再平分剩余空间
stretch：设置子项元素高度平分子元素高度，同样的，子项不能设置高度，盒子沿着侧轴拉伸

6. `flex-flow`属性

flex-flow是flex-direction + flex-wrap的复合属性。

flex-diection: column;
flex-wrap: wrap;
/* 相当于 */
flex-flow: column wrap;

子项常见属性(设置子元素)

a. flex属性

flex属性定义子项目分配剩余空间，用flex来表示占多少份数。如flex: 1就是子项平均分父项的宽度

.item {
    flex: <number> /*默认1*/
}
/*给第二个盒子flex:2;*/

在这里插入图片描述

b. align-self控制子项自己在侧轴上的排列方式

align-self属性可覆盖align-items属性，默认值为auto，表示继承父元素align-items属性，如果没有父元素，则等同于stretch；

align-self: flex-end;

c. order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0.

注意：和z-index不一样

也就是说，当order的值较小的时候，盒子的位置就在前面，不再按照标签代码的前后顺序排列。再给第二个盒子order:-1; align-self: flex-end;效果如下：

在这里插入图片描述

总结

flex-direction调整主轴方向（默认为水平方向）
justify-content调整主轴对齐
align-items调整侧轴对齐（子元素可以使用align-self覆盖）
flex-wrap控制是否换行
align-content堆栈（由flex-wrap产生的独立行）对齐
flex-flow是flex-direction + flex-wrap的简写形式
flex是子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
order控制子项目的排列顺序，正序方式排序，从小到大

555555截图的时候把图片放到一个文件夹里面，然后搬运的时候一不小心按到 ctrl+Z 图片突然全都没了。那一刻是心痛的orz，然后就重新截图复制粘贴了qwq

还没搞清楚Flex布局？看这篇你就全懂了