前言：大家都知道flex的使用，那就是弹性布局，在我们工作中，当排列盒子的时候我们会经常使用到它的，那么今天趁着自己空闲时间来总结一下关于flex的用法。flex不仅经常用到，还是我们面试的时候会问到的一道面试题。
display:flex是我们经常写的，这句代码就是告诉浏览器弹性布局的意思，在display:flex的基础上flex还有那些特性呢？
1. flex-direction:意思是弹性布局的方向 direction：指示，指导的意思（在这里就是告诉,浏览器项目的排列方式）
flex-direction:row (水平方向，起点是从左边开始）
flex-direction:row-reverse (水平方向，从右边开始，reverse这是js中将数组反过来的方向）
flex-direction:column (垂直方向，从上面开始）
flex-direction:column-reverse(垂直方向，从下面开始）
2. flex-wrap:这个意思是盒子是否在一条线上
flex-wrap:nowarp 表示不换行
flex-wrap:wrap 换行，第一行在上面
flex-wrap:wrap-reverse 换行，第一行在下面
flex-flow:是flex-direction和flex-wrap的简写，他们的默认值是 row 、nowrap
3. justify-content:代表的是项目在水平方向上的对齐方式
justify-content:flex-start 左对齐
justify-content:flex-end 右对齐
justify-content:center 水平居中
justify-content:space-between 两端对齐，项目之间的间隔相等
justify-content:space-around 每个项目两侧的间距相等
4. align-items 在项目交叉轴上的对齐方式 align-content 的用法与align-items相同
align-items:flex-start 在交叉轴的起点对齐
align-items:flex-end 交叉轴终点对齐
align-items:center 垂直方向，中间
align-items:baseline 项目第一行文字的基线对齐
align-items:stretch (默认值。当没有设置高度或者设置了自适应，那么就会沾满整个容器）
