ReactJS Flexbox布局异常：部门卡片横向排列失效

问题现象 #

使用reactstrap的Row组件搭配Flexbox布局展示DepartmentCards时，卡片未按预期横向排列，而是纵向堆叠，调整CSS样式后问题仍未解决。

相关代码 #

Formacao组件代码 #

import React, {useEffect, useState} from 'react'
import { Container, Row, Col } from 'reactstrap';
import DepartmentCards from '../Cards/departmentCards';
import FormacaoCards from '../Cards/formacaoCards';
import AddCollectionCard from '../Cards/addColeectionCard';

import 'bootstrap/dist/css/bootstrap.min.css';


function Formacao() {

  const [selectedDepartment, setSelectedDepartment] = useState(null);

  function handleDepartmentClick(departmentTitle, departmentImage) {
    setSelectedDepartment({ title: departmentTitle, image: departmentImage });
  };

  return (
    <Container fluid className="p-0">
      <Row lg="12" md="12" style={{backgroundColor: "red", height: "22vh", paddingLeft: "100px", paddingRight: "100px", display: "flex", justifyContent: "space-evenly", marginTop: "30px", marginBottom: "30px"}}>
        <DepartmentCards
          departmentTitle={'IT'}
          departmentImage={
            'https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2019/12/23174648/B-Tech-Degree.jpg'
          }
          handleDepartmentClick={handleDepartmentClick}
        />

        <DepartmentCards
          departmentTitle={'MKT'}
          departmentImage={
            'https://www.bschool.cuhk.edu.hk/wp-content/uploads/CUHK_MKT_001.jpg'
          }
          handleDepartmentClick={handleDepartmentClick}
        />

        <DepartmentCards
          departmentTitle={'RH'}
          departmentImage={
            'https://blog.unicep.edu.br/wp-content/uploads/2022/09/gestao-pessoas-scaled-1-scaled.jpg'
          }
          handleDepartmentClick={handleDepartmentClick}
        />

        <DepartmentCards
          departmentTitle={'FIN'}
          departmentImage={
            'https://investidorsardinha.r7.com/wp-content/uploads/2021/05/planejamento-financeiro-o-que-e-pra-que-serve-e-como-fazer-3-1200x720.jpg'
          }
          handleDepartmentClick={handleDepartmentClick}
        />
      </Row>
      <Row lg="12" md="12" style={{ borderTop: '2px solid #e0e0e0', paddingTop: '30px', paddingLeft: '130px', paddingRight: '100px', display: 'flex', justifyContent: selectedDepartment ? 'space-evenly' : 'flex-start', alignItems: 'center', marginBottom: '30px' }}>      
        {selectedDepartment ? ( 
          <>
          <AddCollectionCard />
          <FormacaoCards
              formacaoTitle={selectedDepartment.title}
              formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          <FormacaoCards
            formacaoTitle={selectedDepartment.title}
            formacaoThumbnail={selectedDepartment.image}
          />
          </> )
          :
          <AddCollectionCard /> }
      </Row>
    </Container>
  )
}

export default Formacao;

DepartmentCards组件代码 #

import * as React from 'react';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import ButtonBase from '@material-ui/core/ButtonBase';


export default function DepartmentCards({departmentTitle, departmentImage, handleDepartmentClick}) {
  return (
    <div onClick={() => handleDepartmentClick(departmentTitle, departmentImage)}>
        <Card sx={{ width: 275, zIndex: -10 }}>
            <CardContent
                style={{
                backgroundImage: `url(${departmentImage})`,
                backgroundSize: 'cover', // Add this line
                backgroundRepeat: 'no-repeat', // Optional: To prevent repeating
                minHeight: 100, // Adjust the total height accordingly
                }}
            >

            </CardContent>
            <Typography sx={{ fontSize: 30, color: 'black', margin: "10px" }} gutterBottom>
                {departmentTitle}
            </Typography>
        </Card>
    </div>
  );
}

问题原因 #

• Row固定高度限制：Row设置了height: 22vh，卡片总高度超过该值后，容器无法容纳，触发纵向堆叠。
• 未遵循reactstrap网格规范：reactstrap的Row需要配合Col组件使用，直接在Row下放置卡片会破坏Bootstrap的网格布局逻辑，导致排列异常。
• z-index设置异常：Card的z-index: -10会让卡片被容器遮挡，浏览器布局计算时可能误判卡片位置，间接引发堆叠。

修复方案 #

1. 移除Row固定高度：删除Row的height: "22vh"样式，让容器根据卡片内容自适应高度。
2. 用Col组件包裹卡片：每个DepartmentCards外层添加Col组件，指定响应式宽度（如Col lg="3" md="6"），符合Bootstrap网格布局要求，确保横向排列。
3. 调整z-index值：将Card的z-index改为非负值（如z-index: 1），避免卡片被遮挡影响布局。
4. 优化Flexbox属性：若需保留Flexbox，可添加flexWrap: "nowrap"禁止换行，或设置overflowX: "auto"实现横向滚动，确保容器宽度足够容纳所有卡片。

修改后的核心代码示例 #

Formacao组件中Row部分

<Row style={{
  backgroundColor: "red",
  paddingLeft: "100px",
  paddingRight: "100px",
  display: "flex",
  justifyContent: "space-evenly",
  marginTop: "30px",
  marginBottom: "30px",
  flexWrap: "nowrap",
  overflowX: "auto"
}}>
  <Col lg="3" md="6" className="mb-3">
    <DepartmentCards
      departmentTitle={'IT'}
      departmentImage={
        'https://leverageedublog.s3.ap-south-1.amazonaws.com/blog/wp-content/uploads/2019/12/23174648/B-Tech-Degree.jpg'
      }
      handleDepartmentClick={handleDepartmentClick}
    />
  </Col>
  {/* 其余卡片同理用Col包裹 */}
</Row>

DepartmentCards中Card部分

<Card sx={{ width: 275, zIndex: 1 }}>
  {/* 其余代码不变 */}
</Card>

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