Flexbox布局实战：实现图片两行两列排列-html教程-PHP中文网

Flexbox布局实战：实现图片两行两列排列

DDD

发布： 2025-11-24 13:22:19

原创

606人浏览过

Flexbox布局实战：实现图片两行两列排列

本教程详细讲解如何利用css flexbox实现元素的横向与纵向排列，特别针对图片等内容，通过设置父容器的`display: flex`和`flex-wrap: wrap`，并精确调整子元素的`flex-basis`属性，轻松实现两行两列的布局效果。文章包含完整的代码示例和关键属性解析，帮助开发者掌握flexbox在复杂布局中的应用。

引言

在现代网页设计中，实现灵活且响应式的布局是至关重要的。CSS Flexbox（弹性盒子）模块提供了一种高效的方式来布局、对齐和分配容器中项目空间。本教程将深入探讨如何利用Flexbox来解决一个常见的布局需求：将一组图片或其他元素以两行两列（即2x2网格）的形式进行排列。我们将通过具体的代码示例，详细解析实现这一布局的关键CSS属性和技巧。

Flexbox核心概念解析

要有效地使用Flexbox，首先需要理解几个核心概念：

弹性容器 (Flex Container): 任何设置了 display: flex 或 display: inline-flex 的元素都将成为弹性容器。它的直接子元素将自动成为弹性项目。
弹性项目 (Flex Items): 弹性容器的直接子元素被称为弹性项目。Flexbox属性主要应用于容器或项目上，以控制其布局行为。
主轴与交叉轴: Flexbox布局基于主轴和交叉轴。
- 主轴 (Main Axis): 弹性项目沿着主轴方向排列。flex-direction 属性决定主轴的方向（如 row、column）。
- 交叉轴 (Cross Axis): 垂直于主轴的轴线。
flex-wrap 属性:
- 默认情况下，Flex项目会尝试在一行（或一列）中显示。当空间不足时，它们会缩小。
- flex-wrap: wrap; 允许弹性项目在空间不足时换行，形成多行或多列的布局。这是实现多行布局的关键。
flex 复合属性与 flex-basis:
- flex 是 flex-grow、flex-shrink 和 flex-basis 的简写属性。
- flex-basis: 定义了弹性项目在分配剩余空间之前，其在主轴上的理想尺寸。它可以是一个长度值（如 200px）或百分比（如 40%）。它是控制项目初始大小的关键。
- flex-grow: 定义了项目的放大比例。当容器有剩余空间时，项目会根据这个比例进行放大。
- flex-shrink: 定义了项目的缩小比例。当容器空间不足时，项目会根据这个比例进行缩小。

实现两行两列布局的步骤

我们的目标是将四个图片元素排列成两行两列的网格。

1. HTML结构准备

我们将使用一个 article 元素作为容器，内部包含四个 figure 元素，每个 figure 包含一个图片 (img) 和一个标题 (figcaption)。

<section>
  <article class="upgrades">
    <h3>Delorean Upgrades</h3>
    <figure>
      <img src="https://placekitten.com/200/300" alt="bumper_sticker">
      <figcaption>Flux Capacitor</figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/201/301" alt="flame">
      <figcaption>Flame Decals</figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/202/302" alt="flux cap">
      <figcaption>Bumper Stickers</figcaption>
    </figure>
    <figure>
      <img src="https://placekitten.com/203/303" alt="hub cap">
      <figcaption>Hub Caps</figcaption>
    </figure>
  </article>
</section>

登录后复制

2. CSS样式配置

要实现两行两列布局，我们需要对父容器（.upgrades）和子元素（figure）进行Flexbox配置。

a. 设置父容器为弹性容器并允许换行

AI TransPDF

高效准确地将PDF文档翻译成多种语言的AI智能PDF文档翻译工具

231

查看详情

首先，将 .upgrades 元素设置为弹性容器，并允许其子元素在必要时换行。

.upgrades {
  display: flex; /* 声明为弹性容器 */
  flex-wrap: wrap; /* 允许项目换行 */
  justify-content: space-around; /* 可选：项目在主轴上均匀分布，两端留有空间 */
  align-items: flex-start; /* 可选：项目在交叉轴起点对齐 */
  gap: 10px; /* 现代CSS属性，定义项目之间的间距 */
  /* 如果不使用gap，可以使用margin */
}

登录后复制

b. 控制子元素的尺寸和排列

接下来，我们需要控制每个 figure 弹性项目的尺寸，使其每行可以容纳两个项目。flex-basis 是这里的关键。

.upgrades figure {
  /* flex-grow: 1, flex-shrink: 0, flex-basis: 40% */
  flex: 1 0 40%; /* 核心：设置项目的理想宽度为父容器的40% */
  background-color: #3482D5;
  height: 80px; /* 示例高度，可根据实际内容调整或移除 */
  margin: 5px; /* 如果不使用gap属性，则用margin提供间距 */
  display: flex; /* 使figure内部的img和figcaption也成为flex项目 */
  align-items: center; /* 垂直居中figure内部内容 */
  justify-content: center; /* 水平居中figure内部内容 */
  line-height: 1.5;
  color: white; /* 标题颜色 */
}

