Flex布局
概念
弹性盒子由容器和子元素组成。
容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
子元素(flex item)：容器中的每个单元称为子元素
容器中存在两条轴：主轴（默认水平方向）和交叉轴（默认垂直方向）
设置容器的属性
- flex-direction：设置容器中元素的排列方式
- row(默认值)：横向布局（主轴水平），起点在左端
- row-reverse：横向布局（主轴水平），起点在右端
- column：纵向布局（主轴垂直），起点在上端
- column-reverse：纵向布局（主轴垂直），起点在下端
- flex-wrap：设置容器中元素如何换行
- nowrap(默认值)：不换行
- wrap：空间不够的话自动换行，第一行在上方
- wrap-reverse：空间不够的话自动换行，第一行在下方
- flex-flow：flex-direction和·flex-wrap
- justify-content：设置容器中元素在主轴上的对齐方式
- flex-start(默认值)：伸缩项目与父容器左端靠齐
- flex-end：与父容器右端靠齐
- center：在主轴居中
- space-between：第一个子组件位于父容器左端，最后一个子组件位于父容器最右端，然后平均分配在父容器水平方向上
- space-around：所有子组件平均分配在父容器的水平方向上，左右都有留空隙
- align-items：定义容器中元素在侧轴上的对齐方式
- flex-start：默认值。项目位于容器的开头。
- flex-end：项目位于容器的结尾。
- center：项目位于容器的中心。
- space-between：项目位于各行之间留有空白的容器内。
- space-around：项目位于各行之前、之间、之后都留有空白的容器内。
- inherit：从父元素继承该属性。
- initial：设置该属性为它的默认值。
设置子元素的属性
- flex-basis：设置元素的宽度
- order：设置元素顺序，值越小越靠前
- align-self：设置元素对齐方式
- flex-grow：设置元素放大比例
- flex-shrink：设置元素缩小比例
- flex：flex-grow, flex-shrink 和 flex-basis的简写
注意事项
1. 设置了display:flex后，元素的float、clear和vertical-align属性将失效