CSS flex-direction 属性

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的,定义了主轴的方向(正方向或反方向)。


实例

以相反的顺序设置 <div> 元素内的弹性项目的方向:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #main {
  6. width: 400px;
  7. height: 400px;
  8. border: 1px solid #c3c3c3;
  9. display: flex;
  10. flex-direction: row-reverse;
  11. }
  12. #main div {
  13. width: 50px;
  14. height: 50px;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <h1>flex-direction 属性</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-direction 属性。</p>
  29. </body>
  30. </html>

定义和用法

flex-direction 属性规定弹性项目的方向。

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

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

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

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

CSS 语法

  1. flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
属性值
描述
row默认值。作为一行,水平地显示弹性项目。
row-reverse等同行,但方向相反。
column作为列,垂直地显示弹性项目。
column-reverse等同列,但方向相反。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

更多实例

结合使用 flex-direction 和媒体查询为不同的屏幕尺寸/设备创建不同的布局:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. * {
  6. box-sizing: border-box;
  7. }
  8. .flex-container {
  9. display: flex;
  10. flex-direction: row;
  11. font-size: 30px;
  12. text-align: center;
  13. }
  14. .flex-item-left {
  15. background-color: #f1f1f1;
  16. padding: 10px;
  17. flex: 50%;
  18. }
  19. .flex-item-right {
  20. background-color: dodgerblue;
  21. padding: 10px;
  22. flex: 50%;
  23. }
  24. /* 响应式布局 - 制作一列布局而不是两列布局 */
  25. @media (max-width: 800px) {
  26. .flex-container {
  27. flex-direction: column;
  28. }
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <h1>响应式弹性框</h1>
  34. <p>"flex-direction: row;" 水平地并排弹性项目(从左到右)。</p>
  35. <p>"flex-direction: column;" 垂直地堆叠弹性项目(从上到下)。</p>
  36. <p><b>请调整浏览器窗口的大小,来查看小于或等于 800 像素时的方向改变。</b></p>
  37. <div class="flex-container">
  38. <div class="flex-item-left">1</div>
  39. <div class="flex-item-right">2</div>
  40. </div>
  41. </body>
  42. </html>

相关页面

CSS3 教程: CSS3 弹性框

CSS 参考手册:flex-basis 属性

CSS 参考手册:flex-flow 属性

CSS 参考手册:flex-grow 属性

CSS 参考手册:flex-shrink 属性

CSS 参考手册:flex-wrap 属性

分类导航