Flexbox布局教程：实现图片水平垂直并排显示与2x2网格排列

admin 百科 2025-12-15 12

本文详细讲解如何利用flexbox布局实现图片2x2排列，使其在网页上水平垂直并排显示。核心在于正确配置容器的`flex-wrap`属性，并巧妙运用项目（item）的`flex-basis`属性来控制其尺寸。通过实例代码，读者将掌握flexbox在复杂布局中的应用，实现灵活且响应式的图片网格展示。

Flexbox基础与图片布局挑战

在网页设计中，将多个图片或其他元素排列成网格状，例如2x2的布局，是一个常见的需求。Flexbox（弹性盒子）是CSS3中一个强大的布局模块，它提供了一种更有效的方式来布置、对齐和分配容器中项目（items）的空间，即使它们的大小是未知或动态的。

当我们需要将一组元素（如图片）既水平排列又垂直堆叠时，Flexbox的单行布局能力结合其换行（wrapping）机制就能派上用场。本教程将重点解决如何利用Flexbox将四张图片排列成两行两列的网格布局。

HTML结构示例

首先，我们来看一下用于展示图片的HTML结构。这里我们有一个article容器，其中包含多个figure元素，每个figure元素又包含一张图片（img）和一个图片说明（figcaption）。

<article class="upgrades">
  <h3>Delorean Upgrades</h3><br>
  <br>
  <figure>
    @@##@@
    <figcaption>Flux Capacitor</figcaption>
  </figure>
  <figure>
    @@##@@
    <figcaption>Flame Decals</figcaption>
  </figure>
  <figure>
    @@##@@
    <figcaption>Bumper Stickers</figcaption>
  </figure>
  <figure>
    @@##@@
    <figcaption>Hub Caps</figcaption>
  </figure>
</article>

登录后复制

在这个结构中，article.upgrades将作为Flex容器的父元素，而每个figure元素将是Flex项目。

初始CSS分析与问题

为了实现2x2布局，我们需要将article或其父级设置为Flex容器，并允许其内容换行。以下是可能尝试的初始CSS样式：

Flexbox布局教程：实现图片水平垂直并排显示与2x2网格排列-第2张图片-佛山资讯网

section { /* 假设 article.upgrades 的父元素是 section */
  display: flex;
  flex-direction: row-reverse; /* 注意这里的方向 */
  flex-wrap: wrap;
  justify-content: space-between;
}

article {
  flex: 200; /* 可能用于控制 article 在 section 中的大小 */
}

.upgrades {
  flex: 100; /* 针对 article.upgrades */
}

.reviews {
  align-self: flex-end; /* 与本教程主题无关 */
}

figure {
  background-color: #3482D5;
  height: 80px;
  display: flex; /* figure 内部也可能是flex容器 */
  flex: 1 auto; /* 关键属性，可能导致布局问题 */
  margin: 5px;
  line-height: 1.5;
}

登录后复制

在上述CSS中，section被设置为Flex容器，并使用了flex-wrap: wrap允许项目换行。justify-content: space-between用于在主轴上均匀分布项目。然而，关键在于figure元素的flex: 1 auto;。

flex是一个复合属性，它包含了flex-grow、flex-shrink和flex-basis。