align-items: stretch 失效因缺少交叉轴尺寸基准，需父容器有明确高度或被 flex 分配空间；子项设 height、align-self 等会覆盖该行为；grid 天然等高最省心，float 和 column-count 各有适用边界且忌混用。
Flexbox 的 align-items: stretch 为什么没生效
不是 Flex 不灵，是 align-items: stretch 缺少可参照的交叉轴尺寸基准。它默认开启，但只在父容器有明确高度（或被上层 flex 容器用 flex: 1 分配空间）时才真正拉伸子项。
常见失效场景：
- 父容器没设
height或min-height，也没被嵌套在另一个display: flex容器里 → 拉伸无参照 - 某个子项写了
height、max-height或min-height: 0→ 直接覆盖 stretch 行为 - 子项用了
align-self: flex-start或display: table-cell→ 主动退出拉伸队列 - 子项内部有未约束的
<img>（缺max-width: 100%或height: auto）→ 单列被撑高，导致 stretch 基准错乱
Grid 实现等高多列最省心，但要注意断点切换
display: grid 天然等高，子项默认按容器高度拉齐，不用额外 hack。关键在于用 grid-template-columns 控制列宽逻辑，而不是靠子项自己写 height。
典型写法：
-
grid-template-columns: 200px 1fr 200px→ 左右定宽，中间自适应 -
grid-template-columns: 1fr 2fr 1fr→ 三栏按比例分配，主内容占一半 - 移动端必须加
@media (max-width: 768px)，把grid-template-columns改成1fr，否则三栏会横向挤在一起 - IE11 不支持
gap，得回退写grid-column-gap和grid-row-gap
float 布局做响应式多列，清除浮动和盒模型是命门
float 方案虽老，但在需兼容极旧环境或简单静态页时仍有用。但它不天然等高，等高要靠 JS 或额外 CSS 模拟，且极易因盒模型混乱出错。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
必须守住的底线：
- 全局加
* { box-sizing: border-box; }，否则width: 33.33%+padding: 10px就超宽 - 浮动容器要用
.row::after清除浮动，否则父容器塌陷，高度为 0 - 响应式切列数时，别只改
width，还要同步重置float和clear行为 - 小屏下强制单列，用
width: 100%; float: none;，别漏掉clear: both
column-count 做文本分栏，不是页面结构布局
column-count 和 column-width 是专为长文本设计的多列模块，作用对象是块内文字流，不是 <div> 这类结构容器。误用它来“布局三栏导航”会导致语义错乱、交互失常、SEO 降权。<p>适用边界很清晰：</p>
<ul>
<li>只用于 <code><article></article>、<p></p>、<section></section> 等纯内容容器
column-span: all
column-count: 1
真正麻烦的不是选哪种方案，而是混用：比如在 Grid 容器里给子项加 float，或在 Flex 容器里又写 column-count。这类组合一旦出现，调试成本远高于重写。
