HTML Flex项目宽度随着项目数量的增加而变化[重复]答案

【问题标题】：HTML Flex item width changes with increase in number of items [duplicate]HTML Flex项目宽度随着项目数量的增加而变化[重复]
【发布时间】：2021-08-01 20:37:37
【问题描述】：

我试图制作一个可滚动（在 X 方向）的 flexbox 容器来显示卡片，但随着卡片数量的增加卡片的宽度会减小，但我希望卡片的宽度相同，即使它溢出身体。我也试过这个Full width flex items，但没用，请帮帮我

boyd{
overflow:hidden}

.container {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 100%;
}

.container .card {
    padding: 10px;
    border: 0.3px solid rgba(219, 214, 214, 0.801);
    border-radius: 5px;
    box-shadow: 1px 4px 8px 0px rgba(219, 214, 214, 0.801);
    width: 18rem;
}

.card-head {
    text-align: center;
}

.cardimg img {
    width: 95%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Practice Website</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>
        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>

        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>

        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>


        <div class="card">
            <div class="cardimg">
                <img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
            </div>
            <div class="card-head">
                Lorem ipsum dolor sit amet.
            </div>
            <div class="card-body">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
            </div>
        </div>
    </div>
    <div class="mainbody">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque delectus excepturi quas, placeat voluptatibus quam similique magni in dicta eligendi ratione, amet quaerat debitis quo ipsum quasi. Numquam, eos veritatis?50
    </div>
    
</body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

试试这个：

.container .card {
    flex-shrink: 0;
    /* ... */
}

flex-shrink 文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink

【讨论】：

是的，这对我有用，谢谢兄弟。我错了容器我实际上是将 flex-shrik 添加到容器而不是 item