CSS flex-wrap 属性

CSS flex-wrap 属性指定 flex 元素单行显示还是多行显示 。如果允许换行,这个属性允许你控制行的堆叠方向。


实例

使弹性项目在需要时换行:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #main {
  6. width: 200px;
  7. height: 200px;
  8. border: 1px solid #c3c3c3;
  9. display: flex;
  10. flex-wrap: wrap;
  11. }
  12. #main div {
  13. width: 50px;
  14. height: 50px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>flex-wrap 属性</h1>
  20. <div id="main">
  21. <div style="background-color:coral;">A</div>
  22. <div style="background-color:lightblue;">B</div>
  23. <div style="background-color:khaki;">C</div>
  24. <div style="background-color:pink;">D</div>
  25. <div style="background-color:lightgrey;">E</div>
  26. <div style="background-color:lightgreen;">F</div>
  27. </div>
  28. <p><b>注释:</b>Internet Explorer 10 以及更早的版本不支持 flex-wrap 属性。</p>
  29. </body>
  30. </html>

定义和用法

flex-wrap 属性规定弹性项目是否应换行。

注释:如果元素不是弹性项目,则 flex 属性无效。

默认值:nowrap
继承:
动画制作:不支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.flexWrap="nowrap"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
flex-wrap29.021.0 -webkit-11.028.018.0 -moz-9.06.1 -webkit-17.0

CSS 语法

  1. flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
属性值
描述
nowrap默认值。规定弹性项目不会换行。
wrap规定弹性项目会在需要时换行。
wrap-reverse规定弹性项目会在需要时换行,以反方向。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

相关页面

CSS3 教程: CSS3 弹性框

CSS 参考手册:flex-basis 属性

CSS 参考手册:flex-direction 属性

CSS 参考手册:flex-flow 属性

CSS 参考手册:flex-grow 属性

CSS 参考手册:flex-shrink 属性

分类导航