flex布局

设置display:flex;  display:inline-flex的元素称为flex容器，里边子元素称为flex子项

flex相关属性分为两部分,一部分作用在flex元素上，另一部分作用在flex子项上

一：

子项整体布局方向

flex-direction：row | row-reverse | column | column-reverse

二：

控制子项整体单行显示还是 换行显示

flex-wrap：nowrap | wrap | wrap-reverse

三：flex-flow:flex-direction和flex-wrap的缩写

flex-flow:flex-direction flex-wrap;

四：

水平方向子项对齐方式和分布

justify-content：flex-start | flex-end | center |  space-between | space-around | space-evenly

space-between:左右两边对齐 中间间隔均匀分布

space-around:环绕的意思 每个子项都环绕互不干扰等宽的空白间距 视觉上两侧空白只有中间空白的一半

space-evenly:均分 每个flex子项空白间距相等

五：

子项垂直方向的对齐方式

align-items:stretch | flex-start | flex-end | baseline

stretch:子项拉伸 贯穿容器

baseline：所有子项相对于容器的基线对齐

六：

子项垂直方向每一行flex元素的对齐方式

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;

 

作用在flex子项上的css属性

1：order：改变子项的排序位置 默认为0 若想将某一子项设置在前 只需设置比0小的数字 若在后 则比0大即可

2：flex-grow:扩展  flex子项所占据的宽度 扩展所侵占的空间就是元素以外的空白间隙

flex-grow默认值为0 可以是小数不为负 所有剩余空间总量为1

3、flex-shrink:收缩 容器空间不足时 单个元素的收缩比例

默认值为1 不为负

4、flex-basis：分配剩余空间之前元素默认大小

flex-basis:length | auto;

5、flex：flex-grow flex-shrink和flex-basis的缩写

6、align-self:单独控制flex子项的垂直对齐方式

align-self:auto | flex-start | flex-end | center | stretch | baseline