快速了解flex

flex有两个核心：轴和容器。轴决定了布局的方向。容器决定了flex作用目标和范围。Flexbox布局最适合应用程序的组件和小规模布局（一维布局）

一。作用在flex容器上(6个）

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

1. flex-direction 值为： row row-reverse column column-reverse

row为默认值，为当前文档流水平流方向，一般为从左到右，row-reverse为反方向。

column 显示为列，column-reverse为反方向。

2. flex-wrap 值为 nowrap wrap wrap-reverse

nowrap，默认值，表示单行显示，不换行。在子项宽度之和超过容器时，表现为：显示为一行并溢出，或者压缩子项显示为一行不溢出。具体情况要看子项width 的min-content 和 fit-content
wrap，宽度不足时换行显示。

3. flex-flow 是flex-direction 和 flex-wrap的缩写同事表示这连个属性；

写法如下：flex-flow: row wrap;

4. justify-content 值为：flex-start flex-end center space-between space-around

决定了水平方向子项的对齐和分布。和text-align类似，不过前者控制flex元素对齐，后者控制内联元素对齐。

5.align-content 值为：stretch flex-start flex-end center space-between space-around space-evenly

和justify-content相似且对立。表示垂直方向每一行flex元素的对齐和分布

6.align-items 值为：stretch flex-start flex-end center baseline

和align-content看起来很像，但这里针对的是每一个子项item，而不是一行

二，作用在子项上的flex（6个）

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order 值为整数，默认0

表示某个子项的排序位置

2.flex-grow 值为正数（包括小数）和0，默认值是0(表示不扩展）

规则，容器剩余空间为1，flex-grow值小于1时，按值的比例增长扩展，大于1则占满。多个子项都设有flex-grow值并且总值大于1时，按他们的比例分配空间。

3.flex-shrink 值为正数（包括小数）和0，默认值是1（表示都收缩）0表示不收缩。主要处理当flex容器空间不足时候，单个元素的收缩比例

和flex-grow有点类似。flex-grow用在空间有多余。flex-shrink用在空间不够。

只一个子项设置flex-shrink,

• 值小于1，则收缩不完全，仍会有一部分溢出
• 值大于等于1，则完全收缩，正好填满。

有多个子项设置了flex-shrink

• 值得总和小于1，收缩不完全，每个元素按比例就是设置的值
• 值得总和大于等于1，收缩完全，每个元素按比例收缩

4. flex-basis 定义了分配剩余空间之前元素的默认大小。默认值为auto

5. flex

flex属性是flex-grow，flex-shrink和flex-basis的缩写。通常有3个写法

flex默认值，等同flex：0 1 auto;

flex:none，等同于flex: 0 0 auto;

flex:auto，等同于flex: 1 1 auto;

6.align-self

和align-items类似，不过align-items表示所有子项，align-self只表示自己。他们的用法一样。
值为：auto flex-start flex-end center baseline stretch
唯一的区别是多了auto这个值，表示继承flex容器的align-items属性值。