文章目录
- 使用 `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>
您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
