flex-direction

「flex-direction」属性可以用来设定伸缩容器的主轴的方向，这也决定了使用者代理配置伸缩项目的方向。
取值： row | row-reverse | column | column-reverse
初始： row
适用于： 伸缩容器
「row」
伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要方向）同向。主轴起点与主轴终点方向分别等同于当前书写模式的始与结方向。
「row-reverse」
除了主轴起点与主轴终点方向交换以外同「row」。
「column」
伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）同向。主轴起点与主轴终点方向分别等同于当前书写模式的前与后方向。
「column-reverse」
除了主轴起点与主轴终点方向交换以外同「column」。
display:flex
不指定flex-direction默认的 row,伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要方向）同向。在这里,主轴起点=>主轴终点 为 左=>右
display:flex,flex-direction:row(default)
指定flex-direction=row,和上面意思是一样的
display:flex,flex-direction:row-reverse
flex-direction = row-reverse,伸缩容器的主轴与当前书写模式的行内轴（文字布局的主要方向）反向。在这里,主轴起点=>主轴终点 为 右=>左
display:flex,flex-direction:column
flex-direction = column,伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）同向。在这里,主轴起点=>主轴终点 为 上=>下。
display:flex,flex-direction:column-reverse
flex-direction = column,伸缩容器的主轴与当前书写模式的块轴（块布局的主要方向）反向。在这里,主轴起点=>主轴终点 为 下=>上。

flex-wrap

取值： nowrap | wrap | wrap-reverse
初始： nowrap
适用于： 伸缩容器
「flex-wrap」属性控制伸缩容器是单行还是多行，也决定了侧轴方向 ― 新的一行的堆放方向。
「nowrap」
伸缩容器为单行。侧轴起点方向等同于当前书写模式的起点或前／头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
「wrap」
伸缩容器为多行。侧轴起点方向等同于当前书写模式的起点或前／头在侧轴的那一边，而侧轴终点方向是侧轴起点的相反方向。
「wrap-reverse」
除了侧轴起点与侧轴终点方向交换以外同「wrap」。
display:flex,flex-wrap:nowrap(default)
默认的 nowrap,会导致 item 必须在一行内排列,所以 item 原有的宽度会被等比例压缩
display:flex,flex-wrap:wrap
使用 wrap,item 被允许在多行内,按照书写顺序排列,所以 item 大小不会被改变
display:flex,flex-wrap:wrap-reverse
使用 wrap-reverse,item 被允许在多行内,按"反向的"照书写顺序排列,所以 item 大小不会被改变

flex-flow

取值： <‘flex-direction’> || <‘flex-wrap’>。
「flex-flow」属性是同时设定「flex-direction」与「flex-wrap」属性的缩写，两个属性决定了伸缩容器的主轴与侧轴。
display:flex,flex-flow: column wrap;
使用 flex-flow: column wrap; 1:主轴和侧轴交换(从上到下) 2:侧轴方向不变(从左向右)
display:flex,flex-flow: column wrap-reverse;
使用 flex-flow: column wrap-reverse; 1:主轴和侧轴交换(从上到下) 2:侧轴方向反向(从右向左)

justify-content

取值： flex-start | flex-end | center | space-between | space-around
初始： flex-start
适用于： 伸缩容器
「justify-content」属性用于在主轴上对齐伸缩项目。
这一行为会在所有可伸缩长度及所有自动边距均被解释后进行。
当一行上的所有伸缩项目都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性才会对多余的空间进行分配。
当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
display:flex,justify:flex-start
flex-start
伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。
简单说:沿着主轴方向对齐,(主轴从左向右,那么从左向右对齐)
display:flex,justify:flex-end
flex-end
伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。
简单说:沿着主轴相反方向对齐,(主轴从左向右,那么从右向左对齐)
display:flex,justify:center
center
伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。
简单说:整体沿着主轴方向居中紧紧排列在一起,左右两边外边距相同
display:flex,justify:space-between
space-between
伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于「flex-start」。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。
简单说:第一个伸缩项目贴着主轴起点,最后一个贴着终点,其他项目之间等距离排列
display:flex,justify:space-around
space-around
伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于「center」。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。
简单说:主轴两端距离为元素之间举例的一半,在主轴上均匀分布

侧轴对齐 ―「align-items」(对容器)

取值： flex-start | flex-end | center | baseline | stretch
初始： stretch
适用于： 伸缩容器

侧轴对齐 ―「align-self」(对项目)

