flex布局

一：flex布局属性

1.首先要指定父元素是弹性盒子：display:flex;

2.给父元素设置（弹性盒子）

1. align-items：是否垂直居中
2. align-content：所有行是否垂直居中（设置行对齐）
3. justify-content：是否水平居中 
4. flex-wrap：是否自动换行
5. flex-direction：是否从上到下排序
6. felx-flow：是 flex-wrap和 flex-direction 的简写

父元素属性	属性值以及作用
1.align-items ：是否垂直居中	stretch：置顶靠底拉伸（默认） flex-start：置顶 flex-end：靠底 center：垂直居中
2.align-content：所有行是否垂直居中（设置行对齐）要结合flex-wrap自动换行使用	stretch：第一行置顶，每行相隔距离相同（默认） flex-start：所有行都顶置 flex-end：所有行都靠底 center：所有行垂直居中 space-between：第一行置顶，最后一行靠底，空白平分 space-around：不置顶不靠底，空白平分
3.justify-content：是否水平居中	flex-start：都靠左（默认） flex-end：都靠右 center：水平居中 space-between：第一个靠左，最后一个靠右，空白平分 space-around：不靠左不靠右，空白平分 soace-evenly：不靠左不靠右，所有空白平分
4.flex-wrap：是否自动换行	nowrap：不换行（默认） wrap：换行
5.flex-direction：是否从上到下排序	row：初始位置在左边，从做向右排序（默认） row-reverse：初始位置在右边，从右向左排序 column：初始位置在顶部，从上向下排序 column-reverse：初始位置在底部，从下向上排序
6.felx-flow：是 flex-direction和 flex-wrap的简写	flex-flow: row wrap; 初始位置在左，从左向右排序，自动换行

3.给子元素属性设置（弹性元素属性）

1.flex：所占比例  设置弹性盒子的子元素如何分配空间。

• flex-grow：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
• felx-shrink：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
• flex-basis：项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。

2.align-self：在弹性子元素上使用。覆盖容器的 align-items 属性。

3.order：设置弹性盒子的子元素排列顺序。

子元素属性	属性值以及作用
1.flex：所占比例	语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit; flex： 0 0 auto；与 flex：none；相同 flex：1 1 auto；与flex：auto；相同
2.align-self：覆盖父元素 align-items 属性	auto：继承了父元素的 align-items 属性（默认） stretch：高度为父元素高度 flex-start：置顶 flex-end：靠底 center：垂直居中