如何用CSS flex属性实现两列图片布局？问题排查

问题描述 #

希望将图片设置为两列布局，但目前仅显示一列，容器div中还存在空白区域。

原始代码 #

HTML

<div class="container">
    <div class="box">
        <img v-for="(backgroundCover, index) in backgroundCovers" :key="index" :src="backgroundCover"
             :alt="'Random Image ' + index" />
    </div>
</div>

CSS

.container {
    width: 100%;
    margin: 10rpx 30rpx 0;
    display: flex;
    flex-wrap: wrap;
}

.box {
    max-width: 300rpx;
    min-height: auto;
    padding: 10rpx;
    margin-bottom: 20px;
}

.box img {
    border-radius: 7%;
    max-width: 100%;
    height: auto;
    display: block;
}

问题根源 #

所有图片都被包裹在同一个.box容器内，flex布局的子元素只有这一个.box，因此无法实现多列排列，自然只会显示一列，容器剩余空间就变成了空白。

修复方案 #

修改后的HTML

把v-for循环绑定到.box元素上，让每个图片都拥有独立的容器：

<div class="container">
    <div class="box" v-for="(backgroundCover, index) in backgroundCovers" :key="index">
        <img :src="backgroundCover" :alt="'Random Image ' + index" />
    </div>
</div>

修改后的CSS

调整.box的宽度，让它能在一行容纳两个，同时考虑内边距和间距：

.container {
    width: 100%;
    margin: 10rpx 30rpx 0;
    display: flex;
    flex-wrap: wrap;
    /* 添加子项间距 */
    gap: 20rpx;
}

.box {
    /* 计算宽度：容器宽度减去间隙后平分，适配两列 */
    flex: 0 0 calc((100% - 20rpx) / 2);
    padding: 10rpx;
    margin-bottom: 20px;
}

.box img {
    border-radius: 7%;
    max-width: 100%;
    height: auto;
    display: block;
}

说明 #

• 将循环移到.box上后，flex容器会把每个.box作为独立子项排列，满足换行条件时自动分成两列
• 使用calc计算宽度，确保两个.box加上间隙刚好占满容器宽度，避免空白区域
• gap属性可以更简洁地控制子项间距，替代传统margin的方式

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