过滤菜单筛选后元素排列异常，求CSS布局修复方案

问题描述 #

开发图片过滤菜单功能时，点击“All Menu”以外的分类选项，同分类下的两张图片会分别显示在容器左右两端，无法并排排列，推测是CSS代码存在问题。

问题根源 #

当前.product容器使用了justify-content: space-between属性，该属性会让flex容器内的元素在主轴方向上均匀分布、两端对齐。当容器内仅存在两个图片元素时，就会出现一个靠左、一个靠右的分散布局。

修复方案 #

修改.product的CSS样式，将justify-content: space-between替换为justify-content: flex-start，同时添加gap属性控制图片间的间距，让图片从左到右依次排列，避免分散到两端。

修改后的核心CSS代码 #

.product{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start; /* 替换原space-between属性 */
    flex-wrap: wrap ;
    gap: 10px; /* 添加图片间距控制 */
}

.product img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}

原始代码参考 #

JavaScript代码 #

const liItem = document.querySelectorAll('ul li');
const imgItem = document.querySelectorAll('.product img');


liItem.forEach(li => {
    li.onclick = function(){
    //active
    liItem.forEach(li => {
        li.className = '';
    })
    li.className = 'active';
    

    //Filter
    // console.log(li.textContent);

    const value = li.textContent;
    imgItem.forEach(img => {
        img.style.display = 'none';
        console.log(img.getAttribute('data-filter'));
        if (img.getAttribute('data-filter') == value.toLowerCase() || value == 'All Menu'){
            img.style.display = 'block';
        }
    })  
    }
});

CSS代码（原始） #

body, h1, ul, li{
    margin: 0;
    padding: 0;
}

body{
    background-color: rgb(181, 181, 181);
}


section{
    width: 70%;
    margin: 50px auto;
}

section h1{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) ;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 2em;
}

ul{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(255,255,255, 0.5);
    padding-bottom: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

ul li{
    list-style: none;
    background-color: rgba(255,255,255, 0.5);
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;

}

ul li.active{
    background-color: rgb(73, 202, 73);
}

.product{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap ;
}

.product img{
    width: 170px;
    height: 170px;
    margin-bottom: 10px;
}



/* body,h1,ul,li{
    margin: 0;
    padding: 0;
}
body{
    background-color: #667d8e;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
section{
    width: 85%;
    margin: 50px auto;
}
section h1{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 2em;
}
ul{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.57);
    padding-bottom: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
ul li{
    list-style: none;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5px 10px;
    margin: 0 10px;
    cursor: pointer;
    font-size: 1.2em;
}
ul li.active{
    background-color: rgba(41, 255, 41, 0.897);
}
.product{
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.product img{
    width: 200px;
    height: 180px;
    margin-bottom: 10px;
} */

HTML代码 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Filter Menu</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
        <section>
            <h1>Filter Image</h1>
            <ul>
                <li class="active">All Menu</li>
                <li>Food</li>   
                <li>Car</li>
                <li>House</li>
                <li>Animal</li>
                <li>History</li>
            </ul>

            <div class="product">
                <img src="food_photos/food_1.jpeg" data-filter="food">
                <img src="food_photos/food_2.jpeg" data-filter="food">
                <img src="food_photos/food_3.jpeg" data-filter="car">
                <img src="food_photos/food_4.jpeg" data-filter="car">
                <img src="food_photos/food_5.jpeg" data-filter="house">
                <img src="food_photos/food_6.jpeg" data-filter="house">
                <img src="food_photos/food_1.jpeg" data-filter="animal">
                <img src="food_photos/food_2.jpeg" data-filter="animal">
                <img src="food_photos/food_3.jpeg" data-filter="history">
                <img src="food_photos/food_4.jpeg" data-filter="history">
                
            </div>


        </section>

        

        

        <script src="app.js"></script>
    </body>
    </html>

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