4.3 内容排列

使用Flexbox弹性布局容器上的justify-content-*通用样式可以改变Flex项目在主轴上的对齐（以x轴开始，如果是flex-direction: column，则以y轴开始），可选方向值包括start（浏览器默认值）、end、center、between和around，说明如下。

■ justify-content-start：项目位于容器的开头。

■ justify-content-center：项目位于容器的中心。

■ justify-content-end：项目位于容器的结尾。

■ justify-content-between：项目位于各行之间留有空白的容器内。

■ justify-content-around：项目位于各行之前、之间、之后都留有空白的容器内。

【例4.4】内容排列案例。

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

图4-4 内容排列效果

内容排列布局也可以加响应式的设置，响应式类如下：