![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=1739275934-fqsD952j8YO2DyikDKbqk8vtBaFCPaDa-0-2d72068c924581f411650d6a578c0731)
在IE 11浏览器中运行结果如图4-13所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2244.jpg?sign=1739275934-b5wnKQ33s9dN6AoQ7DgXcaL8dZfRUfCJ-0-e9115739503a5302fe10fcb109e7cfbc)
图4-13 对齐内容效果
align-content-between效果如图4-14所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2248.jpg?sign=1739275934-l1f7u4AHJFsRDgrnl8H2uhgTNh7mxUw2-0-8e1430e746723abacaf692d614eff23b)
图4-14 align-content-between效果
align-content-around效果如图4-15所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2252.jpg?sign=1739275934-eamX0WXX6QVLIaZdKuGKEYu3Ah3HGSoJ-0-2d11709c96107b9e0505c568dec177a7)
图4-15 align-content-around效果
align-content-stretch效果如图4-16所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P69_2256.jpg?sign=1739275934-hFiC8odJ1TiNhtRfufYXI7udktLBLTKp-0-7cc393596b304f2f87305a03eecad8b0)
图4-16 align-content-stretch效果
对齐内容布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P70_2268.jpg?sign=1739275934-m1r8oBt0qSdzkitAGuz016ypZe7q998L-0-83467c7896ae92b236bcd8b44f4b3d1c)