最近难得有空，总结一下flex布局相关知识点，如有错漏，请大神指点纠正，谢谢~

flex布局总结:

快速记忆

主轴方向记住justify

交叉轴方向记住align

关系就是：

justify-content

align-items

align-self

设置主轴方向flex-direction

设置换行：flex-wrap

设置主轴和换行的复合属性：flex-flow

设置伸缩基准：felx-basis

设置拉伸：flex-grow

设置缩放：flex-strink

设置子元素顺序：order

兼容性写法：

display:-webkit-box;

display:-moz-box;

display:-ms-flexbox;

display:-webkit-flex;

display:flex;

display:box;

四种布局方式：

1.标准文档流

2.浮动布局

3.定位布局

4.flex布局

flex布局核心：

flex核心主要在轴和容器上做文章，下面主要以轴（主轴和交叉轴）和容器（父容器和子容器）来阐述。

容器:#父容器

父容器属性可以设置子容器统一排列方式

主轴方向：

1.justify-content：

父容器设置子容器在主轴的排列：

对应属性值排列方式：

*位置排列：

flex-start

flex-end

center

*分布排列：

space-around

space-between

交叉轴方向：

2.align-items：

父容器设置子容器在交叉轴的排列：

对应属性值排列方式：

*位置排列：

flex-start

flex-end

center

*基线排列：

baseline

*拉伸排列：

stretch

进阶属性：

3.flex-wrap：设置换行方式

换行：wrap

不换行：nowrap

逆序换行：wrap-reverse

逆序换行是指沿着交叉轴的反方向换行

4.flex-flow:轴向和换行，是flex-direction和flex-wrap的组合属性

• flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，

比如 flex-flow:row wrap，flex-flow 是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：

○ row nowrap、column wrap 等，也可两者同时设置

5.align-content:多行沿交叉轴对齐：

当子容器多行排列时，设置行与行之间的对齐方式。

对应属性值排列方式：

*位置排列：

flex-start

flex-end

center

*分布排列：

space-around

space-between

*拉伸排列：

stretch

容器:#子容器

子容器属性可以设置自身排列方式

1.flex：

子容器设置自身容器的伸缩比例：

对应属性值单位方式：

无单位数字：1,2,3

有单位数字：15px,50px,100px

none关键字：不伸缩

2.align-self：

子容器设置自身的交叉轴排列

对应属性值排列方式：

*位置排列：

flex-start

flex-end

center

*基线排列：

baseline

*拉伸排列：

stretch

子容器进阶属性

3.flex-basis:设置基准大小

flex-basis 表示在不伸缩的情况下子容器的原始尺寸。

主轴为横向时代表宽度

主轴为纵向时代表高度：

4.flex-grow：设置扩展比例

子容器弹性伸展的比例,剩余空间按比例 扩展拉伸 分配

5.flex-shrink：设置收缩比例，剩余空间按比例 扩展收缩 分配

子容器弹性收缩的比例。

6.order:设置主轴排列顺序

改变子容器的排列顺序，覆盖HTML代码中的顺序，默认值为0，可以为负值，数值越小排列越靠前。

2.轴

主轴:

决定容器水平方向的排列

主轴的起始端由 flex-start 表示，末尾段由 flex-end 表示

1.flex-direction：

不同主轴方向位置不同

主轴位置方向对应属性值：

向右：row

向左：row-reverse

向下：coloumn

向上：coloumn-reverse

交叉轴

决定容器垂直方向的排列

交叉轴的起始端和末尾段也由 flex-start 和 flex-end 表示

主轴沿逆时针旋转90°得到交叉轴

flex布局共有13个属性

一个声明：display：flex

6个主容器

6个子容器

·如下图：

[图片上传失败...(image-d5cd52-1517564302029)]