如何使用Flexbox实现大图片居中且四周环绕小图片的布局

你当前遇到的“小盒子围绕大盒子垂直居中排列”的错位效果，本质是三个属性设置触发的：

• 给所有.box设置了margin: auto，auto边距会自动在元素四周分配剩余空间，把所有小盒子推到所在行的垂直居中位置
• 给布局容器设置了align-items: center，全局强制所有弹性元素在行内垂直居中。当200px高的大盒子占据某一行、把行高撑到200px时，100px高的小盒子会自动对齐到这行的垂直中心，也就是和大盒子的中线平齐，根本不会贴在大盒子的上下边缘排列
• Flex布局的换行机制是按整行计算高度，一旦把大盒子放进某一行，整行高度会被撑高，旁边的小盒子只会在当前行范围内按居中规则排列，没法顺着大盒子的垂直轮廓形成自然环绕。

方案1：Flex最小改动适配 #

适合不想调整DOM结构的场景，核心是去掉所有破坏自然排布的属性：

1. 容器.boxarea只保留flex基础配置，删掉所有居中对齐相关的属性，设置靠顶部对齐：

   .boxarea {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start; /* 替换原来的align-items: center */
     gap: 10px; /* 用gap统一控制间距，不要用元素的auto边距 */
     /* 容器宽度刚好容纳 左侧2个小盒 + 中间大盒 + 右侧2个小盒 */
     max-width: calc(150px * 2 + 450px + 150px * 2);
   }
   

2. 小盒子.box删掉margin: auto，保留固定宽高和背景配置：

   .box {
     width: 150px;
     height: 100px;
     position: relative;
     background: #333;
   }
   

3. 大盒子.big保留原有宽高配置即可，不需要额外加居中边距。

方案2：Grid布局实现精准环绕（推荐） #

Grid天生适合这种跨行列的环绕布局，不会出现Flex的行高错位问题，不需要反复计算宽度：

.boxarea {
  display: grid;
  /* 列轨道：2个小列 + 1个大列 + 2个小列，匹配尺寸比例 */
  grid-template-columns: repeat(2, 150px) 450px repeat(2, 150px);
  /* 行轨道：4个100px高的行，刚好凑成大盒子需要的200px跨高度 */
  grid-template-rows: repeat(4, 100px);
  gap: 10px;
  justify-content: center;
}

.big {
  /* 大盒子从第2行开始，跨2行高度；占第3列的宽度 */
  grid-row: 2 / span 2;
  grid-column: 3 / span 1;
}

这种方式下，所有小盒子会自动按DOM顺序填满网格空格，大盒子精准占据中心位置，周围的小盒子会自然顺着大盒子的四边排列，不会出现居中错位的问题。

注意：调整过程中不要给任何元素加auto值的外边距，统一用容器的gap属性控制元素间距，否则很容易再次出现元素被推到居中位置的错位问题。

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