如何用Flexbox实现大屏列100%高度、移动端列重排及适配头部

我帮你梳理下需求对应的实现思路和代码示例，完美解决移动端和大屏端的布局差异问题：

核心需求拆解 #

• 大屏端：Logo无顶部padding/margin，头部整体水平紧凑布局
• 移动端：带购物车的Menu 2与Logo明显分隔开（这里默认采用垂直排列+间距的方式，也可以根据你的视觉需求调整）

实现代码示例 #

HTML结构 #

<header class="site-header">
  <div class="logo">LOGO</div>
  <nav class="header-nav">
    <span class="nav-item">Menu 1</span>
    <span class="nav-item cart-item">Menu 2 🛒</span>
  </nav>
</header>

CSS样式（移动端优先） #

/* 基础移动端样式 */
.site-header {
  display: flex;
  flex-direction: column; /* 垂直排列，天然分隔Logo和菜单 */
  gap: 1.2rem; /* 控制Logo与菜单的间距，实现分隔效果 */
  padding: 0.8rem 1.5rem;
  background-color: #f8f9fa;
}

.logo {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2d3748;
  /* 移动端如果需要顶部间距可以加，大屏会覆盖 */
}

.header-nav {
  display: flex;
  justify-content: flex-end; /* 菜单靠右对齐，购物车在右侧 */
  gap: 1rem;
}

.nav-item {
  padding: 0.6rem 1rem;
  cursor: pointer;
}

.cart-item {
  background-color: #f6ad55;
  border-radius: 4px;
  color: white;
}

/* 大屏端适配（例如768px以上） */
@media (min-width: 768px) {
  .site-header {
    flex-direction: row; /* 切换为水平布局 */
    align-items: center; /* 垂直居中对齐元素 */
    justify-content: space-between; /* Logo左，菜单右，两端对齐 */
    gap: 0; /* 移除垂直布局的间距 */
    padding-top: 0; /* 移除头部顶部内边距，确保Logo无顶部间距 */
    padding-bottom: 0;
  }

  .logo {
    margin-top: 0; /* 强制移除Logo顶部外边距，避免继承样式影响 */
    padding-top: 0;
  }
}

关键逻辑说明 #

1. 移动端布局：利用flex-direction: column让Logo和菜单垂直排列，通过gap属性轻松控制两者的分隔间距，无需额外的margin/padding，布局更简洁。
2. 大屏端适配：通过媒体查询切换为flex-direction: row，结合justify-content: space-between实现经典的左Logo右菜单布局，同时移除顶部的内边距和Logo的顶部间距，完全符合你的要求。
3. Flexbox的特性天然支持响应式布局调整，只需要修改几个核心属性就能切换布局模式，不会出现布局冲突的问题。

如果你的视觉需求有细微调整（比如移动端菜单是水平排列但要和Logo上下分隔），只需要微调flex-direction和间距属性即可，非常灵活！

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