单纯记录
推荐文章链接：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)
行内元素也可以使用flex布局（display:inline-flex）
小tips:
设为flex布局后，子元素的float,clear和vertical-align属性将失效。
容器属性：
- 1.flex-direction(子元素排列方式)
value:row,row-reverse,column,column-reverse - 2.flex-wrap(是否换行，以及如何换行)
value:nowrap(默认)不换行
wrap:换行，第一行在上方
wrap-reverse：换行，第一行在下方 - 3.flex-flow:flex-direction和flex-wrap的简写
默认值（row nowrap） - 4.justify-content(项目在主轴对齐方式)
flex-start：左对齐
flex-end:右对齐
cneter:居中
space-between:两端对齐，项目之间间隔相等
space-around：项目两侧间隔相等 - 5.align-item(项目在交叉轴对齐方式)
flex-start：交叉轴起点对齐
flex-end:交叉轴终点右对齐
cneter:交叉轴中点对齐
baseline：项目第一行文字基线对齐
stretch（默认）未设置项目高度或设置成auto时，占满整个容器。 - 6.align-content(多轴线对齐方式，与交叉轴)
项目属性：
- 1.order(项目排列顺序，数值越小越靠前，可使用负数)
- 2.flex-grow（项目放大比例，默认为0，有剩余空间也不放大）
- 3.flex-shrink(项目缩小比例，默认为1，即空间不足项目等比缩小)
- 4.flex-basic(分配多余空间之前，项目占据主轴线空间，默认值为auto，即项目本身大小)
- 5.flex(flex-grow,flex-grow,flex-basic)的缩写。flex:1无敌自适应
- 6.align-self:允许单个项目与其他项目不同，可覆盖align-item，默认值为auto,继承父元素align-items,没有父元素等同于stretch.
