求助：将8列Flexbox网格在移动端改为2列各50%宽度

没问题，这其实是Flexbox响应式布局里非常常见的需求，我来帮你快速搞定！

要让你的8列Flex网格在移动端变成2列各50%的布局，只需要通过媒体查询调整网格项的flex属性就可以了，具体步骤如下：

1. 确保你的Flex容器已经开启换行功能
   首先检查你的网格容器（比如.o-grid）是否设置了flex-wrap: wrap，如果没有的话一定要加上，这样当屏幕宽度不够时，网格项才会自动换行：

   .o-grid {
     display: flex;
     flex-wrap: wrap; /* 关键：允许子项换行 */
     /* 其他现有样式保持不变 */
   }
   

2. 添加移动端媒体查询，修改网格项宽度
   针对移动端屏幕（比如设置最大宽度为768px，你可以根据需求调整这个值），给每个网格项设置固定的50%宽度：

   @media (max-width: 768px) {
     .o-grid__item {
       flex: 0 0 50%; /* 强制占据50%宽度，不收缩也不拉伸 */
       box-sizing: border-box; /* 确保padding/border不会超出50%宽度 */
     }
   }
   

补充说明： #

• flex: 0 0 50% 是flex-grow: 0（不允许拉伸）、flex-shrink: 0（不允许收缩）、flex-basis: 50%（基准宽度50%）的简写，这样能保证每个网格项在移动端稳定占据一半宽度。
• box-sizing: border-box 非常重要，它会让元素的内边距和边框都包含在设定的宽度内，避免出现网格项宽度超过50%导致意外换行的情况。

按照这个方法修改后，你的网格在移动端就会自动堆叠成2列，每列宽度刚好50%啦！

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