弹性容器和弹性元素

一、弹性容器

给盒子display: flex ; 盒子会变成弹性容器，不会出现高度塌陷问题。

二、弹性元素

弹性容器里的直接子元素（亲儿子）
inline-flex: 弹性盒子与非弹性盒子在同一行显示（规定弹性盒子为行内块元素）
flex : 弹性盒子与非弹性盒子不在同一行显示（规定弹性盒子为块元素）

三、属性

1、flex-grow ：（给子元素）当父元素有多余空间，子元素如何伸展父元素和按照比例进行分配，默认为0。
2、flex-shrink ：（给子元素）当父元素空间不足以容纳所有的子元素时，溢出的会被收缩，默认值为1，当为0时，就会溢出。
3、flex-wrap ：（给父元素）
wrap：元素放不下时，沿着辅轴方向换行
wrap-reverse：辅轴反方向
4、控制主轴和辅轴方向

flex-direction：属性值;

	row  			默认，水平自左向右
	row-reverse		自右向左
	colum			垂直自上向下
	colum-reverse	自下向上

5、flex-flow：wrap和direction的复合写法
6、分配主轴上的空白空间

justify-content: 属性值 ;

属性值			 效果
flex-start		沿着主轴起点排序（默认）
flex-end		沿着终点排列
center			元素居中排列
space-around	空白分布到元素两侧
space-between	空白均匀分布到元素之间
space-evenly	空白分布到元素的单侧

7、分配辅轴上的空白空间

align-content : 属性值 ;

	flex-start		元素在上边，空白空间在下边
	flex-end		元素在下面，空白空间在上面
	center			元素在中间，上下空白空间分布一样
	space-around	空白分布在两边
	space-between	空白分布在元素的中间

8、设置元素在辅轴上如何对齐

align-items : 属性值 ;

	stretch			默认
	flex-start 		元素不会拉伸，沿着辅轴的起点对齐
	flex-end		元素不会拉伸，沿着辅轴的终点对齐
	center			居中对齐
	baseline		基线对齐

9、flex-self （给子元素）
一般是使用在单个元素上面用来覆盖align-items属性的
所以align-self的属性值和align-items的属性值一样。
10、flex-basis（给子元素）控制元素宽度，一般不用
11、flex（给子元素）复合写法，一般不用
12、order（给子元素）决定元素排序，属性值：自然数