React中Display: Flex无法实现图片横向排列问题求助

启动React应用后，图片未按预期横向排列，仅垂直显示。已为.row_posters设置display: flex，但效果未达标。

原代码 #

Row.js

import React, { useState, useEffect } from 'react';
import axios from './axios';
import './Row.css';

const base_url = "https://image.tmdb.org/t/p/original/";

function Row({ title, fetchUrl }) {
    const [movies, setMovies] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const request = await axios.get(fetchUrl);
            setMovies(request.data.results);
            return request;
        }
        fetchData();
    }, [fetchUrl]);

    console.table(movies);

    return (
        <div className="row">
            <h2>{title}</h2>

            <div classname="row_posters">
                {movies.map(movie => (
                    <img
                        className="row_poster"
                        src={`${base_url}${movie.poster_path}`} 
                        alt={movie.name} 
                    />
                ))}
            </div>
        </div>
    );
}

export default Row

Row.css

.row_posters {
    display: flex
}

.row_poster {
    object-fit: contain;
    width: 100%;
    max-height: 100px;
    margin-right: 10px;
    transition: transform 450ms;
}

解决方法 #

1. 修复React类名属性错误
   React中元素的类名属性是className（大写N），你写的classname（小写n）是无效的，导致.row_posters的flex样式未被应用。修改Row.js中包裹图片的div：

   <div className="row_posters">
       {movies.map(movie => (
           <img
               className="row_poster"
               src={`${base_url}${movie.poster_path}`} 
               alt={movie.name} 
           />
       ))}
   </div>
   

2. 优化CSS增强横向排列效果
   原CSS中.row_poster的width: 100%会让图片占满容器宽度，即使flex生效也会被迫垂直排列。调整CSS：

   .row_posters {
       display: flex;
       overflow-x: auto; /* 横向内容超出容器时显示滚动条 */
       padding: 20px; /* 增加内边距避免图片贴边 */
   }
   
   .row_poster {
       object-fit: contain;
       max-height: 100px;
       margin-right: 10px;
       transition: transform 450ms;
       width: auto; /* 让图片保持自身比例宽度 */
   }
   
   /* 可选：隐藏滚动条但保留滚动功能 */
   .row_posters::-webkit-scrollbar {
       display: none;
   }
   

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