2-flex 容器與項目 · 前端教學筆記[更新中...]

# flex 容器與項目 ## 1. `display`屬性 | 序號 | 屬性值 | 描述 | 備注 | | ---- | -------------- | ------------------ | ---------------------------- | | 1 | `flex;` | 創建 flex 塊級容器 | 內部子元素自動成為 flex 項目 | | 2 | `inline-flex;` | 創建 flex 行內容器 | 內部子元素自動成為 flex 項目 | ## 2. flex 容器與項目特征 | 序號 | 容器/項目 | 默認行為 | | ---- | ------------------------ | ------------------------------------------- | | 1 | 容器主軸 | 水平方向 | | 2 | 項目排列 | 沿主軸起始線排列(當前起始線居左) | | 3 | 項目類型 | 自動轉換"行內塊級"元素,不管之前是什么類型 | | 4 | 容器主軸空間不足時 | 項目自動收縮尺寸以適應空間變化,不會換行顯示 | | 5 | 容器主軸存在未分配空間時 | 項目保持自身大小不會放大并充滿空間 | > 行內級 flex 容器極少用動,后面教程均以塊級 flex 容器為例進行教學 --- ## 2. 示例 ![](https://img.kancloud.cn/c7/9a/c79a0f1a67caece2f97169c055674ccd_397x238.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 { /* 寬度300:主軸空間不足 */ width: 300px; /* 寬度500px,主軸空間富余 */ /* width: 500px; */ height: 150px; } /* flex容器 */ .container { display: flex; } /* 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> ```