Embedded Files
✅ 使用 display: flex 實作 3 欄 × 2 列 box 排列（含間隔、置中）
✅ 使用 display: flex 實作 3 欄 × 2 列 box 排列（含間隔、置中）
✅ HTML：
✅ HTML：
```html
<div class="container">
<div class="box">Box A</div>
<div class="box">Box B</div>
<div class="box">Box C</div>
<div class="box">Box D</div>
<div class="box">Box E</div>
<div class="box">Box F</div>
</div>
```
✅ CSS：
✅ CSS：
```css
.container {
display: flex;
flex-wrap: wrap; /* ⬅ 允許換行 */
justify-content: center; /* ⬅ 水平置中所有 box */
gap: 10px; /* ⬅ box 間距（需要新瀏覽器） */
width: 340px; /* ⬅ 控制寬度：100px * 3 + 2 * 10px 間距 */
margin: auto; /* ⬅ 讓 container 本身置中 */
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
border: 1px solid #333;
}
```
✅ 如果不使用 gap（舊寫法）：
✅ 如果不使用 gap（舊寫法）：
可改用 margin：
css
複製編輯
.box {
margin: 5px;
}
此時 container 寬度建議改為 max-width: 360px; 或留白多一點讓換行正常。
🧠 關鍵解釋：
🧠 關鍵解釋：
屬性
用途
display: flex
使用彈性排版
flex-wrap: wrap
允許自動換行（關鍵！）
justify-content: center
讓整體內容在容器中水平置中
gap: 10px 或 margin
控制 box 間隔
width 固定
控制每行顯示三個 box
✅ 你會看到：
✅ 你會看到：
mathematica
複製編輯
Box A Box B Box C
Box D Box E Box F
整齊地在 .container 中間顯示！
用 display: flex 搭配 flex-wrap: wrap 這種方式，既保留彈性又不需要學太進階的 grid 語法，非常適合入門實作時使用。
✅ 小筆記（方便日後複習）：
✅ 小筆記（方便日後複習）：
目的
指令
使用彈性排版
display: flex
讓項目可以換行
flex-wrap: wrap
水平置中所有項目
justify-content: center
每個 box 之間有間隔
gap: 10px 或 margin: 5px
控制每行最多顯示幾個
設定 .box 的寬度 + .container 的寬度
當 display: flex 和 flex-wrap: wrap 搭配使用時，裡面的盒子才會在指定空間內自動換行。
否則預設情況下是不會換行的！
🎯 具體解釋：
🎯 具體解釋：
屬性
預設值
說明
display: flex
—
啟動彈性排版模式
flex-wrap
nowrap
預設：不換行，盒子會硬擠一排
flex-wrap: wrap
—
允許自動換行，空間不足會自動跳下一列
✅ 範例（不會換行的錯誤案例）：
✅ 範例（不會換行的錯誤案例）：
css
複製編輯
.container {
display: flex;
/* ❌ 沒有 flex-wrap: wrap; */
width: 300px;
}
若 .box 每個寬 100px，3 個沒問題，但第 4 個開始會「擠爆在同一排」。
✅ 正確方式：
✅ 正確方式：
css
複製編輯
.container {
display: flex;
flex-wrap: wrap; /* ✅ 這行才讓盒子能換行 */
width: 300px;
}
這樣子才會出現：
```mathematica
Box A Box B Box C
Box D Box E Box F
```
🧠 小結：
🧠 小結：
誤解
修正
display: flex 就會自動換行
❌ 錯，必須搭配 flex-wrap: wrap 才會
flex 容器中的盒子會自己調整大小
✅ 某些情況是，但需要搭配 flex-grow / flex-shrink / flex-basis 才能完全控制
Page updated
Google Sites
Report abuse