![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=1738858425-HkpBti75yfqMlZxr0QuMolDJfaqDByZv-0-0c7c49ad5565d369bf7a5adf8f3e1eb2)
在IE 11浏览器中运行结果如图4-13所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2244.jpg?sign=1738858425-chC7Htd1mbTuvOtejGzeDrvGVmewx5sr-0-d7ef77b64402318c84585af65c0e23ab)
图4-13 对齐内容效果
align-content-between效果如图4-14所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2248.jpg?sign=1738858425-BbzyqrxsPROetM7Lw0qqjREfP4MVFO2w-0-f9a13cf0cd38663799e3e4f7ea8cc726)
图4-14 align-content-between效果
align-content-around效果如图4-15所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2252.jpg?sign=1738858425-Bs3Sw7zU5FEq5BUOpFkntVaQTd3hZZTf-0-f553501dd8d65b95ab651a0899f09091)
图4-15 align-content-around效果
align-content-stretch效果如图4-16所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2256.jpg?sign=1738858425-cgiwUNgtBAZROZuFMUBXEaRIAVQpGHiK-0-4fb411b85c439873781cc895279e4bbe)
图4-16 align-content-stretch效果
对齐内容布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P70_2268.jpg?sign=1738858425-KSIARFzPW4yyR9oBfYKT1ZQ6lLEP9x61-0-46a0f39e81e369f9e244dcc92f342666)