flex布局

flex容器属性：

1.flex-direction：属性定义容器要在哪个方向上堆叠flex项目，column表示垂直堆叠，row表示水平堆叠
2.flex-wrap：规定了是否会在必要时换行，wrap规定flex项目要在必要时换行，nowrap规定不对flex项目换行
3.flex-flow：用于同时涉及flex-direction和flex-wrap属性
4.justify-content：用于对齐flex项目，center表示flex项目在容器中心对齐，flex-start表示flex项目在容器开头对齐，flex-end表示flex项目在容器末端对齐，space-around显示行之前，之间，之后带有空格的flex项目，space-between显示行之间有空格的flex项目
5.align-items：用于处置对齐flex项目，center表示flex项目在容器中间对齐，flex-start将在项目顶部对齐，flex-end将在项目底部对齐，stretch拉伸项目以填充容器

flex的直接子元素，会自动成为弹性（flex）项目，可以用于弹性项目的属性：order，flex-grow，flex-shrink，flex-basis，flex，align-self
1.order：可以改变项目的排列顺序，order值必须为数字，默认为0
2.flex-grow：规定某个flex项目相对于其他的flex项目增长多少（相对比例），值为数字
3.flex-shrink：规定某个flex项目相对于其他的flex项目缩小多少，值为数字
4.flex-basis：规定flex项目的初始长度
5.flex：该属性是flex-grow，flex-shrink，flex-basis的简写
6.align-self：规定弹性容器内所选项目的对齐方式，他将覆盖容器align-self属性设置的默认对齐方式，center，flex-start，flex-end