如何在包含多个子项的flex容器中居中单个flex子项并避免元素碰撞

架构老林

2026-9-24

实现方案

你可以通过将外层容器改为Grid布局实现需求，既能保证白色画板始终水平居中，也能避免右侧按钮容器和画板重叠，调整窗口尺寸时也不会出现挤压问题。

需要修改的CSS代码如下：

.middle-content-section {
    margin-top: 50px;
    /* 改为grid布局，三列结构：左右两列等分剩余空间，中间列宽度自适应为画板宽度 */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* 保持列间距为50px */
    gap: 50px;
    width: 100%;
    border: 1px solid red;
    /* 窗口过小时出现横向滚动条，避免元素挤压 */
    overflow-x: auto;
    /* 给滚动留内边距，避免边框切到元素 */
    padding: 10px;
    box-sizing: border-box;
}

.drawing-pad-container {
    height: 500px;
    width: 500px;
    background: rgb(255, 255, 255);
    filter: drop-shadow(2px 2px 3px rgb(180, 180, 180));
    transition: 0.3s;
    display: grid;
    grid-template-rows: repeat(30, 1fr);
    grid-template-columns: repeat(30, 1fr);
    /* 放在grid第二列 */
    grid-column: 2;
}

.settings-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid blue;
    /* 放在grid第三列，垂直居中对齐 */
    grid-column: 3;
    align-self: center;
    /* 禁止按钮容器被压缩 */
    flex-shrink: 0;
}