如何使用Flexbox替代Float实现带右侧红框的响应式网格布局？

当然可以用Flexbox替代Float来实现这个需求！咱们不需要JS，纯CSS就能搞定流畅的响应式布局。我会基于你的现有代码调整，一步步实现不同断点的列数、大红框的高度匹配，还有项目的排列规则。

第一步：调整HTML结构 #

首先，我们把所有.item元素放到一个子容器里，这样能更方便地控制它们和大红框的布局关系：

<div class="grid">
  <div class="items-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
    <div class="item">Item 7</div>
    <div class="item">Item 8</div>
    <div class="item">Item 9</div>
    <div class="item">Item 10</div>
    <div class="item">Item 11</div>
    <div class="item">Item 12</div>
    <div class="item">Item 13</div>
    <div class="item">Item 14</div>
    <div class="item">Item 15</div>
    <div class="item">Item 16</div>
    <div class="item">Item 17</div>
    <div class="item">Item 18</div>
    <div class="item">Item 19</div>
    <div class="item">Item 20</div>
  </div>
  <div class="red-box">big box</div>
</div>

第二步：基础Flex样式设置 #

接下来设置.grid和子容器的基础样式，让它们横向排列，并且大红框始终在右侧：

/* 主容器：横向排列，项目间留间距 */
.grid {
  display: flex;
  gap: 10px; /* 替代margin，更简洁地控制间距 */
  padding: 5px;
}

/* 项目容器：占据除大红框外的所有宽度，内部项目允许换行 */
.items-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

/* 单个项目：基础样式，后续断点调整宽度 */
.item {
  flex: 1 1 auto; /* 允许项目收缩和自适应 */
  min-width: 200px; /* 防止屏幕过小时项目被挤压变形 */
  padding: 10px;
  background: #eee;
  box-sizing: border-box;
}

/* 大红框基础样式：高度自动匹配项目容器 */
.red-box {
  background: #ff3333;
  padding: 10px;
  box-sizing: border-box;
  align-self: stretch; /* 让大红框高度和前两行项目的总高度一致 */
}

第三步：添加响应式断点 #

现在针对你提到的三个断点，分别调整列数和宽度：

1. 1025px断点：2列布局（左侧1列项目，右侧1列大红框） #

@media (min-width: 1025px) {
  .red-box {
    flex: 0 0 calc(50% - 5px); /* 占据50%宽度，减去间距的一半 */
  }
  .item {
    flex: 0 0 calc(100% - 5px); /* 单个项目占满左侧容器，每行1个 */
  }
}

此时大红框占1列，左侧项目容器占1列，每行1个项目，两行的高度会自动撑起容器，大红框通过align-self: stretch匹配这个高度。

2. 1100px断点：3列布局（左侧2列项目，右侧1列大红框） #

@media (min-width: 1100px) {
  .red-box {
    flex: 0 0 calc(33.333% - 5px); /* 占据1/3宽度 */
  }
  .item {
    flex: 0 0 calc(50% - 5px); /* 单个项目占左侧容器的50%，每行2个 */
  }
}

总布局3列，大红框占1列，左侧每行2个项目，4个项目正好占满两行，完美匹配你说的“5、6、7、8等每4个项目随后续项目换行”的规则。

3. 1680px断点：4列布局（左侧3列项目，右侧1列大红框） #

@media (min-width: 1680px) {
  .red-box {
    flex: 0 0 calc(25% - 5px); /* 占据1/4宽度 */
  }
  .item {
    flex: 0 0 calc(33.333% - 5px); /* 单个项目占左侧容器的1/3，每行3个 */
  }
}

总布局4列，大红框占1列，左侧每行3个项目，两行共6个项目，后续项目会自动换行，保持布局规整。

关键细节说明 #

• 用gap替代margin：避免了最后一行项目的多余间距问题，布局更整洁。
• align-self: stretch：确保大红框高度始终和左侧前两行项目的总高度一致，无需额外计算。
• 固定宽度控制：每个断点用flex: 0 0 宽度值锁定元素宽度，防止布局错乱。
• min-width保障适配：给项目设置最小宽度，确保小屏幕下内容不会被过度挤压。

这样调整后，整个布局会流畅响应不同屏幕尺寸，完全不需要JS就能实现你要的效果！

内容的提问来源于stack exchange，提问作者user8342662