文章目錄
- 使用 `display: flex` 實現動態布局：每行兩個 item，單數時最后一個占滿整行 🎯
- 一、需求分析
- 二、實現思路
- 三、代碼實現
- 1. HTML 結構
- 2. CSS 樣式
- 關鍵點解析：
- 四、效果演示
- HTML 示例：
- 效果：
- 五、完整代碼
使用 display: flex 實現動態布局：每行兩個 item，單數時最后一個占滿整行 🎯
這兩天看到一個面試題有感而發，面試題如下
在前端開發中，靈活布局是一個常見的需求。今天我們來探討如何使用 display: flex 實現一個動態布局：每行顯示兩個 item，間隔為 20px，并且當 item 數量為單數時，最后一個 item 占滿整行。🧑?💻
本文將詳細介紹實現方法，并附上完整代碼，幫助你輕松掌握這一技巧！
效果展示：
一、需求分析
我們需要實現以下效果：
- 每行顯示兩個
item，且item之間的間隔為20px。 - 當
item數量為單數時，最后一個item占滿整行。 item的數量n是動態的，布局需要自動適應。
二、實現思路
為了實現上述需求，我們可以借助 display: flex 的強大功能：
- 彈性盒子布局：使用
flex實現靈活的排列方式。 - 換行功能：通過
flex-wrap: wrap實現自動換行。 - 動態寬度：通過
calc()計算每個item的寬度，并處理單數情況。
三、代碼實現
1. HTML 結構
首先，我們定義一個容器 .box，并在其中動態生成 item：
<div class="box"><div v-for="item in n" :key="item" class="item"></div>
</div>
.box是容器，用于包裹所有item。v-for是 Vue 的語法，用于動態生成item（假設n是動態的）。
2. CSS 樣式
接下來，我們通過 CSS 實現布局效果：
.box {display: flex;flex-wrap: wrap; /* 允許換行 */gap: 20px; /* 設置 item 之間的間隔 */
}.item {flex: 1 1 calc(50% - 10px); /* 每行兩個 item，減去間隔的一半 */box-sizing: border-box;background-color: #ccc;height: 100px; /* 設置 item 的高度 */border: 1px solid #999;
}/* 當 n 為單數時，最后一個 item 占滿整行 */
.item:last-child:nth-child(odd) {flex: 1 1 100%;
}
關鍵點解析：
display: flex：將容器設置為彈性盒子，實現靈活的布局。flex-wrap: wrap：允許內容換行，確保每行只有兩個item。gap: 20px：設置item之間的間隔為20px。flex: 1 1 calc(50% - 10px)：flex-grow: 1：允許item擴展。flex-shrink: 1：允許item收縮。flex-basis: calc(50% - 10px)：設置item的基礎寬度為50%減去間隔的一半（因為每行有兩個item，總間隔為20px，每個item分攤10px）。
item:last-child:nth-child(odd)：- 當
n為單數時，最后一個item會匹配:last-child和:nth-child(odd)。 - 設置
flex: 1 1 100%，使其占滿整行。
- 當
四、效果演示
假設 n = 5，效果如下：
- 前兩行每行有兩個
item，寬度各為50%，間隔為20px。 - 最后一行只有一個
item，寬度為100%。
HTML 示例：
<div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div>
</div>
效果：
- 第一行：
item 1和item 2。 - 第二行：
item 3和item 4。 - 第三行：
item 5占滿整行。
五、完整代碼
以下是完整的 HTML + CSS 代碼：
<!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>.box {display: flex;flex-wrap: wrap;gap: 20px;}.item {flex: 1 1 calc(50% - 10px);box-sizing: border-box;background-color: #ccc;height: 100px;border: 1px solid #999;}.item:last-child:nth-child(odd) {flex: 1 1 100%;}</style>
</head>
<body><div class="box"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>
</body>
</html>
您好，我是肥晨。
歡迎關注我獲取前端學習資源，日常分享技術變革，生存法則；行業內幕，洞察先機。
