本教程详细阐述如何利用纯css flexbox实现一个动态两列布局，确保每行最多容纳两个元素，并使奇数个元素时最后一行居中显示，同时兼顾响应式设计。文章将介绍Flexbox的关键属性如flex-flow、justify-content和flex，并纠正常见的ID与class使用误区，提供完整的html和CSS代码示例。
在现代网页设计中，构建灵活且响应式的网格布局是常见的需求。尤其当元素数量不固定，且需要保持每行固定数量（如两列），同时要求当行末出现单个元素时能自动居中，这便是一个典型的应用场景。本教程将深入探讨如何仅使用CSS Flexbox技术，优雅地解决这类布局挑战，避免对javaScript的依赖。
1. 理解布局需求与CSS基础
我们的核心需求是创建一个容器，其中包含数量可变的子元素。这些子元素应以两列的形式排列，当一行的空间不足以容纳第三个元素时，自动换行。更重要的是，如果子元素总数为奇数，导致最后一行为单个元素时，该元素应在水平方向上居中显示。
在开始布局之前，我们需要纠正一个常见的HTML/CSS使用误区：id属性在HTML文档中必须是唯一的。这意味着一个页面上不能有多个元素拥有相同的id。如果需要对多个元素应用相同的样式或行为，应使用class属性。因此，原问题中将id=”smallerCon”应用于多个子元素是不正确的，应将其改为class=”smallerCon”。
立即学习“前端免费学习笔记（深入）”；
2. Flexbox核心技术详解
Flexbox（弹性盒子）是css3中一种强大的布局模式，专为盒状模型设计，能够更灵活地控制盒子的排列、对齐和空间分配。
2.1 容器（Parent Container）的设置
首先，我们需要将外部容器（#container）设置为Flexbox容器，并配置其行为：
- display: flex;: 激活Flexbox布局模式。
- flex-flow: row wrap;: 这是flex-direction和flex-wrap的简写。
- flex-direction: row: 定义主轴方向为水平方向（从左到右）。
- flex-wrap: wrap: 允许子元素在主轴方向空间不足时自动换行到下一行。
- justify-content: center;: 这个属性至关重要。它定义了子元素在主轴上的对齐方式。当一行中的子元素数量不足以填满整行时（例如，奇数个子元素导致最后一行为单个元素），center值会使这些子元素沿主轴（水平方向）居中对齐。
- gap: 1rem;: gap属性用于设置Flexbox子元素之间的间距，包括行间距和列间距。这比使用margin来创建间距更简洁，且能更好地处理边缘对齐问题。
2.2 子元素（Flex Items）的尺寸与行为
接下来，我们需要为Flexbox子元素（.smallerCon）定义其尺寸和行为：
- flex: 0 1 calc(50% – 0.5rem);: 这是flex-grow、flex-shrink和flex-basis的简写。
- flex-grow: 0: 子元素在有额外空间时不会增长。
- flex-shrink: 1: 子元素在空间不足时可以收缩。
- flex-basis: calc(50% – 0.5rem): 定义了子元素的理想宽度。这里的calc(50% – 0.5rem)是实现两列布局的关键。考虑到父容器设置了gap: 1rem，每两个子元素之间会有一个1rem的间距。为了让两个子元素加上这个间距正好占据父容器的100%宽度，每个子元素的flex-basis需要从50%中减去gap值的一半（即0.5rem）。这样，0.5rem + 50% – 0.5rem + 50% – 0.5rem + 0.5rem（左边距+子元素1+间距+子元素2+右边距）可以理解为占据了父容器的宽度。
- min-width: 18rem; (可选): 为子元素设置最小宽度。这对于响应式设计非常有用。在小屏幕上，即使flex-basis设置为50%，子元素也可能因父容器过窄而变得过小，导致内容显示不佳。min-width可以强制子元素保持一定宽度，从而在必要时触发换行，优化小屏幕体验。
2.3 box-sizing: border-box的重要性
为了确保元素的宽度计算符合预期，推荐在全局样式中设置box-sizing: border-box;。 box-sizing: border-box会使元素的padding和border包含在其指定的width或flex-basis之内，避免因内边距或边框导致元素溢出或布局错乱。
3. 实现步骤与代码示例
3.1 HTML 结构
我们将所有的子元素都放在一个父容器#container中，并为子元素使用class=”smallerCon”。
<!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> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <div class="smallerCon"> <div class="smallerLeftBoxText">这是一个示例文本，展示了Flexbox布局的灵活性和响应能力。</div> </div> <div class="smallerCon"> <div class="smallerLeftBoxText">第二个示例，内容可以动态变化，布局依然保持整洁。</div> </div> <div class="smallerCon"> <div class="smallerLeftBoxText">第三个示例，Flexbox自动换行，保持每行两个。</div> </div> <div class="smallerCon"> <div class="smallerLeftBoxText">第四个示例，布局结构清晰，易于维护和扩展。</div> </div> <div class="smallerCon"> <div class="smallerLeftBoxText">当元素数量为奇数时，这个元素会自动居中显示，无需javascript。</div> </div> </div> </body> </html>3.2 CSS 样式
创建style.css文件，并添加以下样式：
/* 确保内边距和边框包含在元素的总宽度内 */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; background-color: #f4f4f4; line-height: 1.6; } #container { width: 90vw; /* 容器宽度 */ margin: 4vh auto; /* 容器上下居中，左右自动居中 */ padding: 1rem; /* 容器内边距 */ background-color: #fff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Flexbox 容器设置 */ display: flex; flex-flow: row wrap; /* 水平排列并允许换行 */ justify-content: center; /* 子元素水平居中 */ gap: 1rem; /* 子元素间距 */ } .smallerCon { height: 20vh; /* 子元素高度 */ min-width: 18rem; /* [可选] 为小屏幕设置最小宽度 */ /* Flexbox 子元素设置 */ flex: 0 1 calc(50% - 0.5rem); /* 不增长，可收缩，基础宽度为50%减去一半间距 */ /* .smallerCon 内部也使用 Flexbox 来居中文本 */ display: flex; justify-content: center; /* 水平居中其内容 */ align-items: center; /* 垂直居中其内容 */ text-align: center; /* 文本内容自身居中 */ /* 样式美化 */ background-image: linear-gradient( to bottom right, rgba(255, 0, 128, 0.577), rgba(0, 204, 255, 0.49) ), url("../img/26March.gif"); /* 确保图片路径正确 */ background-size: cover; background-repeat: no-repeat; background-position: center; border: 2px solid rebeccapur