前言：flex布局永远滴神！
1.CSS盒子弹性布局
🤤弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。——MDN CSS 弹性盒子布局
但是 flexbox 本质上是一种一维的布局，是因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列，以上说的通过嵌套处理两个维度上的布局本质上还是处理了两个一维的布局。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。——MDN flex 布局的基本概念
2.flex布局
😎😎😎😎😎
2.1 flex布局属性
| 属性 | 描述 | 值 | 默认值 | 作用对象 |
|---|---|---|---|---|
| flex-direction | 定义了flex容器的主轴的方向(正方向或反方向) | row，row-reverse，column，column-reverse | row | flex容器 |
| flex-wrap | 项目太大而无法全部显示在一行中，可以通过设置flex-wrap进行换行显示 | nowrap，wrap，wrap-reverse， | nowrap | flex容器 |
| flex-flow | flex-direction 和 flex-wrap 组合简写属性 flex-flow | 上面两个属性值进行组合 | row nowrap | flex容器 |
| align-items | flex-direction 和 flex-wrap 组合简写属性 flex-flow | 上面两个属性值进行组合 | row nowrap | flex容器 |
| justify-content | flex-direction 和 flex-wrap 组合简写属性 flex-flow | 上面两个属性值进行组合 | row nowrap | flex容器 |
| align-content | flex-direction 和 flex-wrap 组合简写属性 flex-flow | 上面两个属性值进行组合 | row nowrap | flex容器 |
| flex-grow | 为整数时，以 flex-basis 为基础，沿主轴方向增长尺寸 | number | 0 | flex子项上 |
| flex-shrink | 处理flex子项收缩的问题 | number | 1 | flex子项上 |
| flex-basis | 定义flex子项的空间大小 | auto，number | auto | flex子项上 |
| flex | flex-grow，flex-shrink，flex-basis组合简写属性 | 单元格 | 单元格 | flex子项上 |
| order | flex-grow，flex-shrink，flex-basis组合简写属性 | 单元格 | 单元格 | flex子项上 |
| align-self | flex-grow，flex-shrink，flex-basis组合简写属性 | 单元格 | 单元格 | flex子项上 |
参考文档：