html(11)

弹性盒子

概念：是一种新的布局方式：让容器有能力控制里面元素的排列方式
专业术语：
	容器：被设置了display：flex的元素
	项目：容器中的元素就是项目
	主轴：元素排列的方向，默认为x轴
	侧轴：垂直于主轴的方向，默认为y轴

将元素设置成弹性盒子、容器

display：flex

容器身上的属性

决定主轴的方向
flex-direction：row（默认值）x轴 ｜ column y轴 ｜ row-reverse ｜ column-reverse 

项目在主轴的对齐方式

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

项目在侧轴上的对齐方式

align-items:flex-start	|	flex-eng	|	center	|	baseline	|	stretch
stretch：拉伸，是默认值 项目没有高度才有效果

项目是否换行

flex-wrap:nowwrap	|	wrap

多行元素的排列方式

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

项目上的属性

1.项目的排列顺序【元素默认的数字是0，越大越后面】
	order：数字
2.分配剩余空间【元素默认值为0，不放大，根据所占份数分配剩余空间】
	flex grow：数字
3.缩小：容器空间不够的时候，项目如何挤压排列
（元素默认是1，会缩小，如果不想缩小，设置成0）
	flex shrink：数字
4.复合属性
	flex：flex-grow	｜	flex-shink	｜	flex-basis	｜
		flex：1；
5.定义项目单独的排列方式
align-self:auto	|	flex-stant	|	flex-eng	|	center	|	baseline	|	stretch