flex布局

flex布局的基本知识

首先介绍是什么是flex布局：

flex布局就是一种新的布局方案，通过为修改父div的display属性，让父元素成为一个flex容器，从而可以自由的操作容器中子元素(项目)的排列方式。

容器属性

1.flex-direction属性

取值：
row（默认）：横向排列，项目排列顺序为正序1-2-3
row-reverse：同为横向排列，但项目顺序为倒序3-2-1
column ：与row相反，为纵向排列，项目顺序为正序1-2-3
column-reverse：同为纵向排列，项目顺序为倒序3-2-1

2.flex-wap属性

取值：
nowwap：不换行

wap：超出父容器宽度会自然换行

wrap-reverse：同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

3.flex-flow属性

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行

4.justify-content属性
用于控制项目在横轴的对齐方式

取值：
flex-start：即左对齐

flex-end：右对齐

center：居中

space-between：左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等

space-around：为项目之间间距为左右两侧项目到容器间距的2倍

space-evenly：为项目之间间距与项目与容器间距相等

5.align-items属性
用于控制项目在纵轴的对齐方式

取值：
stretch(默认)：如果项目设置高度，或高度为auto，则占满整个容器

flex-start：项目在纵轴紧贴容器顶部

center：居中

flex-end：项目紧贴纵轴底部

baseline:目以第一行文字的基线为参照进行排列

注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

6.align-content
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用

取值：（大体和align-item的方式差不多）
stretch（默认）：项目没设置高度，或高度为auto情况下让项目填满整个容器

flex-start：顶部对齐

flex-end：底部对齐

center：居中

space-around：与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly：项目之间间距与项目到容器之间间距相等

space-between：上下两侧项目紧贴容器

项目属性

1.order：默认0

2.flex-grow：默认0
用于决定项目在有剩余空间的情况下是否放大，默认不放大

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间
假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍

3.flex-shrink：默认1
用于决定项目在空间不足时是否缩小，即空间不足时大家一起等比缩小

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小

上图中的第二个项目flex-shrink为0，所以自身不会缩小

4.flex-basis：默认auto
用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准

5.flex：默认auto，0，1
flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

6.align-self：默认auto
用于让个别项目拥有与其它项目不同的对齐方式

如：对项目二有align-self：flex-end

总结：

flex布局几乎就是这些常用的，如果后续还有的话，我会加以补充。