如何用Flexbox实现首个div居中且第二个div紧邻其右侧

核心思路是通过嵌套Flex容器实现：外层容器负责让第一个子div所在的内层容器整体居中，内层容器负责排列所有子元素并设置间隔，既保证第一个div处于父容器中心，又能让后续div被第一个推动，不脱离文档流。

实现代码 #

HTML结构

<div class="parent">
  <div class="inner-wrapper">
    <div class="box first">First</div>
    <div class="box second">Second</div>
    <!-- 可添加更多后续子div -->
  </div>
</div>

CSS样式

.parent {
  display: flex;
  justify-content: center; /* 让内层容器在父容器中水平居中 */
  width: 100%; /* 确保父容器占满可用宽度 */
  border: 1px dashed #999; /* 可选，方便查看父容器范围 */
}

.inner-wrapper {
  display: flex;
  gap: 20px; /* 替换为你需要的间隔距离d */
  align-items: center; /* 可选，让子元素垂直居中对齐 */
}

.box {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: 1px solid #666;
}

方案说明 #

1. 外层.parent用display: flex+justify-content: center，确保内层的.inner-wrapper整体处于父容器的水平中心，第一个子div自然落在整个父容器的中心位置。
2. 内层.inner-wrapper同样用display: flex，通过gap设置子元素间的固定间隔，后续所有子div都会紧跟在第一个div右侧排列，完全由第一个div推动，不会脱离文档流。
3. 对比你之前的尝试：
   • 绝对定位会让第二个div脱离文档流，无法被第一个div推动；
   • 直接给父容器用justify-content: center会让两个div整体居中，第一个div无法单独处于父容器中心；
   • 百分比margin依赖父容器宽度，屏幕尺寸变化时会导致第一个div偏移，而固定gap+嵌套flex的方式不受屏幕尺寸影响。

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