尝试在ReactJS组件上使用flexbox失败

如何解决尝试在ReactJS组件上使用flexbox失败

您好，所以我尝试使用 flex-box 以及flex-box的 wrap 对齐我的内容，但是失败了。

所以我从对象列表中获得以下内容

1. 视频
2. 讲座名称
3. 模块

所以所有这些数据都来自数据库，我一次通过一个对象映射，因此当我使用flex时，它不起作用，我希望拥有演讲名称和在每个视频下方模块，并正确对齐视频，我该如何实现？

下面的代码：下面的视频列表可映射到每个对象

const VideoList = (props) =>{

    let videos = props.listVideos

    return(

        <div>
            {videos.map(content =>{
            
                return(

                    <div key={content.id} className="lecture__videos">
                        <div>
                            <VideoPlayer src={`http://127.0.0.1:8000/api${content.video}`} width="400" height="250" playbackRates={[0.5,1,3.85,16]} />
                            <h3>{content.lecturer}</h3>
                            <h4>{content.module}</h4>
                        </div>
                    

                    </div>

                )
            })}

        </div>
    )
}

export default VideoList

下面的代码：这是我渲染VideoList组件的地方，所以我希望让它们使用flex而不起作用

 class Video extends from Component{
     render(){
        return(

            <div className="lecture__videos">
                <VideoList listVideos={this.state.videoList} />
            </div>
        
        
        )
    }

}
export default Videos;

下面是我尝试过的CSS：此行上方的视频组件

.videos{

   flex:0.8;
   margin: 25px;

 }


 .lecture__videos {

       display: flex;
   }