如何在React中使用Flex实现图片与文本的对齐布局

我尝试用Flex布局实现图片水平排列，同时让文本显示在每张图片下方。但只有注释掉文本时图片才能保持水平对齐，取消注释后布局结构就被破坏了。

原代码 #

CSS代码 #

.row::after{
    display: flex;
    position: relative;
    flex: 1;
    flex-direction: row;
    padding: 20px;
    /* content: "";
    clear: both;
    display: table; */
}


.Image-container2{
    width: 25%;
    
}

.column img{
    float: left;
    width: 20%;
    padding: 5px;     
}

.Text2{
    color: red;
    font-size: smaller;
    width: 100;
}

React代码 #

import React from 'react';
import "./Section2.css"

function Section2(props) {
    return (
        <div className='row'>
            <div className='column'>
                <img src={props.image} alt=''/>
             <div className='Text2'>
                <p>{props.theme}</p>
                <h2>{props.Title}</h2>
                <p>{props.By}</p>
                <p>{props.length}</p>

            </div> 
            </div>
        </div>
    );
    
}

export default Section2

问题分析与修复方案 #

错误点： #

1. Flex布局加错位置：把display:flex加到了.row::after伪元素上，无法控制子元素排列，应该给.row本身设置Flex属性。
2. Float与Flex冲突：.column img使用float:left，Float布局会干扰Flex的正常排列逻辑。
3. CSS语法错误：.Text2的width:100缺少单位，需补全为width:100%。
4. 未配置.column的Flex属性：需要让每个.column作为Flex容器的子项，同时设置内部垂直排列规则。

修正后的CSS代码 #

.row {
    display: flex; /* 给row本身设置Flex布局 */
    gap: 20px; /* 列之间的间距，替代padding更灵活 */
    padding: 20px;
    flex-wrap: wrap; /* 屏幕较小时自动换行 */
}

.column {
    flex: 1; /* 让每列平分父容器宽度，也可设置固定宽度如width:25% */
    min-width: 200px; /* 设置最小宽度，避免内容过窄 */
    display: flex; /* 让column内部垂直排列图片和文本 */
    flex-direction: column;
    align-items: center; /* 内容居中对齐，可选 */
}

.column img {
    width: 100%; /* 图片占满列宽 */
    padding: 5px;
}

.Text2 {
    color: red;
    font-size: smaller;
    width: 100%; /* 补全单位 */
    text-align: center; /* 文本居中，可选 */
}

修正后的React代码（支持多列渲染） #

如果需要渲染多个图片+文本项，可通过循环生成.column：

import React from 'react';
import "./Section2.css"

function Section2(props) {
    // 假设props.items是包含多组图片和文本数据的数组
    return (
        <div className='row'>
            {props.items.map((item, index) => (
                <div className='column' key={index}>
                    <img src={item.image} alt=''/>
                    <div className='Text2'>
                        <p>{item.theme}</p>
                        <h2>{item.Title}</h2>
                        <p>{item.By}</p>
                        <p>{item.length}</p>
                    </div> 
                </div>
            ))}
        </div>
    );
}

export default Section2

修改后，图片会保持水平排列，文本固定在对应图片下方，添加文本也不会破坏布局结构。

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