HTML CSS 弹性布局

我们的常规布局都在控制盒子的一些居中，或者等间距等比例来进行排序的时候，使用常规的盒模型加浮动来布局会很麻烦，并且也不太容易能调整出一个好的比例。接下来我们来学习一下弹性布局

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 排列顺序

这个属性是写在子级的，表示的是子级的排列顺序，值越小排名越高