默认设 flex-direction: row 适配PC端横向，再用 @media (max-width: 480px) 切换为 column 实现手机端纵向堆叠；必须配合 display: flex 且同步调整 justify-content 和 align-items，子项在 column 下需显式设 width: 100% 才能撑满。
flex-direction 在不同断点下的取值逻辑
PC端横向排列、手机端纵向堆叠，本质是靠 flex-direction 切换 row 和 column，但不能硬写死——必须配合媒体查询动态控制。直接在根容器上写 flex-direction: column; 会导致 PC 端也竖排，这是初学者最常踩的坑。
正确做法是：默认设为 row（适配宽屏），再用 @media (max-width: 768px) 覆盖为 column。注意断点值要和项目实际响应阈值一致，768px 是常见平板临界点，手机通常更小，可进一步收紧到 480px 或 425px。
- 别用
min-width反向写，容易和设计稿断点错位 - 如果父容器有
flex-wrap: wrap，手机端切column后无需担心换行，因为单列下换行失效 - 确保父元素已声明
display: flex，否则flex-direction完全不生效
移动端堆叠时子项宽度没占满怎么办
切到 column 后，子元素默认按内容宽度收缩，看起来“没铺满”，其实是 flex-basis 和 width 没同步更新。Flex 项在 column 主轴是垂直方向，此时 width 变成交叉轴，需显式设为 100%。
示例：
立即学习“前端免费学习笔记（深入）”；
.container {
display: flex;
flex-direction: row;
}
.container > * {
flex: 1; /* PC端等分 */
}
@media (max-width: 480px) {
.container {
flex-direction: column;
}
.container > * {
flex: none; /* 关闭弹性缩放，避免高度被压扁 */
width: 100%; /* 关键：让每个子项撑满容器宽度 */
}
}- 不加
flex: none的话，flex: 1在 column 下会让所有子项等高，而不是等宽 - 如果子项内有图片或按钮，记得检查它们自身的
max-width是否限制了宽度继承 - 用
box-sizing: border-box避免 padding/border 导致溢出
justify-content 和 align-items 在横/纵切换时的行为差异
横向（row）时，justify-content 控制水平对齐，align-items 控制垂直对齐；切换到纵向（column）后，二者作用轴互换——这点极易混淆。比如 justify-content: center 在 PC 端居中水平排列，在手机端就变成居中垂直堆叠（即所有子项在容器中间上下排列），往往不是你想要的效果。
- 手机端通常希望子项顶部对齐，那就该设
justify-content: flex-start（column 下就是顶部） - 若想保持 PC 端水平居中 + 手机端顶部对齐，两个断点里都要单独声明
justify-content，不能依赖默认值 -
align-items在 column 下控制的是“每项的水平对齐”，所以align-items: center手机端会让所有子项居中对齐，这个行为反而更常用
为什么用了 flex 仍出现横向滚动条
页面底部出现横向滚动条，90% 是因为某个子项（比如图片、表格、预格式化文本）的固有宽度超出容器，而 flex 默认不会强制缩小它。即使父容器是 flex-direction: row，只要一个子项宽度超限，整行就会溢出。
- 给所有可能超宽的子项加
max-width: 100%，特别是<img alt="怎样使用CSS Flexbox实现PC端横向排列与手机端纵向堆叠" >和<table> <li>避免对子项写死 <code>width: 300px这类绝对值，改用flex: 0 1 auto或width: min(300px, 100%) - 用 Chrome DevTools 的“Layout”面板勾选“Show flexbox overlays”，能直观看到主轴/交叉轴方向和溢出源头
真正麻烦的不是怎么写，而是忘了某处嵌套的第三方组件自带固定宽度，或者某个 white-space: nowrap 的文本块卡死了 flex 缩放。这类问题得一层层查 computed styles，不能只盯 flex 声明本身。
