5-flex 容器主軸與項目換行簡寫 · 前端教學筆記[更新中...]

# flex 容器主軸與項目換行簡寫 ## 1. `flex-flow`屬性 - `flex-flow`是屬性`flex-direction`和`flex-wrap`的簡寫 - 語法: `flex-flow: flex-direction flex-wrap` | 屬性值 | 描述 | | ------------------ | -------------------- | | `row nowrap`默認值 | 主軸水平, 項目不換行 | --- ## 2. 示例 ![](https://img.kancloud.cn/d7/84/d7846201d76b0077cc0ac56d082be55b_892x544.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容器主軸與項目換行簡寫*/ .container { /* 默認: 主軸水平, 項目不換行 */ flex-flow: row nowrap; /* 主軸水平,項目換行 */ flex-flow: row wrap; /* 主軸垂直, 項目不換行 */ flex-flow: column nowrap; /* 主軸垂直, 項目換行 */ flex-flow: column wrap; /* 項目反向排列與反向換行,大家自行測試 */ } /* 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> ```