本文系转载，原文地址是：https://juejin.cn/post/7065296076995035166
写在前面
弹性盒子模型即FlexBox，也就是我们常说的flex布局，现在flex布局已经是前端的主流布局方案，早就是前端必会的内容了，接下来我们一起来看一下弹性盒子模型。【推荐：css视频教程】
相关概念
CSS3新增的弹性盒子模型是一个完整的模块，涉及的样式属性较多。首先，对弹性盒子模型的相关概念完成基本的了解。
- 伸缩容器(flex container)：包裹伸缩项目的父元素。
- 伸缩项目(flex item)：伸缩容器的每个子元素。
- 轴(axis)：每个弹性盒子模型拥有两个轴。
- 主轴(main axis)：伸缩项目沿其一次排列的轴被称为主轴。
- 侧轴(cross axis)：垂直于主轴的轴被称为侧轴。
- 方向(direction)：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。
- 尺寸(dimension)：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。
- 对应主轴的称为主轴尺寸。
- 对应侧轴的称为侧轴尺寸。
定义弹性盒子模型
CSS3中想要设置为弹性盒子模型的话，需要通过display样式属性设置值为flex或inline-flex即可。
display: flex; /* 值 flex 使弹性容器成为块级元素。 */ /* 或者 */ display: inline-flex; /* 值 inline-flex 使弹性容器成为单个不可分的行内级元素。 */
