CSS容器-弹性布局
1：什么是弹性布局？
是一种布局方式，主要解决某元素中的“子元素”的布局方式，为布局提供了最大的灵活性
2：弹性布局
要实现布局效果的子元素，称为项目
主轴
项目们排列方向的一根轴，称之为主轴
如果项目按 X 轴排列（横向排列），那么 X 轴就是主轴
如果项目按 Y 轴排列（纵向排列），那么 Y 轴就是主轴
交叉轴
与主轴垂直交叉的轴称之为交叉轴
如果 X 轴是主轴，那么 Y 轴就是交叉轴
如果 Y 轴是主轴，那么 X 轴就是交叉轴
3：语法
1：flex 容器
将元素变为flex 容器后，所有的子元素都将变成 flex 项目，都允许按照弹性布局方式排序
属性：display
取值：1：flex: 将块级元素变成容器
2： inline-flex : 将行内元素变成容器
注意：1：元素设置为 flex 容器后，子元素的 float，clear， verticla-align将失效
2：容器的 text - align 属性会失效
2：容器属性
1：flex - direction
指定容器的主轴及其排序方向
取值：
1：row 默认值： 即主轴为 x 轴，起点是左端
2：row - reverse：主轴为x轴，但起点在右端
3: column：主轴为 y 轴，起点在顶端
4：column-reverse: 主轴为Y 轴，起点在底端
2：flex-wrap
当一个主轴排列不下的时候所有项目的时候，需要进行指定换行
取值：1：nowrap：默认值，即空间不够时，也不换行，但项目会自动缩小项目原本的高度和宽度
2: wrap：自动换行，不会缩小项目原本的宽度和高度
3：wrap- reverse：换行反转
3：flex - flow
是 flex - direction 和 flex-wrap 的缩写形式
取值： 1：row nowrap 默认值
2： direction wrap
4： justify - content
定义项目在主轴上的对齐方式
取值：1：flex-start ：在主轴的起点对齐
2：flex-end：在主轴的终点对齐
3：center：在主轴居中对齐
4：space - between：在容器中两端对齐
5：space - around：每个项目两端的间距相同
5：align - items
项目在交叉轴上的对齐方式
取值：1：flex - start ：在交叉轴起点对齐
2：flex - end：在交叉轴的终点对齐
3：center：在交叉轴居中对齐
4：baseline：交叉轴上的基线对齐
5：stretch：如果项目没有设置尺寸，在交叉轴上会占满所有的空间。
3：项目属性
该组属性只能设置在某一个项目上，只控制一个项目，是不会影响容器其他项目
1：order
定义项目的排序，值越小，越靠近起点，默认值为0
可以利用 order 来定义项目的排列和位置
2：flex - grow
定义项目的放大比例，如果容器有足够的空间，项目将会被放大
取值：整数数字， 无单位，默认为0， 不放大，取值越大，占的空间越多
3：flex - shrink
定义项目的缩小比例，即容器空间不足时，项目将按照比例缩小
取值：默认值为1，空间不足时，则等比例缩小，
取值为0，则不缩小
4：align - self
定义当前项目在交叉轴上的对齐方式
取值： 1：flex - start
2: flex - end
3： center
4: baseline
5：stretch
6：auto 自动继承父元素的 align -items 属性
以下是 CSS 的容器布局示例：
容器弹性布局
以下是容器的弹性布局效果图：这种布局经常用于电商的banner，或者企业网站的banner
