如何用Flexbox实现保持媒体宽高比、无空隙的响应式网格行布局

完整可运行代码 #

HTML（无需修改） #

<div class="row">
    <div class="item">
        <img src="image1" />
    </div>
    <div class="item">
        <video>
            <source src="video1" />
        </video>
    </div>
</div>

修改后的CSS #

.row {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch; /* 强制所有子项高度统一 */
    gap: 0; /* 清除子项默认间距 */
}

.item {
    flex: 1; /* 所有子项均分容器宽度，若要适配媒体原始宽高比可改为 flex: 0 0 auto */
    overflow: hidden; /* 防止媒体溢出容器 */
}

.item video,
.item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持媒体宽高比，填满容器无空隙，多余部分裁剪 */
    /* 若需要完整显示媒体不裁剪，可改为 object-fit: contain; 但可能出现空白边 */
    display: block; /* 清除行内元素默认底部空隙 */
}

核心修改说明 #

• 给.row添加align-items: stretch，确保所有.item的高度自动统一，适配最高的媒体内容高度
• 给.item添加flex:1实现宽度均分，不需要均分可替换为flex: 0 0 auto让宽度适配媒体原始比例
• 媒体标签从max-width/max-height改为宽高100%，强制填充满父容器
• 新增object-fit: cover保证媒体宽高比不变的同时填满容器，无多余空隙
• 新增display: block清除img、video作为行内替换元素默认自带的底部3px空隙

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