CSS flex 布局(入门)- flex-wrap 换行

flex-wrap 属性设置在容器上,当项目一行或者一列排不下时,设置如何换行。

若项目的排列方向为 flex-direction: row 所有的项目排成一排。当所有项目的总宽度大于容器的宽度时, 项目的宽度默认会等比例缩小。如果不想被压缩,那么可设置项目如何换行。

flex-wrap: wrap;

它的值有:

  • nowrap:不换行 (默认)。
  • wrap :换行,第一行在上方。
  • wrap-reverse :换行,第一行在下方。
flex-wrap: wrap 3-1

flex-wrap 的效果会随着 flex-direction 值的不同而改变,查看实例看区别

兼容性 :

属性 IE Chrome Firefox Safari Opera
flex-wrap 10.0 -ms-
11.0
21.0 -webkit-
29.0
18.0 -moz-
28.0
6.1 -webkit-
9.0
17.0

JavaScript 语法:

object.style.flexWrap="wrap";