时间戳

首页 > 解决方案 > HTML Flex 项目宽度随着项目数量的增加而变化

html - HTML Flex 项目宽度随着项目数量的增加而变化

问题描述

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

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>

标签： htmlcss

解决方案

试试这个：

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

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

推荐阅读