如何用Flexbox实现聊天应用响应式布局（移动端隐藏用户列表）

问题诊断 #

你出现页面空白的核心原因是媒体查询中误隐藏了整个flex容器或两个子元素，正确逻辑应该只隐藏左侧用户列表，保留右侧聊天区域并让它占满全屏。

正确实现代码示例 #

HTML结构

<div class="chat-container">
  <div class="user-list">用户列表区域</div>
  <div class="chat-content">聊天内容区域</div>
</div>

基础CSS（桌面端布局）

/* 外层flex容器 */
.chat-container {
  display: flex;
  height: 100vh; /* 铺满整个视口高度 */
}

/* 用户列表：固定宽度，不被压缩 */
.user-list {
  width: 320px;
  flex-shrink: 0;
  background-color: #f0f2f5;
}

/* 聊天内容：自动填充剩余空间 */
.chat-content {
  flex: 1;
  background-color: #ffffff;
}

移动端媒体查询（适配类似WhatsApp的布局）

/* 以768px作为移动端断点，可根据需求调整 */
@media (max-width: 768px) {
  /* 仅隐藏用户列表 */
  .user-list {
    display: none;
  }

  /* 可选：支持点击按钮唤起用户列表的交互（模拟WhatsApp侧边栏） */
  /* .user-list.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 999;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
  } */
}

关键注意事项 #

• 媒体查询仅针对.user-list设置display: none，不要影响外层容器或.chat-content。
• 桌面端给.user-list加flex-shrink: 0，防止聊天区域挤压用户列表宽度。
• 如果需要移动端可切换显示用户列表，建议用类名控制显隐（如注释中的.active类），而非直接写死隐藏，提升交互体验。

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