Flex / Grid 布局

这一页同时生成 Flex 与 Grid 两份 CSS 和一张实时预览，两份描述的是同一版式的两种实现，粘哪一份都行。预览格每个盒子的宽×高都是 getBoundingClientRect 量出来的此刻值（容器尺寸、各项宽度合计、相邻两项实测间距、Flex 主轴剩余空间），容器一变这些数就变；resize 会自动重测，也可按「重新测量」手动跑一次。auto-fill 与 auto-fit 的差别同样是量出来的：同一容器宽、同一项数下各建一个离屏网格（visibility:hidden、挪出屏幕）取单项宽，轨道数按 floor((容器宽+间距)/(下限+间距)) 算。

Grid 侧没有独立的 justify-items 控件，对齐走 place-items 这个两值简写。「附 -ms- 前缀段」勾上后追加的 IE10 前缀段只出现在页面上、不进下载文件，Grid 那段只输出 `-ms-grid-columns` / `-ms-grid-rows` 两行提示（repeat() 原样留着并注「未展开」、minmax() 换成单值），因为 2012 草案里没有 repeat()/minmax()/grid-auto-flow/命名区域/gap，要兼容得自己把轨道逐条写全。列和行两栏都查，轨道声明与命名区域只要不合法就当场报错并点名是哪一条声明；命名区域判错时 grid-template-areas 整条不输出，只在 CSS 里留一条注释。版本号为文档记载，实际以你目标引擎组合的实测为准；本页不请求任何外部接口，参数只在内存里拼装。

Flex / Grid 布局怎么用

