- Bootstrap从入门到项目实战
- 李爱玲
- 118字
- 2021-03-24 20:36:53
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=1738941115-nQRqqvUwPuWns14tMIid2Rw9IEl1siKw-0-d58ff82313d2cdf4a64c6c1bdc64423a)
在IE 11浏览器中运行结果如图4-11所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P66_2185.jpg?sign=1738941115-UUGjMGDyHjSm8tmm9BoHc5Cu8pLWwno7-0-4b18143c02c5025811ac55f21ef2633c)
图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P66_2189.jpg?sign=1738941115-4PWzTuMBNh0H98ne78JQAOVCc1FIGTjW-0-9e517a1d5a0e09b1e63212cdc83100c1)
改变Flex项目在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。
【例4.11】包装案例。
在IE 11浏览器中运行结果如图4-11所示。
图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下: