
上QQ阅读APP看书,第一时间看更新
4.11 对齐内容
使用Flexbox容器上的align-content通用样式定义,可以将Flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。
【例4.13】对齐内容案例。

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

图4-13 对齐内容效果
align-content-between效果如图4-14所示。

图4-14 align-content-between效果
align-content-around效果如图4-15所示。

图4-15 align-content-around效果
align-content-stretch效果如图4-16所示。

图4-16 align-content-stretch效果
对齐内容布局也可以添加响应式的设置,响应式类如下:
