CSS盒子模型 - 弹性盒模型

弹性元素

- display：flex

- 可以将写了display：flex的元素叫做弹性父元素，它的直系子元素叫做弹性子元素

默认弹性情况

- 当元素开启弹性布局后，浏览器会出现一些默认弹性情况

1. 生成一条主轴

- 主轴方向从左到右

2. 生成一条侧轴

- 侧轴方向从上到下

- 侧轴永远垂直于主轴

3. 弹性子元素在主轴的排序方式

- 默认从主轴开始方向向结束方向排列

4. 尺寸问题

- 当弹性子元素不设置宽高的时候

        - 主轴方向的尺寸默认是元素内容的尺寸，如果没有内容就是0

- 侧轴方向的尺寸默认是侧轴长度，也就是父元素盒子的长度

5. 弹性元素排列

- 默认用不换行

        - 当子元素超过父亲元素范围的时候，会默认挤压子元素内容区域

- 当无法继续挤压直接溢出父元素盒子

6. 换行

- 当允许换行以后，还多少行出现多少个临时侧轴

- 多条临时侧轴的长度是一致的

弹性父元素的样式

1. 主轴方向调整

- flex- direction

- 取值

- 默认 row 横向从左到右，侧轴从上到下

        - 反转 row- reverse 横向从右到左，侧轴从上到下

        - 纵向 column 纵向从上到下，侧轴从左到右

        - 反转 column-reverse 纵向从下到上，侧轴从左到右

- 注意⚠️：主轴可以有四个方向选择，侧轴只能是从左到右 或