![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
4.9 弹性布局——包裹
改变Flex项目在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。
【例4.11】包装案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P66_2183.jpg?sign=1739277532-WyqqPANprmGJ6xRHYcTRzDvdQivextUG-0-ff161d4e787bd6ca7913ee5732fcb76a)
在IE 11浏览器中运行结果如图4-11所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P66_2185.jpg?sign=1739277532-Rasxq8Oikt9MSW4Tbfof5IWrJA7OOs7p-0-45d2ed9974fe1b57b11bec34ec838db9)
图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P66_2189.jpg?sign=1739277532-5acV3CQiJmBmbVZ0OHON6jYXxTgdSlPz-0-5b9fe2f7972c7d1647712f65b243da1b)
改变Flex项目在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。
【例4.11】包装案例。
在IE 11浏览器中运行结果如图4-11所示。
图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下: