首先，说下flex的布局概念
flex是一种一维的布局模型，给flex盒子中的子元素提供空间分布和对齐的能力，也可以通过扩展和收缩来最大限度地填充可用空间。
其次，flex的结构
flex包括flex容器（Container）、flex子元素（Item）、排列方向（direction），其中container相当于包裹的父盒子；direction则指的是子元素的布局信息，即主轴，包括row、row-reverse、column、column-reverse
之后，结构中的属性
container: 常用的属性包括flex-wrap（是否换行）、justify-content（横轴上的位置布局 center等）、align-item（纵轴上的位置布局 center、baseline等）
Item: 常用的属性包括order（排列顺序索引，默认为0，可设置负数保持总是在前）、flex（flex-grow,flex-shrink,flex-basis的简写：flex-grow默认为0，表示计算基准值后的剩余空间按比例分配；flex-shrink默认为1，表示计算基准值后的溢出空间按比例分摊减去；flex-basis默认为auto，即主轴空间的基准值，为auto则使用width做基准值，为具体px值或百分比时则忽略width）
最后，使用场景
- 两栏布局，左边定宽，右边自适应；上下两行，上行定高，下行自适应；
- 绝对居中：垂直居中+水平居中，justify-content+align-item都为center
使用时注意事项
- webkit内核的浏览器如safari设置-webkit前缀：display:-webkit-flex;
- 设置了flex之后，子元素中float、clear、vertical-align属性失效
