Flex

常桂流

常规流又叫普通流，文档流，普通文档流
所有默认元素状态下都是常规流定位
常规流块盒的水平方向居中（给块盒固定宽）
垂直方向上，若两外边相邻，则进行合并，否则不能合并
外边距相邻：两个外边距之间没有border，padding和content
合并：均为正数取最大，均为负数取最小，一正一负相加

---

flex

主轴方向对齐方式
justify-content:
content(居中)
flex-end(主轴方向结束右对齐)
flex-start(主轴方向开始左对齐)
space-between（两端对齐）
space-around(分散对齐)
”space-evenly(平均对齐)“

主轴和交叉对齐方式
项目的放大：剩余空间，除以flex-grow的和，再按照份数给每个元素，剩余空间3份，放大的剩余空间尺寸
注：除以3是在第二个元素中，有一个flex-grow:2;
项目的放大：剩余空间3份，放大2/3的剩余空间尺寸
注：除以3是在第1个元素中年，有一个叫flex—grow：1
项目的排序，默认值是0，数值越大，越往后，相反越靠前（order）
项目部换行（默认值）即几个项目都会在主轴方向显示
如果项目尺寸之和大于容器主轴的尺寸，则项目自动缩小

flex-wrap:nowrap(默认 不换行）
flex-wrap:wrap（换行)
flex-wrap:wrap-reverse（例序换行，第一行在下方）

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值row nowrap

改变主轴方向
项目按行显示 
flex-direction: row;
项目按行倒序显示 
flex-direction: row-reverse;
项目按列显示 
flex-direction: column;
项目按列倒序显示
flex-direction: column-reverse;

定义项目在交叉轴上如何对齐	
align-items
content(居中)
flex-end(主轴方向结束右对齐)
flex-start(主轴方向开始左对齐)
space-between（两端对齐）
space-around(分散对齐)

定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
align-content
flex-start(与交叉轴的起点对齐)
flex-end(与交叉轴的起点对齐)
center（与交叉轴的中点对齐）
space-between（与交叉轴两端对齐，轴线之间的间隔平均分布）
space-around(每根轴线的间隔相等，所以，轴线之间的比轴线与边框的间隔大一倍)
stretch（默认值）（轴线占满整个交叉轴）

项目的属性
order（定义项目的排序顺序，数值越小，排序越靠前，默认为0）
flex-gorw（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大）
flex-shrink（定义了项目的缩小比例，默认值为1，空间不足，才会缩小）
flex-basis（定义项目在分配多于空间之前，项目占据的主轴空间，计算主轴是否有多于空间，默认值为自动（auto））
flex（属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0,1，auto  后两个属性可选）（auto 1 1 auto）（0 0 auto）
align-self（该属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等于stretch）