如何使用CSS Flexbox实现所有图片居中？新手布局疑问

我一直搞不懂怎么用Flexbox实现如图所示的元素居中效果，下面是目标效果、实际显示情况和效果说明：

• 目标效果：
• 实际显示：
• 效果说明：

以下是我当前使用的代码：

当前CSS代码 #

.productos_Imagenes{
    width: 150px;
    border-width: 5px;
    border-style: solid;
}
.contenedor_Linea_1{
    display: block;
    margin: 0 auto;
}
.contenedor_Linea_1_Sabores{
    display: flex;
    justify-content: center;
    align-items:center;
    margin: 0 auto;
}
.contenedor_Linea_1_Sabores_Contenedor{
    display: block;
    margin: 0 auto;
}
.linea_1_Tipos{
    text-transform: uppercase;
    font-size: 50px;
    text-align: center;
}

当前HTML代码 #

<div class="contenedor_Linea_ 1">
    <div>Linea de Productos 1</div>
    <div>Sabores</div>
    <div class="linea_1_Tipos">Frutales</div>
    <div class="contenedor_Linea_1_Sabores">
        <div class="contenedor_Linea_1_Sabores_Contenedor">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutillas.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\mango.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\melon.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\sandia.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\naranja.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\uva.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frambuesa.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutos del bosque.png">
        </div>    
    </div>
    <div class="linea_1_Tipos"> No Frutales</div>
    <div class="contenedor_Linea_1_Sabores">
        <div class="contenedor_Linea_1_Sabores_Contenedor">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\cafe.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\vainilla.png">
             <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\whisky.png">
        </div>
    </div>
</div>

问题修复方案 #

核心问题点

1. 类名拼写错误：HTML最外层容器的class="contenedor_Linea_ 1"多了空格，导致CSS里的.contenedor_Linea_1样式无法生效。
2. 多余容器干扰Flex布局：contenedor_Linea_1_Sabores_Contenedor是块级容器，包裹图片后，Flex布局只能控制这个容器，无法直接控制图片的排列。
3. 缺少换行设置：Flex容器默认不换行，当图片总宽度超过容器时会溢出，无法实现多行居中的效果。

修正后的代码

CSS代码

.productos_Imagenes{
    width: 150px;
    border-width: 5px;
    border-style: solid;
    /* 给图片添加间距，避免拥挤 */
    margin: 5px;
}
.contenedor_Linea_1{
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}
.contenedor_Linea_1_Sabores{
    display: flex;
    justify-content: center;
    align-items: center;
    /* 允许元素自动换行 */
    flex-wrap: wrap;
    margin: 0 auto;
}
.linea_1_Tipos{
    text-transform: uppercase;
    font-size: 50px;
    text-align: center;
}

HTML代码

<div class="contenedor_Linea_1">
    <div>Linea de Productos 1</div>
    <div>Sabores</div>
    <div class="linea_1_Tipos">Frutales</div>
    <div class="contenedor_Linea_1_Sabores">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutillas.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\mango.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\melon.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\sandia.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\naranja.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\uva.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frambuesa.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\frutos del bosque.png">
    </div>
    <div class="linea_1_Tipos"> No Frutales</div>
    <div class="contenedor_Linea_1_Sabores">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\cafe.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\vainilla.png">
         <img class="productos_Imagenes" src="C:\Users\Rodrigo\Desktop\Proyecto Sitio\Data Productos 1\whisky.png">
    </div>
</div>

效果说明

• 去掉多余的嵌套容器，让图片直接作为Flex容器的子元素，Flex布局可以直接控制图片的排列。
• flex-wrap: wrap保证图片在容器宽度不足时自动换行，justify-content: center让每行图片水平居中，整体也会在容器内居中。
• 修正类名错误后，外层容器的居中样式可以正常生效。

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