原文链接：https://juejin.im/post/5cce975ae51d456e8b07de03
何为Flex布局
传统的布局解决方案，是基于盒子模型，利用position + margin + float来完成；但这种布局方案对部分布局方式很不友好，比如水平垂直居中
Flex布局是W3C提供的一种新型布局解决方案，利用弹性盒子布局，可以做到响应式设计，更好的适配PC端和移动端
Flex基本概念
采用Flex布局的元素成为Flex容器（flex container），内部元素成为Flex项目（flex item）
Flex容器内部分为主轴（main axis）和交叉轴（cross axis）；项目分为主轴（main size）和交叉轴（cross size）
- 块元素设置flex： display: flex;
- 行内元素设置flex：display：inline-flex;
Flex容器属性
flex-direction
决定内部项目在主轴上如何排列
flex-direction: row | row-reverse | column | column-reverse
- row：项目从坐向右排列
- row-erverse：项目从右向左排列
- column：项目从上往下排列
- colum-reverse：项目从下往上排列
flex-warp
决定内部项目的换行方式
flex-warp: nowarp | warp | warp-reverse
- nowarp: 不换行
- warp：换行，换行元素在下方
- warp-reverse：换行，换行元素在上方
flex-flow
flex-direction和flex-warp的简写形式，默认是row nowarp
flex-flow: < flex-direction > < flex-wrap >;
justify-content
决定项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around
- flex-start：左对齐
- flex-end：右对齐
- center：居中对齐
- space-between：两端对其，项目之间间隔相等
- space-around：每个项目两侧间隔相等，项目之间的间隔比项目与边框间隔大一倍
aline-items
决定项目在交叉轴上的对齐方式
aline-items: flex-start | flex-end | center | baseline | stretch
- flex-start：交叉轴起点对其，上对其
- flex-end：交叉轴终点对其，下对齐
- center：垂直居中
- baseline：项目的第一行文字基线对齐
- stretch（默认值）：如果项目未设置高度或auto，则项目高度填满容器
aline-content
定义了多轴线的对其方式，如果只存在一条轴线，则不起作用
aline-content: flex-start | flex-end | center | stretch | space-between | space-around
Flex项目属性
order
定义项目的排列顺序，数值越小排列越靠前，默认为0，负值有效
flex-grow
定义项目的放大比例，默认为0
flex-shrink
定义了项目的缩小比例，默认为1；负值无效
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间，默认值为项目本来大小
flex
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。