使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行
原创使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行
原创
肥晨
发布于 2025-03-07 17:49:35
发布于 2025-03-07 17:49:35
使用 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>您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
