使用 display: flex 实现动态布局：每行两个 item，单数时最后一个占满整行

最新推荐文章于 2025-03-27 16:30:45 发布

奶糖肥晨

最新推荐文章于 2025-03-27 16:30:45 发布

阅读量1.3k

点赞数 28

分类专栏： HTML 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_48998573/article/details/146097751

版权

HTML 专栏收录该内容

3 篇文章

订阅专栏

在这里插入图片描述

文章目录

使用 `display: flex` 实现动态布局：每行两个 item，单数时最后一个占满整行 🎯

使用 `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>