• 一次只铺开一组：顶部这对按钮同时决定「显示哪组参数」和「预览按哪个引擎画」，另一组整组隐藏，但填过的值与开关状态都留在原地，切回来照旧，所以不必怕切走。下方两份 CSS 始终并排同时生成，标题右侧写「N 字符 · 当前参数组」或「N 字符 · 参数组已隐藏，值保留」——它们描述的是同一版式的两种实现，粘哪一份都行，Grid 版在行列语义上更容易被读代码的人看懂。「子项数（两版共用）」在工具条上，改它两侧一起跟着变。「子项数」两版共用，上限 60，超出只画前 60 并在角标与提示里写明截断数。
• 读实算的那几行数：底部「失效控件与兼容降级」是原生折叠，标题实时写着「当前看 Flex 一组：失效/冲突 2 条 + 兼容口径 5 条 = 7 行」（默认参数下的数），它随参数变；点开只影响这张表可不可见，不影响已经生成的 CSS，收起时判定照旧生效。表里 align-content 在 nowrap 下是「不起作用」，column 方向下 justify-content / align-items 是「换轴生效」（管的轴转了 90°，值本身没变），有子项写了 flex-basis 时 align-items: stretch 报「不起作用」；Grid 侧 place-items 取 start/center/end 时报「不起作用」（子项自带尺寸时看不出差别），两条模板都留空时报 grid-template-columns 走隐式轨道，写了命名区域时 grid-auto-flow 变成「只管区域没覆盖到的空格」，命名区域与显式 grid-template-rows 同时给则是「相互冲突」。控件变暗的判定同时套用 Flex 与 Grid 两套参数（标签后加「当前不生效 / 管的轴变了」，悬停看原因），不随预览引擎切换改变。子项表超过 8 行默认只列前 8 行，下面一行写「共 N 项：表里先列 8 行，其余 M 项也参与预览与 CSS」，展开只影响这张表的可见行数。兼容表按本次真的输出了哪些属性逐条生成，不给一刀切的「IE 不支持」：用了 gap 才谈版本口径（Grid 是 Chrome 57 / Firefox 52 / Safari 10.1 / Edge 16，flex 容器要 Chrome 84 / Firefox 63 / Safari 14.1，IE 全系与老 Safari 整条忽略声明而不是缩小），子项出现过 grow>0、shrink≠1 或 basis≠auto 才谈 flex 简写与无单位 basis 那条坑，命中 basis:auto 且有伸缩才提示 min-width:auto 与 flexbugs #1、并在子项块补 min-width: 0；reverse、repeat()/minmax()、auto-fill/auto-fit、grid-template-areas、非 row 的 grid-auto-flow 只在被用到时出现，一条不命中就只留「本次只用了一维基础属性」。
• 输出与复位：两份 CSS 与两张表都是可选中文本，本页没有复制按钮。「下载 .css（两份合一）」打包的是两份终版语法，即使勾了「附 -ms- 前缀段」，前缀段也只出现在页面上、不进文件（页面另给一条提示写明这点）。「全部复位」把 Flex 与 Grid 两套参数回到默认、关掉 -ms 开关并把子项表收回到前 8 行，但不切走当前显示的参数组，也不动底部那张表。页面底部写明口径出处是 MDN 浏览器兼容性表、CSS Flexbox/Grid 规范与 flexbugs 收录的 IE 缺陷，版本号为文档记载，实际以你目标引擎组合的实测为准；本页不请求任何外部接口，参数只在内存里拼装。前缀段也逐条映射：-ms-flex-pack 与 -ms-flex-align 由固定对照表翻成 2012 取值，无单位 basis 补成 px 并写明「IE10/11 会把带无单位 basis 的 -ms-flex 整条判无效（flexbugs 收录）、终版建议 0 写成 0%」，IE10 没有 gap 就注明间距要用子项 margin 模拟，reverse 另附一条与 flex-wrap 组合的定位缺陷注释（措辞是「flexbugs 收录」，不断言具体表现）。
• Flex 组有哪些控件：Flex 那组是五个分段选择——flex-direction（4 值）、flex-wrap（3 值）、justify-content（6 值）、align-items（5 值）、align-content（7 值），外加 row-gap 与 column-gap 两个 0–200 的数字框；子项按表格逐个调，grow、shrink、basis 收自由文本（auto / 200px / 33.333% 直接进 CSS），order 与 align-self（6 值），另有三个快捷按钮：全部子项 flex:1 1 0%、复位 0 1 auto、首项 basis 200px。
• Grid 组有哪些控件、轨道怎么查：Grid 那组换成 grid-template-columns 与 grid-template-rows 文本框（默认 repeat(auto-fill, minmax(120px, 1fr))）、grid-auto-flow 四值、grid-auto-rows 与 grid-auto-columns、两个 gap、place-items 四值、place-content 六值，加一个命名区域文本域（一行一个网格行，格子名用空格分开，空白格写 .）。轨道声明超过 400 字符、括号不配平、repeat() 嵌套、repeat 次数不是非负整数也不是 auto-fill/auto-fit、minmax() 少一个逗号分隔值、某段轨道不在合法值表（各长度单位与 fr、auto、min/max/fit-content 与 inherit 一类关键字）里，都当场报错并点名是哪一条声明（repeat 展开数截到 40 条以免撑爆预览）。分隔符认空格也认逗号，但只在顶层算——括号里的逗号不算，minmax(120px, 1fr) 不会被拆坏；连写的分隔符只出一份，repeat() 的第二段逐条检查、按条展开（repeat(2, 1fr 20px) 是 4 条轨道）。minmax 的下限只从 minmax(数值, …) 里取那个数，单位不参与换算，写 rem/% 时按数字当 px 用。那两句解释只给列轨道（没有 fr 轨道时容器宽有剩余也不会自动铺满，剩余空间由 place-content 摆放；auto-fill 的轨道数按容器宽度取 N 条近似，只用于预览测量），行轨道只取报错。命名区域要求每行列数一致、区域名以字母开头后可接字母数字下划线连字符、非矩形直接判错；合法时另为每个名字生成 `选择器 > .名字 { grid-area: 名字 }` 的对照块。

常见问题