CSS flex布局两列空间分配不均 如何实现等宽等间距效果

当前两列空间分配不均的核心原因是横向flex容器的子项未配置等宽分配规则：默认flex布局下，子项宽度由自身内容撑开，不会主动均分父容器剩余宽度，就会出现两列宽窄不一的问题。另外原代码里还漏写了flex布局必需的display: flex声明，容易导致布局规则不生效。

直接给对应选择器补充缺失的属性即可，调整后完整样式如下：

.industriesFeatureInner {
    h2 {
        margin-top: 6rem;
        font-size: 2rem;
        overflow-wrap: break-word;
    }

    .industriesFeatureList {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        overflow-wrap: break-word;

        .industriesFeatureListRow {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }
    }
}

• 给.industriesFeatureList和.industriesFeatureListRow补充display: flex：这是flex布局生效的前提，缺失的话后续flex相关属性都不会起作用
• 给.industriesFeatureListRow设置flex: 1：该属性等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，会让所有同层级flex子项忽略自身内容宽度，均等瓜分父容器的可用空间，从根本上避免内容差异导致的列宽不一致
• 原有gap: 2rem会作为固定间距保留，不会参与宽度分配，最终效果就是两列宽度完全相等、列间距均等，四个方形区块会规整排列成2x2的栅格。

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