取值： auto | flex-start | flex-end | center | baseline | stretch
初始： auto
适用于： flex items
伸缩项目可以在伸缩容器的当前行的侧轴上进行对齐，这类似于「justify-content」属性，但是是另一个方向。
「align-items」可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。
「align-self」则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，「align-self」的值永远与其关联的伸缩容器的「align-items」的值相同。)。
若伸缩项目的任一个侧轴上的外边距为「auto」，则「align-self」没有效果。
如果「align-self」的值为「auto」，则其计算值为元素的父元素的「align-items」值，如果该元素没有父元素，则计算值为「stretch」。
display:flex,align-items:flex-start
flex-start
伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
简单说:贴着侧轴的起始边
display:flex,align-items:flex-end
flex-end
伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边。
简单说:贴着侧轴的终止边
display:flex,align-items:center
center
伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
简单说:在侧轴方向上1/2处居中,上下边距相同
display:flex,align-items:baseline
baseline
如果伸缩项目的行内轴与侧轴为同一条，则该值与「flex-start」等效。
其它情况下，该值将参与基线对齐。
所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
简单说:针对文字基线对齐,然后贴着侧轴起点边摆放,直到最高的项目顶到边为止
display:flex,align-items:stretch
stretch
如果「伸缩项目」的侧轴长度属性的值为「auto」，则此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。
简单说:flex item 的 height 必须是 auto,然后会被拉伸到整个侧轴方向
display:flex,align-items:stretch
align-self
align-self 用于对某个 flex item 设置其 align 方式,复写 container 的设置。
比如这里的 block2 简单说:align-self 覆盖 align-items 的设置

堆栈伸缩行 ―「align-content」

取值： flex-start | flex-end | center | space-between | space-around | stretch
初始： stretch
适用于： 多行伸缩容器
当伸缩容器的侧轴还有多余空间时，「align-content」属性可以用来调准伸缩行在伸缩容器里的对齐方式，
这与调准伸缩项目在主轴上对齐方式的「justify-content」属性类似。
请注意本属性在只有一行的伸缩容器上没有效果
display:flex,align-content:flex-start,flex-wrap: wrap
flex-start
各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。
简单说:向侧轴[起点]靠拢紧贴排列.(默认从上往下)
display:flex,align-content:flex-end,flex-wrap: wrap
flex-end
各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。
简单说:向侧轴[终点]靠拢紧贴排列.(默认从下往上)
display:flex,align-content:center,flex-wrap: wrap
center
各行向伸缩容器的中间位置堆叠。
各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。
（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）。
简单说:向侧轴[中间]靠拢紧贴排列.上下留出等距离边距
display:flex,align-content:space-between,flex-wrap: wrap
space-between
各行在伸缩容器中平均分布。
如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「flex-start」。
在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。 简单说:第一行贴着侧轴[起始边],最后一行贴着侧轴[终止边],其他行等间距排列
display:flex,align-content:space-around,flex-wrap: wrap
space-around
各行在伸缩容器中平均分布，在两边各有一半的空间。
如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「center」。
在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。 简单说:各伸缩行间距相等,其中第一行距离侧轴[起始边]距离=1/2间距,最后一行距离侧轴[终止边]距离=1/2间距
display:flex,align-content:stretch,flex-wrap: wrap
stretch (demo1:后2行可伸缩:height:auto)
各行将会伸展以占用剩余的空间。
如果剩余的空间是负数，该值等效于「flex-start」。
在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。 简单说:当行内元素高度 auto 时,该行可伸缩.stretch 会讲可伸缩的行在侧轴方向上延展,直到撑满侧轴方向
display:flex,align-content:stretch,flex-wrap: wrap
stretch(demo2:3行都可伸缩)
Question:不同行的高度是自己伸缩的,但是却不均等,这是怎么分的?

显示顺序 ―「order」属性

取值： integer
初始： 0
适用于： 伸缩项目,伸缩容器的绝对定位子元素
「order」属性透过将元素分到有序号的组以控制元素出现的顺序。
伸缩容器会从序号最小的组开始布局，在同一个组里的项目依在来源文件里的次序布局
请注意负数是可以的,越小,优先级越高
display:flex,flex-wrap: wrap
使用 order 改变次序
越小的在前面。
注意:Order 相=的话,还是以文档中出现的次序排列

伸缩设置 ―「flex」属性

取值： none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
初始： 「flex: 0 1 auto」。
适用于： 伸缩项目

「flex」属性可以用来指定可伸缩长度的部件：扩展比率、收缩比率，以及伸缩基准值。
当一个元素是伸缩项目时，「flex」属性将代替主轴长度属性决定元素的主轴长度(比如默认情况下代替 width)。
若元素不是伸缩项目，则「flex」属性没有效果。

伸缩比例 ―「flex-grow」属性

用来指定flex item 的扩展比率，也就是剩余空间是正值的时候,此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。
默认值为「1」

收缩比例 ―「flex- shrink」属性

