3-flex 容器主轴方向 · 前端教学笔记[更新中...]

# flex 容器主轴方向 ## 1. `flex-direction`属性 | 序号 | 属性值 | 描述 | | ---- | ---------------- | ------------------------------------- | | 1 | `row`默认值 | 主轴水平: 起始线居中,项目从左到右显示 | | 2 | `row-reverse` | 主轴水平:起始线居右, 项目从右向左显示 | | 3 | `column` | 主轴垂直: 起始线居上,项目从上向下显示 | | 4 | `column-reverse` | 主轴垂直: 起始线居下,项目从下向上显示 | --- ## 2. 示例 ![](https://img.kancloud.cn/80/19/8019d57f183f866fdbc9506bdb668dc3_876x520.jpg) ```html <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>flex容器主轴方向</title> <style> /* 容器尺寸 */ .container { width: 300px; height: 150px; } /* flex容器 */ .container { display: flex; } /* flex容器主轴方向*/ .container { /* 默认: 主轴水平,起始线居中,项目从左到右显示 */ flex-direction: row; /* 主轴水平, 起始线居右, 项目从右向左显示 */ flex-direction: row-reverse; /* 主轴垂直: 起始线居上,项目从上向下显示 */ flex-direction: column; /* 主轴垂直: 起始线居下,项目从下向上显示 */ flex-direction: column-reverse; } /* flex项目 */ .item { width: 100px; height: 50px; background-color: lightcyan; font-size: 1.5rem; } </style> </head> <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div> </body> </html> ```