4.1 定义弹性盒子

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

采用Flex布局的元素，被称为Flex容器，简称“容器”。其所有子元素自动成为容器成员，称为Flex项目（Flex item），简称“项目”。

应用display工具创建一个Flex box容器，并将直接子元素转换为Flex项。Flex容器和项目可以通过附加的Flex属性进行进一步修改。

在Bootstrap 4中有两个类来创建弹性盒子，分别为.d-flex和.d-inline-flex。.d-flex类设置对象为弹性伸缩盒子；.d-inline-flex类设置对象为内联块级弹性伸缩盒子。

Bootstrap中定义的.d-flex和.d-inline-flex样式类：

下面使用这两个类分别创建弹性盒子容器，并设置三个弹性子元素。

【例4.1】弹性盒子容器案例。

在IE 11浏览器中运行结果如图4-1所示。

图4-1 弹性盒子容器效果