当 flex 方向为 row 时，卡片大小会发生变化答案

【问题标题】：cards size change when the flex direction is row当 flex 方向为 row 时，卡片大小会发生变化
【发布时间】：2022-11-21 18:49:12
【问题描述】：

我有几张卡片是用 CSS 和 React.js 制作的，我为它们设置了高度和宽度，但是当我将 flex 方向从列更改为行时，卡片会自动变小，为什么会这样？

卡片的css和js代码

CSS

.card{
    height: 50%;
    width: 30%;
    min-width: 30%;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
}

.card:hover{
    cursor: pointer;
}

img{
    height: 80%;
    width: 100%;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

.schoolName{
    font-weight: 700;
    color: #100F0F;
    margin-top: 10px;
    margin-left: 4px;
}

.sub{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.schoolLocation{
    color: #100F0F;
    margin-left: 4px;
}

.reviews{
    color: #100F0F;
    margin-right: 4px;
}

@media only screen and (max-width: 600px){
    .card{
        height: 40%;
        width: 80%;
    }
    .schoolName{
        font-size: 20px;
    }
}

    <div className={PopularCardCSS.card}>
          <img src={props.schoolImage} alt="school" />
      <div className={PopularCardCSS.cardContent}>

            <h2 className={PopularCardCSS.schoolName}>{props.schoolName}</h2>

            <div className={PopularCardCSS.sub}>
              
            <p className={PopularCardCSS.schoolLocation}>
              {props.schoolLocation}
            </p>
            <p className={PopularCardCSS.reviews}>
              <span className={PopularCardCSS.rating}>{props.reviews} reviews</span>
            </p>

            </div>
      </div>
    </div>

调用卡片的组件

CSS

.parent{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    background-image: url(../assets/background2.jpeg);
    background-size: cover;
}

.glass{
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    height: 100vh;
    /* display: flex;
    flex-direction: row; */
}

.cardContainer{
    display: flex;
    flex-direction: row;
}

    <div className={PopularCSS.card}>
        <div className={PopularCSS.parent}>
          <div className={PopularCSS.glass}>
            <h1 className={PopularCSS.title}>Popular Schools</h1> 
           
            <div className={PopularCSS.cardContainer}>
            <div className= {PopularCSS.school}>
            <PopularCard
            schoolImage = {schoolimage}
            schoolName="Ron Arad" 
            schoolLocation="Rehovot" 
            reviews="4"
            />
            </div>

            <div className= {PopularCSS.school}>
            <PopularCard
            schoolImage = {schoolimage}
            schoolName="Ron Arad" 
            schoolLocation="Rehovot" 
            reviews="4"
            />
            </div>

我尝试添加 flex wrap 或设置 min-height 或 min-width 但没有任何改变

【问题讨论】：

您是否尝试在 flex-direction 为行时添加宽度/最大宽度？
您以 % 为单位给出了高度和宽度，当您的 flex-direction 为“列”时，高度和宽度与您的 flex-direction 为“行”时的高度和宽度不同。尝试以 px 为单位给出宽度和高度。
你能写一个需要更改的类名的例子并将其作为答案发送吗？ @TarunKumarSao

标签： javascript css reactjs flexbox

【解决方案1】：

Flex 正如名字让你猜是灵活的。我会用最大值试试

【讨论】：

你能写一个例子吗？