flex-direction: column 使主轴垂直导致子项上下堆叠，多列布局需用 row；align-items: stretch 失效常因父容器无高度、子项设了显式高或 align-self；换行错位应调 align-content；box-sizing 不统一或图片 min-height:auto 也会破坏等高。
为什么 flex-direction: column 会让多列“变单列”
加了
却发现所有子项垂直堆叠、根本不是并排多列？大概率是误设了
。这个值会让主轴变成垂直方向，子项从上到下排列，天然就失去“多列横向布局”的前提。真正需要的是默认的
（或直接不写，它就是初始值）。
只在需要垂直布局（比如侧边栏+主内容区）时才用
多列卡片、网格式展示等场景，必须保持
或省略该声明
如果用了
还想换行，
是基础，否则换行逻辑失效
align-items: stretch 失效的三个常见干扰项
是让子项在交叉轴（垂直方向）自动拉伸等高的默认行为，但它很“娇气”，一碰就停：
父容器没高度参照：比如
且内容极短，整个容器塌缩，子项再拉伸也没空间——加
或
就能唤醒它
子项自己设了
、
或
（尤其图片/视频默认值），会直接覆盖 stretch 行为
某个子项写了
或
，等于主动退出等高队列
flex-wrap 换行后各行高度不齐怎么办
当子项数量多触发换行，你会发现第一行高、第二行矮，整体错位。这不是子项不等高，而是“行”之间没对齐：
关键属性是
，不是
—— 后者管单行内，前者管多行间
设
可让所有行均匀拉伸填满容器高度，但前提是父容器有明确高度（如
）
若不想固定容器高度，改用
更稳妥：
box-sizing 和内部元素怎么悄悄破坏等高
视觉上看着不等高，查来查去代码都对？可能是渲染级误差：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
子项的
不统一：有的
，有的
，padding/border 计算方式不同，差出几像素
子项里有
且没设
，它的默认
会阻止 flex 拉伸
子项用了
做内部布局，虽然不影响外层 stretch，但如果它没撑开自身高度，拉伸后就是大片空白
最该盯住的不是“怎么加代码”，而是删掉所有可能干扰
的显式高度、对齐和盒模型声明。等高是 Flex/Grid 的默认能力，不是靠补丁拼出来的。
display: flexflex-direction: columnflex-direction: rowcolumnrowflex-wrap: wrapflex-direction: rowalign-items: stretchheight: automin-height: 300pxmin-height: 100vhheightmax-heightmin-height: autoalign-self: flex-startcenteralign-contentalign-itemsalign-content: stretchheight: 600pxgriddisplay: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))); align-items: stretch;box-sizingborder-boxcontent-boximgmin-height: 0min-height: autoposition: absolutestretch