Flexbox如何实现首列100%宽度、下方两列各50%宽度布局

该效果完全可以通过Flexbox原生能力实现，不需要修改现有HTML结构。之前调整无法达到预期的核心原因是：Flex容器默认采用单行不换行的排布规则，无论怎么设置子元素宽度，三个元素都会被强制挤在同一行均分空间。

调整逻辑 #

• 给Flex容器开启自动换行能力，打破默认单行排布的限制
• 取消所有子列统一均分空间的默认设置，按照布局需求给每一列指定固定的宽度占比

调整后的完整CSS代码 #

/* 统一盒模型，避免内边距撑破预设宽度，是布局场景下的通用最佳实践 */
* {
    box-sizing: border-box;
}

.flex-container {
    width: 80%;
    min-height: 300px;
    margin: 0 auto;
    display: flex;
    /* 核心属性：允许子元素占满当前行后，自动换到下一行排布 */
    flex-wrap: wrap;
}

.flex-container .column {
    padding: 10px;
    background: #dbdfe5;
}

/* 第一列占满整行 */
.column.first {
    background: blueviolet;
    /* 不放大、不收缩，基准宽度为容器的100% */
    flex: 0 0 100%;
}

/* 第二、第三列各占半行宽度，并排排布 */
.column.second,
.column.third {
    /* 不放大、不收缩，基准宽度为容器的50% */
    flex: 0 0 50%;
}

.column.third {
    background: #b4bac0;
}

效果匹配说明 #

开启flex-wrap: wrap后，第一列因为设置了100%的占宽，本身就占满了容器第一行的全部空间，第二、第三列会自动落到第二行；两个列各占50%宽度，加起来刚好等于容器宽度，就会形成参考图里的“上方通栏、下方两列等分”的布局。
注意：如果没有提前设置box-sizing: border-box，子元素的左右内边距会把预设的百分比宽度撑大，导致第二行的两个列因为总宽度超出容器，无法正常并排。

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