前言

因为之前的公司对于设计图还原度要求比较高，用的比较多的是定位的布局方式，对于flex处于简单的使用，没有做过比较深入的了解，使用时在浏览器中进行调试，对于很多属性停留在印象阶段，趁这段时间做一个深入的了解。

1. 6个基本的属性

flex-direction ：该属性决定主轴的方向(水平或者垂直方向为主轴方向)

该属性的四个值：

row(默认值):水平方向为主轴值，起点在左边

row-reverse:水平方向为主轴值，起点在右边

column:垂直方向为主轴值，起点在上方

column-reverse:垂直方向为主轴值，起点在下方

flex-wrap：该属性决定一条轴上排不下的时候，是否换行

该属性的三个值:

nowrap(默认)：不换行

wrap:换行，第一行在上方

wrap-severse:换行，第一行在下方

flex-flow:该属性是flex-direction和flex-wrap的简写 默认值为row nowrap

justify-content:该属性定义了在主轴上的对齐式

该属性的6个值：

flex-start(默认值):左对齐

flex-end:右对齐

center:居中对齐

space-evenly:均匀排列每个元素

space-between:两端对齐，元素之间的间隔相等

space-around:每个项目之间的间隔相等，项目之间的间隔比中间大两倍

align-items:该属性定义在交叉轴上(侧轴)的排列方式

该属性的5个值：

flex-start:侧轴的起点对齐

flex-end:侧轴的终点对齐

center:侧轴中心点对齐(居中对齐)

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

stertch(默认值):项目为设置高度，或设置高度auto，将自动充满容器

algin-content:多根轴线的对齐方式

该属性的6个值：

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

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

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

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

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

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

使用情况可以参考:juejin.cn/post/704211…

2. 项目元素上的属性

项目元素上的六个属性:order、flex-grow、flex-shrink、flex-basis、flex、algin-self。

order：定义元素的排列顺序，数值越小，排列顺序越靠前，默认值为0

flex-grow:定义元素的放大比例，默认值为0，即有剩余空间时元素也不会放大，当所有元素的flex-grow都为1时，所有元素等分空间

当其中某一个元素的flex-grow为2，其他元素的值为1时，flex-grow值为2的元素所占空间是其他元素的两倍

flex-shrink:定义元素的缩小比例，默认值为1，当所有元素的flex-shrink值都为1，空间不足时，所有元素都会被同比例缩小，当其中一个元素为0时，为0时的元素不缩小，其他为1的值均缩小

flex-basis：该属性定义了分配多余空间之前，元素占据的主轴空间

flex:该属性是flex-grow、flex-shrink、flex-basis的集合体

flex:1相当于flex-grow:1、flex-shrink:1、flex-basis：0

aglin-self:允许单个元素有区别于其他元素的对齐方式