如何在Flexbox中让div紧邻居中div且不偏移原居中元素？

要实现draw-area在窗口正中央，同时result紧邻其旁，你可以通过绝对定位调整result的位置，同时保证draw-area的居中不受影响。Flexbox依然是合适的工具，只是需要调整布局逻辑：

修改后的代码 #

CSS 部分 #

/* 让wrapper占满整个视口，作为定位容器 */
.wrapper {
  position: relative;
  min-height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.draw-area {
  width: 400px; /* 和canvas宽度一致，确保居中准确 */
  text-align: center;
}

.result {
  /* 绝对定位，相对于wrapper定位到draw-area右侧 */
  position: absolute;
  left: calc(50% + 200px); /* 窗口中心 + draw-area宽度的一半，刚好紧邻右侧 */
  top: 50%;
  transform: translateY(-50%); /* 垂直方向和draw-area对齐 */
  text-align: center;
  /* 可选：添加间距，避免紧贴 */
  margin-left: 10px;
}

.canvasDrawing {
  border: 1px solid #ccc; /* 给canvas加边框方便看位置 */
}

HTML 部分 #

<div class="wrapper">
  <div class="draw-area">
    <div class="canvas-container">
      <canvas id="canvasPosition" class="canvasDrawing" height="400" width="400"></canvas>
    </div>
    <div class="button-container">
      <button id="clearDrawing" onclick="clearArea()">Clear Area</button>
      <button id="submitDrawing" onclick="sendImage()">Submit</button>
    </div>
  </div>
  <div class="result">
    <img id="resizedImage" src="/backend/example_images/0.png" alt="Received Image">
  </div>
</div>

原理说明 #

1. 首先让wrapper占满整个视口高度（min-height:100vh），并用Flexbox将draw-area精准定位在窗口正中央。
2. 将result设置为绝对定位，通过left: calc(50% + 200px)把它放在窗口中心右侧（200px是draw-area宽度的一半），再用transform: translateY(-50%)让它和draw-area垂直对齐。
3. 原代码的问题在于：Flexbox的justify-content:center是让两个元素的整体居中，而非单独让draw-area居中，所以result的存在会把draw-area挤偏。

可选调整 #

• 如果要让result在draw-area左侧，把left改为calc(50% - 200px - [result的宽度])，比如假设图片宽度是200px，就写calc(50% - 200px - 200px)。
• 如果需要响应式布局，可以用媒体查询，在小屏幕上将result移到draw-area下方。

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