开篇
在项目开发中，设计图的还原是前端开发人员基本功之一，还原少不了布局和适配。项目中我们会遇到各种各样的布局，排版，样式，同一种布局和样式，采用不同的布局方法，其代码量也会有多少差异，适用场景也会不同。
本文主要对flex(FLexible Box)弹性布局知识点进行梳理，flex相比于传统布局在一些特殊布局上具有更好的灵活性，比如垂直居中布局等，本文采用flex布局的元素称为容器，容器中的子元素成员称为子项。
正文开始
使用display来创建弹性容器：
display: flex;
当设置为设置为弹性容器后容器中的子子元素的float,vertical-align属性将失效
在felx布局中主要有两个概念，如图
- 弹性容器(flex container)
- 父容器(flex container)
- 子项(flex items弹性容器的子元素)
- 轴线(axis)
- 主轴(main axis)
- 交叉轴(cross axis)
容器属性归类
flex中的属性主要分为父容器属性,子项属性
父容器属性主要有六个
1.1 flex-direction 规定子项主轴的排列方向
- row (默认值)
子项水平排列，从左向右
- row-reverse
水平反向排列，从右向左
- column
子项垂直排列，从上向下
- column-reverse
子项垂直反向，从下向上
1.2 flex-wrap 规定当父容器中的子项一行排列不下是是否换行
- wrap
超出换行
- nowrap
(默认)超出不换行
- wrap-reverse
超出换行并反向排列
1.3 flex-flow flex-direction和flex-wrap的复合写法
1.4 justify-content
规定子项和剩余空间的分配方式
- flex-start
子项沿主轴开始的位置排列，剩余空间分配在最后一个子容器后面
- center
子项居中排列，剩余空间均分在第一个子项前和最后一个子项后
- flex-end
子项沿主轴排列，最后一个子项在主轴结束位置，剩余空间分配在第一个子项之前
- space-between
子项两端对齐排列，剩余空间平均分配给两个子项之间
- space-around
子项平均排列，剩余空间平均分配给子项两端，两边相邻子项的与父容器的间距是子项间距的一半
- space-evenly
子项平均/平滑分布，剩余空间分配方式为均等分再子项周围(兼容性较差)
1.5 align-items 规定子项沿交叉轴的排列方式
- flex-start
子项沿交叉轴开始的位置排列，剩余空间分配在每一个子项的底部
- center
子项居中排列，剩余空间均分在每一个子项的上下部分
- flex-end
子项交叉轴结束排列，剩余空间分配在每一个子项顶部
- baseline
子项基于文字的基线对齐
- stretch
未设置高度的子项会被拉伸铺满整个容器高度
1.6 align-content 定义多个轴线的对齐方式
- flex-start
沿开始位置排列
- center
居中对齐
- flex-end
沿结束位置排列
- space-between
两端对齐
- space-around
平均分布
- stretch
拉伸平铺
子项属性
1.1 order
设置子项的排列顺序，数值越小越靠前，默认值为0
1.2 flex
设置子项所占剩余空间的比例
1.3 align-self 设置指定子项的排列方式，设置会覆盖掉align-itmes
-
auto
-
flex-start
-
center
-
flek-end
-
stretch
-
baseline
