三栏响应式头部适配：将中间栏移至两侧栏下方

直接用Flexbox结合媒体查询就能实现你要的效果，核心是利用Flex的换行特性和媒体查询触发布局调整，替代原来的浮动布局：

完整代码实现 #

HTML结构 #

<div class="header-container">
  <div class="left">LOGO</div>
  <div class="middle">MENU</div>
  <div class="right">ICON</div>
</div>

CSS样式 #

/* 基础Flex布局设置 */
.header-container {
  display: flex;
  flex-wrap: wrap; /* 允许子元素空间不足时换行 */
  align-items: center;
}

/* LOGO栏：固定宽度，不压缩 */
.left {
  width: 397px;
  background: red;
  color: white;
  flex-shrink: 0;
}

/* MENU栏：默认占剩余空间，最小宽度955px */
.middle {
  min-width: 955px;
  background: gray;
  color: white;
  flex-grow: 1;
  margin: 0 10px; /* 可选：增加与两侧的间距 */
}

/* ICON栏：固定宽度，不压缩 */
.right {
  width: 88px;
  background: blue;
  color: white;
  flex-shrink: 0;
}

/* 媒体查询：窗口宽度不足时调整布局 */
@media (max-width: 1440px) { /* 计算值：397+955+88=1440，可按需调整 */
  .middle {
    flex-basis: 100%; /* 让MENU占满整行，自动移到下方 */
    margin: 10px 0; /* 可选：增加上下间距 */
  }
}

关键要点 #

• 用flex-wrap: wrap开启Flex的换行能力，这是实现MENU下移的核心
• flex-shrink: 0保证LOGO和ICON不会被压缩变形，维持固定宽度
• 媒体查询的触发宽度根据你设置的各栏宽度总和计算，当窗口小于这个值时，MENU会被强制占满整行，自然落到LOGO和ICON的下方
• 替换原来的浮动布局，Flex在响应式布局中更灵活可控

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