Flex布局services区块row容器未按行排列问题咨询

问题根因 #

你误将flex布局属性绑定到了.services外层容器，而非需要横向排列的.row容器：

• 当前.services的直接子元素为<h1>Services</h1>和.row容器，你设置的flex属性只会让这两个元素横向排列
• .row本身未设置任何flex属性，作为块级元素其内部的.box默认纵向堆叠

修复方案 #

调整你的CSS代码即可，全程仅使用flex属性，未涉及grid规则，符合练习要求：

/* 替换原有的.services样式，删除多余的flex配置 */
.services{
    background-color: rgba(221, 218, 218, 0.404);
    width: 1400px;
    padding: 20px;
}
/* 给services区块内的row容器新增flex配置 */
.services .row{
    display: flex;
    flex-direction: row;
    gap: 30px; /* 可自行调整三个服务卡片的间距 */
}
/* 给服务卡片设置基础布局，避免内容挤压变形 */
.services .box{
    display: flex;
    width: 30%;
}

可选优化 #

你当前给.services设置了固定1400px宽度，若需要适配不同尺寸的屏幕，可以将宽度属性调整为：

.services{
    /* 替换原有width:1400px */
    max-width: 1400px;
    margin: 0 auto; /* 实现容器水平居中 */
}

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