使用Flexbox布局时卡片偏移且出现滚动条的问题排查求助

我遇到了一个布局问题：我有三张卡片，需要它们在页面中居中显示且各块间距一致，于是决定使用Flexbox布局。但实际效果是第三张卡片偏到了右侧，页面还出现了滚动条。以下是对应区块的HTML代码和CSS代码，请问我哪里出错了？

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Четвертое задание</title>
</head>
<body>
    <div class="container">
        <div class="menu-container">
            <h1 class="main-header">Menu</h1>
            <div>
                <a href="index.html">Main page</a>
            </div>
            <div>
                <a href="./contacts/contacts.html">Contacts</a>
            </div>
        </div>
        <main>
            <div class="main-container">
                <div class="reasons">
                    <h2>Why do we do this?</h2>
                    <p class="paragraph">What was built to be the ultimate platform for the free sharing of knowledge has turned into a money-hungry monster feasting on our privacy and freedom.</p>
                    <p class="paragraph">But fear not, we have the answer! And it’s simple: An autonomous peer-to-peer network featuring distributed storage powered by universal compression, accelerated scheduling allocation, and end-to-end encryption.</p>
                </div>
                <div class="product-info">
                    <h2>For whom?</h2>
                    <p class="paragraph">Our product is built for users, by users. You supply the storage, compute, and networking resources that power our entire decentralized web.</p>
                </div>
            </div>
            <div class="what-we-do">
                <div class="card">
                    <img class="photo-card" src="./img/1stcard.jpg" alt="laptop">
                    <h4 class="fourth-head">Lenovo IdeaPad S145-15IGM</h4>
                    <p class="paragraph"> The Lenovo IdeaPad S145-15IGM is a reliable and easy-to-use entry-level laptop.</p>
                </div>
                <div class="card">
                    <img class="photo-card" src="./img/2ndcard.jpg" alt="laptop">
                    <h4 class="fourth-head">Acer Nitro 5 AN515-54-51CU</h4>
                    <p class="paragraph"> Acer Nitro 5 is ready to go on a journey with the owner, providing a solid filling at the disposal of the gamer</p>
                </div>
                <div class="card">
                    <img class="photo-card" src="./img/3dcard.jpg" alt="monitor">
                    <h4 class="fourth-head">Samsung C24RG50FQI</h4>
                    <p class="paragraph">Samsung C24RG50FQI curved gaming monitor with a resolution of 1920 x 1080 pixels</p>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

CSS代码 #

.what-we-do{
    border: 1px solid #356EAD;
    display: flex;
    justify-content: space-between;
}
.what-we-do .photo-card{
    width: 150px;
    height: 100px;
}
.card{
    height: max-content;
    border: 1px solid #1F3F68;
    border-radius: 6px;
}

问题分析 #

咱们来拆解下问题出在哪：

1. justify-content: space-between的特性：这个属性会让flex元素两端对齐，中间间距相等，但如果你的.what-we-do容器没有设置合适的宽度限制，或者卡片总宽度加上间距超过了容器/视口宽度，就会导致最后一张卡片被挤到视口外，出现横向滚动条。
2. 缺少内边距和居中控制：你的容器没有设置margin: 0 auto来让整个卡片组在页面居中，也没有内边距，卡片直接贴容器边框，视觉上也会显得奇怪。
3. 卡片宽度未分配：卡片没有设置flex属性来平分容器空间，导致它们只占自身内容宽度，加上space-between的两端对齐，很容易出现溢出。

解决方案 #

我调整了你的CSS代码，解决这些问题的同时还优化了响应式效果：

.what-we-do{
    border: 1px solid #356EAD;
    display: flex;
    justify-content: center; /* 改为居中对齐，避免两端对齐的溢出问题 */
    gap: 1rem; /* 用gap直接设置卡片间距，比margin更省心 */
    padding: 1rem; /* 给容器加内边距，避免卡片贴边框 */
    max-width: 1200px; /* 限制容器最大宽度，防止在大屏上拉得太宽 */
    margin: 0 auto; /* 让整个卡片组在页面居中 */
    flex-wrap: wrap; /* 小屏幕自动换行，避免横向溢出 */
}
.what-we-do .photo-card{
    width: 150px;
    height: 100px;
    object-fit: cover; /* 保持图片比例，防止拉伸变形 */
}
.card{
    flex: 1; /* 让每张卡片平分容器可用宽度 */
    min-width: 250px; /* 设置最小宽度，小屏幕上也不会太窄 */
    height: max-content;
    border: 1px solid #1F3F68;
    border-radius: 6px;
    padding: 1rem; /* 卡片内部加内边距，内容更美观 */
}

关键修改点说明 #

• gap: 1rem：替代margin来控制卡片间距，不会出现外边距折叠的问题，代码更简洁。
• justify-content: center：让卡片组在容器内居中，配合容器的margin: 0 auto，整个区块就会在页面中间显示。
• flex: 1：确保三张卡片宽度一致，自动平分容器的可用空间。
• min-width: 250px：避免在小屏幕上卡片被压缩得太窄，保证内容可读性。
• flex-wrap: wrap：当屏幕宽度不够放下三张卡片时，自动换行，彻底解决横向滚动条问题。

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