我们在写项目的过程中会遇到很多样式布局的问题大多数可以可以使用弹性布局来实现下面就让我们一起来了解一下；
display:flex/inline-flex
首先我们需要声明这个盒子要使用弹性盒模型，但是大家要注意，这个声明是要写道父级的，就是比如我们要让子级使用弹性盒模型，那么我们需要在父级中声明
只要我们声明了盒子是弹性盒子，子级的排序便会同排显示
1.flex-direction 检索子盒子的排列顺序
既然是子盒子，那么同样的这个是需要我们在父级声明的。
row，是横向，盒子从左到右以此排列。
row-reverse 盒子从右到左以此排列
column 是纵向 盒子从上到下以此排列
column-reverse 盒子从下到上以此排列
2.flex-warp 检索子级是否超过父级边界，决定是否换行
同样，这样也是写在夫级的并作用于子级的
nowrap 不换行 也是默认值
wrap 换行
wrap-reverse 反转换行
3.重点：justify-content 检索盒子在X轴方向的对齐方式
写在父级，作用于子级
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端在左右分布，中间的元素居中
space-around 等间分布
4.align-items 检索盒子在Y轴方向的对齐方式
写在父级，作用于子级
flex-start 置顶
flex-end 置底
center 居中
baseline 与基线对齐
5.align-content 检索盒子在换行时的对齐方式
写在父级，作用于子级
flex-start 置顶
flex-end 置底
center 居中
space-between 上下置顶置底，中间的元素居中
space-around 纵向平分空间，各行以最大方式显示
6.order 排列顺序
这个属性是写在子级的，表示的是子级的排列顺序，值越小排名越高