flex-wrap

  • 版本:CSS3
  • 继承性:无
flex-wrap属性在CSS新弹性盒模型中是比较常用的,本文将带你深入理解flex-wrap属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上flex-wrap的演示案例,希望能够对你有所帮助。

flex-wrap的具体语法

flex-wrap:nowrap | wrap | wrap-reverse

默认值nowrap

适用于:弹性盒模型容器

继承性:无

flex-wrap的取值介绍

nowrap:
当子元素溢出父容器时不换行。
wrap:
当子元素溢出父容器时自动换行。
wrap-reverse:
反转 wrap 排列。

flex-wrap的使用说明

设置或检索弹性盒模型对象的子元素超出父容器时是否换行。
  • 对应的脚本特性为flexWrap

flex-wrap的浏览器兼容性

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
较早版本 6.0-10.0 4.0-25.0 5.1.7-6.0 21.0-28.0-webkit- 9.5-12.0
较新版本 11.0 7.0-webkit- 29.0 12.1

flex-wrap的完整演示案例

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册