弹性盒子的

### 1.1 什么是弹性盒子？

- 弹性盒子是CSS3的一种新的布局模式。

  引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行 排列、对齐和分配空白空间

- - 操作方便，布局简单，移动端使用广泛

  - PC端浏览器支持情况较差

  - IE11或更低版本中，不支持或部分支持

  - 在盒模型中较为灵活

- 弹性盒模型的内容包括：弹性容器、弹性子元素——项目

- 原理：为父元素设置flex属性，控制子元素的位置及排列方式

- 应用场景 : 移动端

### 1.2 设置弹性盒子——display属性

- display: flex; 将对象作为弹性伸缩盒显示

- display: inline-flex; 将对象作为内联块级弹性伸缩盒显示

- 注意：

> 将容器设置为flex布局之后，子元素中的float、clear、vertical-align属性都会失效

>

> 弹性子元素-类似于行内块元素，如果不设置宽高，由内容撑开；即使是行内元素也可以设置宽高

### 1.3 基本概念