弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

弹性容器外及弹性子元素内是正常渲染的。

弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

flex-direction属性

指定了弹性容器中子元素的排列方式

flex-wrap属性

设置弹性盒子的子元素超出父容器时是否换行

justify-content属性

设置弹性盒子元素在主轴（横轴）方向上的对齐方式

align-items属性

定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

align-content属性

在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项