.upgrades figure img {
  max-width: 50%; /* 确保图片在figure内自适应，并留出空间给figcaption */
  height: auto;
  margin-right: 5px; /* 图片与标题间距 */
}

.upgrades figure figcaption {
  font-size: 0.9em;
}

登录后复制

flex: 1 0 40%; 详解:

flex-grow: 1: 允许 figure 项目在父容器有剩余空间时适度增长，以填充可用空间。
flex-shrink: 0: 禁止 figure 项目在父容器空间不足时缩小。这确保了项目不会被挤压，从而保持其 flex-basis 定义的最小尺寸。
flex-basis: 40%: 这是实现两列布局的关键。它设定了每个 figure 元素的理想宽度为父容器宽度的40%。
- 当一行有两个项目时，它们总共占据 40% + 40% = 80% 的宽度。
- 这80%的宽度加上项目之间的 gap 或 margin，通常小于100%，因此两个项目可以并排显示。
- 第三个项目由于空间不足，会自动换行到下一行，形成第二列。

3. 完整示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox图片两行两列布局</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }

        section {
            display: flex;
            flex-direction: row-reverse; /* 示例中section的flex属性，与当前article布局无关 */
            flex-wrap: wrap;
            justify-content: space-between;
            max-width: 800px; /* 限制section宽度以便观察效果 */
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        /* 针对article.upgrades的flexbox布局 */
        .upgrades {
            display: flex; /* 声明为弹性容器 */
            flex-wrap: wrap; /* 允许项目换行 */
            justify-content: space-around; /* 项目在主轴上均匀分布 */
            align-items: flex-start; /* 项目在交叉轴起点对齐 */
            gap: 10px; /* 项目之间的间距 */
            width: 100%; /* 确保article占据section的全部宽度 */
            padding: 10px 0;
            background-color: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .upgrades h3 {
            width: 100%; /* 标题占据一行 */
            text-align: center;
            margin-bottom: 15px;
            color: #333;
        }

        /* 针对figure弹性项目的样式 */
        .upgrades figure {
            flex: 1 0 40%; /* 核心：设置flex-basis为40% */
            background-color: #3482D5;
            height: 120px; /* 调整高度以更好地显示图片和文字 */
            display: flex; /* 使figure内部的img和figcaption也成为flex项目 */
            align-items: center; /* 垂直居中figure内部内容 */
            justify-content: center; /* 水平居中figure内部内容 */
            color: white;
            border-radius: 5px;
            overflow: hidden; /* 确保内容不溢出 */
            box-sizing: border-box; /* 边框和内边距包含在宽度内 */
            /* 如果不使用gap，可以使用margin: 5px; */
        }

        .upgrades figure img {
            max-width: 50%; /* 确保图片在figure内自适应 */
            height: auto;
            display: block; /* 移除图片底部空白 */
            object-fit: contain; /* 保持图片比例，适应容器 */
            margin-right: 8px;
        }

        .upgrades figure figcaption {
            font-size: 0.9em;
            text-align: center;
            flex-shrink: 0; /* 防止figcaption被图片挤压 */
        }

        /* 原始问题中section和article的其他样式，与本教程核心无关，但为保持完整性保留 */
        article {
            flex: 200; /* 这里的flex是针对section的子项 */
        }
        .reviews {
            align-self: flex-end;
        }

        /* 响应式调整 */
        @media (max-width: 600px) {
            .upgrades figure {
                flex-basis: 90%; /* 在小屏幕上，每行显示一个项目 */
            }
        }
    </style>
</head>
<body>

    <section>
      <article class="upgrades">
        <h3>Delorean Upgrades</h3>
        <figure>
          <img src="https://placekitten.com/200/300" alt="bumper_sticker">
          <figcaption>Flux Capacitor</figcaption>
        </figure>
        <figure>
          <img src="https://placekitten.com/201/301" alt="flame">
          <figcaption>Flame Decals</figcaption>
        </figure>
        <figure>
          <img src="https://placekitten.com/202/302" alt="flux cap">
          <figcaption>Bumper Stickers</figcaption>
        </figure>
        <figure>
          <img src="https://placekitten.com/203/303" alt="hub cap">
          <figcaption>Hub Caps</figcaption>
        </figure>
      </article>

      <!-- 原始问题中可能存在的其他article，为保持结构完整性 -->
      <!-- <article class="reviews">
        <h3>Customer Reviews</h3>
        <p>Some review content here.</p>
      </article> -->
    </section>

</body>
</html>

登录后复制

注意事项与最佳实践

间距处理:
- 在现代CSS中，推荐使用 gap 属性（如 gap: 10px;）来设置弹性项目之间的间距。它比 margin 更简洁，且不会在容器边缘产生不必要的空白。
- 如果需要兼容旧版浏览器，可以使用 margin 属性，但需要注意清除容器边缘的额外 margin。
响应式设计:
- 使用百分比作为 flex-basis 值（如 40%）是实现响应式布局的良好实践。当父容器宽度变化时，子项目的宽度也会相应调整。
- 结合媒体查询 (@media)，可以在不同屏幕尺寸下调整 flex-basis 的值，例如，在小屏幕上将 flex-basis 设置为 90%，实现单列布局。