- Bootstrap从入门到项目实战
- 李爱玲
- 118字
- 2025-02-23 08:23:42
4.9 弹性布局——包裹
改变Flex项目在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。
【例4.11】包装案例。

在IE 11浏览器中运行结果如图4-11所示。

图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下:

改变Flex项目在Flex容器中的包裹方式(可以实现弹性布局),其中包括无包裹.flex-nowrap(浏览器默认)、包裹.flex-wrap,或者反向包裹.flex-wrap-reverse。
【例4.11】包装案例。
在IE 11浏览器中运行结果如图4-11所示。
图4-11 包装效果
包装布局也可以添加响应式的设置,响应式类如下: