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

# flex 容器主軸項目換行 ## 1. `flex-wrap`屬性 | 序號 | 屬性值 | 描述 | | ---- | -------------- | ------------------------------- | | 1 | `nowrap`默認值 | 項目不換行: 單行容器 | | 2 | `wrap` | 項目換行: 多行容器,第一行在上方 | | 3 | `wrap-reverse` | 項目換行: 多行容器,第一行在下方 | --- ## 2. 示例 ![](https://img.kancloud.cn/8f/c5/8fc5fe74033770f7cbc5ec4a458b604e_874x554.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-direction: row; /* 主軸水平, 起始線居右, 項目從右向左顯示 */ flex-direction: row-reverse; /* 主軸垂直: 起始線居上,項目從上向下顯示 */ flex-direction: column; /* 主軸垂直: 起始線居下,項目從下向上顯示 */ flex-direction: column-reverse; } /* flex容器主軸項目換行*/ .container { /* 默認: 項目不換行,如容器空間則自動收縮 */ flex-wrap: nowrap; /* 允許項目換行,空間不足時分成多行顯示 */ flex-wrap: wrap; /* 允許項目換行,第一行在下面,反向排列項目 */ flex-wrap: wrap-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> ```