Flexbox自适应布局咨询：大屏垂直操作列转小屏水平排列

核心思路 #

利用 Flexbox 的弹性布局特性结合媒体查询，分别定义大屏和小屏下的容器排列方向、元素尺寸规则，实现布局自适应切换。

实现代码 #

HTML 结构

<div class="layout-container">
  <!-- 左侧网格 -->
  <div class="grid left-grid">
    <div class="grid-item">左侧元素1</div>
    <div class="grid-item">左侧元素2</div>
    <div class="grid-item">左侧元素3</div>
  </div>

  <!-- 操作列 -->
  <div class="action-column">
    <button class="action-btn">→</button>
    <button class="action-btn">←</button>
    <button class="action-btn">↑</button>
    <button class="action-btn">↓</button>
  </div>

  <!-- 右侧网格 -->
  <div class="grid right-grid">
    <div class="grid-item">右侧元素1</div>
    <div class="grid-item">右侧元素2</div>
  </div>
</div>

CSS 样式

/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 大屏布局（默认生效） */
.layout-container {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  height: 100vh;
}

.grid {
  flex: 1; /* 左右网格平分剩余空间 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.8rem;
  padding: 0.8rem;
  border: 1px solid #ddd;
  overflow-y: auto;
}

.grid-item {
  padding: 1rem;
  background: #f5f5f5;
  border-radius: 4px;
  text-align: center;
}

.action-column {
  width: 80px; /* 固定操作列宽度 */
  display: flex;
  flex-direction: column; /* 按钮垂直排列 */
  gap: 0.8rem;
  justify-content: center;
}

.action-btn {
  flex: 1; /* 按钮平分操作列高度 */
  font-size: 1.2rem;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
}

/* 小屏适配（断点可根据需求调整） */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column; /* 整体改为垂直排列 */
    height: auto;
  }

  .action-column {
    width: auto; /* 取消固定宽度 */
    flex-direction: row; /* 按钮横向排列 */
    justify-content: center;
    padding: 0.8rem 0;
  }

  .action-btn {
    flex: 0 0 auto; /* 取消高度平分，自适应内容 */
    padding: 0.6rem 1.2rem;
  }

  .grid {
    min-height: 200px; /* 给网格设置最小高度，避免内容过少时塌陷 */
  }
}

关键说明 #

• 大屏模式：外层容器横向排列，左右网格通过flex:1占满剩余空间，操作列固定宽度且内部按钮垂直平分高度，保证布局紧凑对齐。
• 小屏模式：通过媒体查询将外层容器改为垂直排列，操作列转为横向布局，按钮调整为自适应尺寸，节省垂直空间，同时给网格设置最小高度避免布局塌陷。
• 可根据实际需求调整断点宽度、操作列宽度、网格布局参数等。

内容的提问来源于stack exchange，提问作者Jean-Luc T.