当 Flex 容器中仅剩一个可见子元素时，通过 flex: 1 结合条件性 display: none（而非 visibility: hidden），可确保该元素稳定占据 50% 宽度并居中显示，同时兼顾双元素并存时的等分布局。
当 flex 容器中仅剩一个可见子元素时，通过 `flex: 1` 结合条件性 `display: none`（而非 `visibility: hidden`），可确保该元素稳定占据 50% 宽度并居中显示，同时兼顾双元素并存时的等分布局。
在响应式布局中，使用 Flex 实现双栏等宽结构很常见，但当其中一栏（如 .second-list）内容为空并被隐藏后，另一栏（.first-list）常会自动撑满整个容器宽度，破坏视觉一致性。根本原因在于：width: 100% 在 Flex 环境下与父容器行为冲突，且单纯隐藏元素若未正确释放空间，会导致布局塌陷或错位。
✅ 正确解法是放弃固定 width，改用 Flex 专属属性控制尺寸与可见性：
- 给两个子元素统一设置
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），使其在有兄弟元素时均分可用空间； - 当需隐藏某栏时，使用
display: none（彻底移出文档流），而非visibility: hidden（仍占空间）； - 为保证单栏时居中且宽度严格为 50%，可额外添加
margin: 0 auto或借助justify-content: center配合max-width: 50%—— 但更简洁可靠的方式是保持flex: 1并确保隐藏逻辑正确。
示例 CSS：
.list-detail {
display: flex;
gap: 1rem; /* 推荐使用 gap 替代 margin-left */
justify-content: center; /* 可选：增强单栏时的居中鲁棒性 */
}
.first-list,
.second-list {
flex: 1; /* 核心：自动均分，不依赖 width */
min-width: 0; /* 防止内容溢出影响 flex 计算 */
height: 200px; /* 示例高度 */
border: 2px solid #333;
}JavaScript 隐藏逻辑（jQuery 示例）：
// 当 second-list 无内容时隐藏
if ($('.second-list').is(':empty') || $('.second-list').text().trim() === '') {
$('.second-list').hide(); // 等价于 display: none
// 此时 .first-list 自动获得 100% 的 flex 分配权？❌ 错！
// 实际因 flex: 1 + 单子项，它将占据全部剩余空间 → 需约束宽度
}⚠️ 注意：仅靠 flex: 1 在单子项时无法自动限制为 50%，因此需补充约束——推荐以下任一方式：
-
方式一（推荐）：为子元素设
max-width: 50%.first-list, .second-list { flex: 1; max-width: 50%; /* 关键：单栏时上限为 50% */ } -
方式二：使用
flex-basis: 50%替代flex: 1.first-list, .second-list { flex: 0 1 50%; /* 不增长、可收缩、基准宽 50% */ }此时即使
.second-list被display: none，.first-list仍保持flex-basis: 50%，且justify-content: center可确保其居中。
? 总结：避免在 Flex 子项上使用 width；优先用 flex 相关属性控制尺寸；隐藏务必用 display: none；单栏场景下，max-width: 50% 或 flex: 0 1 50% 是实现「50% 宽度 + 居中」最可控、兼容性最佳的组合方案。
