基于Flex布局实现双显示模式的技术需求求助

核心思路 #

利用Flex布局的弹性伸缩特性实现双模式适配：模式1保留标题+内容区域，模式2隐藏标题后，内容区域自动填充原标题的空间；关闭按钮通过绝对定位固定在右上角，不干扰Flex布局的正常流。

实现代码 #

HTML结构

<div class="container">
  <button class="close-btn">×</button>
  <div class="title">模式1标题</div>
  <div class="content">
    这里是内容区域，模式1时在标题下方，模式2时会填满整个容器的高度
  </div>
</div>
<!-- 演示用切换按钮 -->
<button onclick="toggleMode()">切换模式</button>

CSS样式

.container {
  position: relative; /* 为关闭按钮的绝对定位提供参考 */
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

.title {
  padding: 15px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1; /* 关键：自动填充容器剩余垂直空间 */
  padding: 15px;
  overflow-y: auto; /* 内容过多时允许滚动 */
}

/* 模式2样式：隐藏标题 */
.container.mode-2 .title {
  display: none;
}

JS切换逻辑（演示用）

function toggleMode() {
  const container = document.querySelector('.container');
  container.classList.toggle('mode-2');
  const title = document.querySelector('.title');
  title.textContent = container.classList.contains('mode-2') ? '' : '模式1标题';
}

关键细节说明 #

• flex: 1：给内容区域设置该属性后，它会自动占据容器中除标题外的所有剩余垂直空间；当标题隐藏时，直接填满整个容器高度。
• 绝对定位关闭按钮：脱离文档流，始终固定在右上角，不会影响Flex布局的元素排列。
• 模式切换仅需给容器添加/移除mode-2类，通过CSS控制标题显示隐藏，无需修改布局结构。

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