用来指定flex item 的收缩比率，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。
若省略了，则它会被设为「1」。在收缩的时候收缩比率会以伸缩基准值加权。
display:flex,flex-wrap: nowrap
flex-grow 定义各 flex item 占据的「剩余空间」宽度比例
剩余宽度=容器宽度 - flex item 已确定占据的宽度总和。
注意: 剩余宽度= 650px -(100px + 150px + 200px)=200px, 200/3=66.7px.所以3个 block 每人多分到66.7px
display:flex,flex-wrap: nowrap
当存在剩余空间的时候,flex-grow 才有效
下面看看 flex item width= 100% 的情况。
注意:这时候3个 item 的宽度=100%,container 不存在剩余空间,所以 flex-grow 可分配为0.大家什么都分不到
display:flex,flex-wrap: nowrap
下面看看 flex item width= 0 的情况。
注意:width=0,导致父容器所有宽度都是"剩余宽度",故可以用这个办法,来使用 flex-grow 直接分配父容器比例
但是,width=auto 却达不到这种效果,不知何故
display:flex,flex-wrap: wrap
当 item 宽度是100%的时候,我们开启 wrap 模式,允许换行
注意:因为每个 item 都独占一行,所以也不存在剩余宽度可以分配
display:flex,flex-wrap: nowrap
flex-shrink 定义「剩余空间」不足的时候,各元素收缩比例
我们先让容器不可换行=nowrap
收缩比例计算:
剩余宽度=650px - (200+200+400) = -150px
因为大家比例都是1,设收缩率=x1,有公式:200*x1+200*x1+400*x1 = 650
=> x1=650/800 = 0.8125
所以: 收缩后:
width1 = 200*0.8125=162.5
width2 = 200*0.8125=162.5
width3 = 400*0.8125=325

伸缩基准值设置 ―「flex-basis」属性

取值： <'width'>
初始： auto
适用于： 伸缩项目

「flex-basis」属性可以用来设置伸缩基准值。负长度不合法。 在横向书写模式中，「flex-basis」的值 =「width」
若「flex-basis」的值是一个百分比，则此百分比由伸缩项目的包含块（也就是伸缩容器）解出.
同样的，除非「box-sizing」指定了别的行为，「flex-basis」决定内容盒的尺寸。

display:flex,flex-wrap: nowrap
flex-basis 定义 flex item 的伸缩基准值,覆盖元素在主轴上的属性(默认是 width)
剩余宽度=容器宽度 - 「flex item 的伸缩基准值」 的总和。
收缩比例计算:
剩余宽度=650px - (200+150+400) = -100px
因为大家比例都是1,设收缩率=x1,有公式:200*x1+150*x1+400*x1 = 650
=> x1=650/750 = 0.8666
所以: 收缩后:
width1 = 200*0.8666=173
width2 = 150*0.8666=130
width3 = 400*0.8666=346

「flex:0 auto」=「flex:initial」=「flex:0 1 auto」

这也是 flex 属性的初始值
效果:
根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）
当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小值。
网页作者可以用对齐相关的属性以及margin属性的auto值控制伸缩项目沿着主轴的对齐方式。

display:flex,flex-wrap: nowrap
flex 属性是默认值的情况
1.flex 容器剩余空间>0的情况
可以看到,默认情况下,剩余空间不会被占据,每个 item 还是占据自己的宽度所指定的区域
注意一下,最后一个 item 的宽度没有指定,他就会按照自己的内容宽度来占据
display:flex,flex-wrap: nowrap
flex 属性是默认值的情况
2.flex 容器剩余空间<0的情况
可以看到,默认情况下,剩余空间不足,每个 item 会按照相同的比例收缩自身
注意一下,收缩只是在主轴方向上,高度不变
200*scale+200*scale+400*scale = 650
scale = 650/800 = 0.8125
width1=width2=0.8125 * 200=162.5
width3=0.8125 * 400=325

「flex:auto」=「flex:1 1 auto」

效果:
根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）
当剩余空间为正值时，所有 flex:auto 的项目均分剩余空间
当剩余空间不足的时候,所有 flex_auto 的项目按相同比例收缩自己
display:flex,flex-wrap: nowrap
「flex:auto」=「flex:1 1 auto」的情况
1.flex 容器剩余空间>0
要注意,均分剩余空间,是按照剩余空间*比例,而不是按照自身比例,所以不是等比例伸缩(和收缩不同)
剩余空间=650 -200 -120-120 = 210
所以每个 item 分得:210/3=70px
每个 item 都伸展了70px

「flex:none」=「flex:0 0 auto」

效果:
根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）
无论是否还有剩余空间,都不进行伸缩

display:flex,flex-wrap: nowrap
「flex:none」=「flex:0 0 auto」的情况
1.flex 容器剩余空间>0
因为不进行伸缩,所以多余的空间不会去填满
display:flex,flex-wrap: nowrap
「flex:none」=「flex:0 0 auto」的情况
2.flex 容器剩余空间<0
因为不进行伸缩,所以超过的部分不会去收缩
display:flex,flex-wrap: wrap
「flex:none」=「flex:0 0 auto」的情况
3.flex 容器剩余空间<0
但是:容器的 flex-wrap:wrap
因为容器允许在侧轴方向换行,所以多余的部分会自动换行