如何在section标签中实现图片与文本div并排展示并固定间距

• 现有CSS存在语法错误：justify-content:center' 末尾的单引号应为分号，会导致对齐属性不生效
• 未限制flex容器和子元素的伸缩规则：父容器宽度随屏幕变大时，剩余空间会被自动填充到子元素两侧或中间，导致间距变大
• 用margin-right控制间距的方式稳定性不足，容易受对齐属性影响

修改CSS如下，原有.flex-child相关的样式可以直接删除：

#welcome {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 用flex原生gap属性固定子元素间距，不受容器宽度影响 */
    gap: 40px;
    /* 限制父容器最大宽度，避免桌面端容器过宽内容分散 */
    max-width: 1200px;
    width: 100%;
    /* 父容器自身水平居中 */
    margin: 0 auto;
}

/* 固定子元素尺寸不随父容器伸缩 */
.welcome-text, .welcome-img {
    flex-shrink: 0;
    flex-grow: 0;
}

• 如果是原生HTML项目，代码里的className属性要改为class，React项目可以保留原有写法
• 如果需要两个子元素按比例分配父容器宽度，可以删除上面的flex-shrink和flex-grow配置，改为按比例设置flex值即可，示例：

/* 文本区域占5份宽度，图片区域占4份宽度，间距保持40px不变 */
.welcome-text {
    flex: 5;
}
.welcome-img {
    flex: 4;
}

• 如果需要兼容IE11等不支持gap属性的老旧浏览器，可以删除gap配置，改用相邻兄弟选择器设置间距：

.welcome-text + .welcome-img {
    margin-left: 40px;
}

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