Flexbox横向排列失效求助：嵌套容器未按预期方向布局

安全阿岳

2026-7-19

解决Flex容器子元素垂直排列的问题

核心问题：CSS选择器错误

你写的.SexSupport .content是后代选择器，作用是选中.SexSupport元素下的.content子元素，但你的HTML里容器是<div class="SexSupport content">——这是同一个元素同时拥有两个类名，正确的选择器应该是.SexSupport.content（两个类名之间无空格）。这个错误导致你的flex布局规则根本没生效，子元素自然保持默认的垂直排列。

完整修复方案

修正容器的CSS选择器，确保flex规则生效
给两个子元素设置合理宽度，避免因宽度占满容器导致换行

修改后的CSS代码：

#SexSupport {
    background-color: #223843;
    margin: 0;
    padding: 2rem; /* 增加内边距避免内容贴边 */
}

/* 修正选择器：连写两个类名，选中同时拥有这两个类的元素 */
.SexSupport.content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem; /* 给子元素之间添加间距，更贴合设计效果 */
}

.SexSupport.text {
    flex: 1; /* 让文本容器占据容器剩余空间 */
    color: #fff; /* 增加白色文字，避免深色背景下内容不可见 */
}

.SexSupportPic {
    max-height: 80vh;
    width: auto;
    flex-shrink: 0; /* 防止图片被压缩变形 */
}