freeCodeCamp练习中如何通过媒体查询实现列转行响应式布局？

现有代码的核心问题 #

当前编写的媒体查询配置存在逻辑错位，直接导致适配效果不符合预期：

• 600px断点下给父容器#body设置的flex-direction: row，没有搭配子元素的宽度占比规则，就算加了flex-wrap: wrap-reverse也无法触发换行形成上下排布
• 给#navbar、#main-doc单独设置的grid-template-rows: 50%属于无效配置：这个属性仅用于控制元素自身内部的网格行划分，完全不涉及这两个兄弟元素在父容器中的宽度占比与排列顺序，属于属性误用
• 基础布局（600px以上屏幕）的25%/75%两列规则没有做明确的边界划分，导致不同屏幕尺寸下的布局状态混乱

可直接落地的调整方案 #

分两档明确书写样式规则，避免断点内外的逻辑冲突：

1. 断点外基础样式（适用于屏幕宽度>600px）
   固定父容器的横向排布规则，明确两个列元素的初始占比：

   /* 父容器为包裹#navbar和#main-doc的最外层布局容器 */
   #body {
     display: flex;
     flex-direction: row;
     min-height: 100vh;
   }
   /* 左侧导航初始占25%宽度，防止被flex默认规则压缩 */
   #navbar {
     width: 25%;
     flex-shrink: 0;
   }
   /* 右侧主内容自动填充剩余宽度，最终占比为75% */
   #main-doc {
     flex-grow: 1;
   }
   

2. 断点内适配样式（适用于屏幕宽度≤600px）
   直接修改父容器的排布方向，去掉多余的换行逻辑：

   @media screen and (max-width: 600px) {  
     #body {
       /* 切换为纵向排布，直接让两个子元素上下堆叠 */
       flex-direction: column;
     }
     /* 两个子元素占满父容器全宽，自然形成上下两行的结构 */
     #navbar, #main-doc {
       width: 100%;
     }
   }
   

优化注意事项 #

• 如果倾向用flex-wrap实现换行效果，需要给两个子元素设置width: 100%才能触发换行，相比直接修改flex-direction: column会增加不必要的布局计算量，稳定性也更差
• 严格区分元素内部布局属性和元素在父容器中的布局规则：grid-template-*系列属性仅用于控制元素自身的子节点排布，控制兄弟元素的排列顺序、宽度占比，要通过父容器的排布规则、子元素的宽度属性实现，属性误用是之前调整一直不生效的核心原因
• 实现上下两行结构时，两个元素分别占满整行宽度，自然满足上下排布的视觉效果；如果需要两行的高度均分父容器总高度，可以在媒体查询内给两个子元素补充height: 50%的规则——毕竟上下排列的元素如果设置50%宽度，反而会回到并排排布的状态，和上下排布的目标冲突

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