![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
4.11 对齐内容
使用Flexbox容器上的align-content通用样式定义,可以将Flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。
【例4.13】对齐内容案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P68_2227.jpg?sign=1738883259-uXliUFfvcyu8zBuBuzXBlOlj6z9DLmyN-0-276c85de75b82369f7bfd03a9aa95cb8)
在IE 11浏览器中运行结果如图4-13所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2244.jpg?sign=1738883259-Z6IMdnBvooe7JMvvxeNuLgmlGz9PP7aX-0-a72c8efc2813904fc3b1d12dbc61df1d)
图4-13 对齐内容效果
align-content-between效果如图4-14所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2248.jpg?sign=1738883259-3saCGTaP3cTtvt2XRmlvxYQU1uBapTvh-0-4853e681c61887722c33e1735eb00f88)
图4-14 align-content-between效果
align-content-around效果如图4-15所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2252.jpg?sign=1738883259-P2pZY1hAMYTKj10HVfmHvguBK38p8uqE-0-94e5887ab59bc99b722c2f01a73d3afb)
图4-15 align-content-around效果
align-content-stretch效果如图4-16所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2256.jpg?sign=1738883259-k3VDX8VX1V4T6wCEs207EAPElAAAT1Ke-0-da4281e7634bad36a172ba83a19d4b9b)
图4-16 align-content-stretch效果
对齐内容布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P70_2268.jpg?sign=1738883259-nJwJi9C5ksg5pwb0IxL2k9ck5xFZxy9G-0-70b1c65b670e976ad1087555b39b3081)