9-flex 項目主軸排列順序 · 前端教學筆記[更新中...]

# flex 項目主軸排列順序 ## 1. `order`屬性 | 序號 | 屬性值 | 描述 | | ---- | --------- | --------------------------- | | 1 | `0`默認值 | 按書寫順序顯示 | | 2 | `n` | 值越大,越靠后顯示, 允許負數 | --- ## 2. 示例 ![](https://img.kancloud.cn/a9/bd/a9bd0f5d11a4365b5312356f2980ac02_375x218.jpg) ```html <!DOCTYPE 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項目 */ .item { width: 50px; height: 50px; background-color: lightcyan; font-size: 1.5rem; /* 默認值0: 在主軸上按書寫順序排列 */ order: 0; } /* 自定義項目排列順序: 值越小, 越靠前(即起始線方向) */ .item:first-of-type { background-color: lightgreen; order: 2; } .item:nth-of-type(2) { background-color: yellow; order: 1; } .item:nth-of-type(3) { background-color: pink; order: 3; } .item:last-of-type { background-color: lightskyblue; order: -1; } </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> ```