Yeti 的 columns 布局以容器宽度为阈值的零断点等宽列【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti导读本篇讲解 YetiCSS-first、零构建的原生布局框架中的columns布局原语它把一组等权重的子元素定价档位、功能摘要、统计数据行在容器足够宽时排成一行等宽列在容器变窄时自动逐行堆叠——切换由容器宽度决定而不是由视口断点决定。读完本文你将掌握columns的完整用法、data-threshold/data-limit/data-span等全部配置属性及其底层 flexbox 数学原理并能写出在侧边栏与全宽区块中都能复用的同一份标记。什么时候用它一组「平等」的东西columns适用场景非常明确内容元素彼此地位平等。官方文档给出的典型例子是定价档位pricing tiers功能摘要feature summaries一行统计数据a row of statistics这些内容的共同点是空间足够时它们应该肩并肩排开side by side空间不足时应该上下堆叠one under another。而columns与常见栅格系统的关键差异在于——判断「空间足不足」的是容器而不是屏幕。也就是说无论这段内容出现在一个窄窄的侧边栏还是出现在一个横贯页面的全宽区块里它都会自行决定采用列排还是行排开发者不需要针对每个出现位置单独写断点。核心机制flex-basis 的阈值翻转columns的切换完全由 CSS 计算完成没有任何 JavaScript。整个实现的灵魂在 columns.css 中每个子元素的那一行.columns * { margin: 0; flex-grow: 1; flex-basis: calc((var(--_yeti-threshold) - 100%) * 999); }公式拆解如下--_yeti-threshold是阈值即容器宽度由data-threshold控制缺省为--yeti-width-md即 32rem100%是容器的宽度因为子元素是 flex item其百分比是相对容器解析的两者相减再乘以 999会得到一个绝对值极大的数。这个巨大数值的符号就是开关本身容器宽度 阈值时(阈值 - 容器宽度)是负数乘以 999 后是一个极大的负数。flexbox 的flex-basis对负数会自动钳制clamp为 0于是每个子元素的 basis 都是 0flex-grow: 1把剩余空间在它们之间均分——一行等宽列。容器宽度 阈值时(阈值 - 容器宽度)是正数乘以 999 后是一个极大的正数超过容器宽度每个子元素都占满一行——逐行堆叠。这正是文档中所说的「threshold minus the containers width, multiplied by a large number」的精确实现。你可以在 columns.spec.js 的测试用例里看到这个切换点的验证在--yeti-width-md阈值两侧各 2px 的位置子元素分别处于同一行所有 top 值相同与三行三个不同 top 值的状态。值得注意的一点是阈值对比的是容器宽度100%而非视口宽度因此这套机制完全等价于一次「基于容器查询的布局切换」只是它用纯calc()完成甚至不需要container语法。这也是 manifest 中support.unguarded记录为flexbox gap与calc() in flex-basis的原因见 manifest.json。基本用法把columns类加到容器上直接放入子元素即可div classcolumns>div classcolumns>.columns { display: flex; flex-wrap: wrap; align-items: var(--_yeti-align); justify-content: var(--_yeti-justify); gap: var(--_yeti-gap); }其中--_yeti-align、--_yeti-justify、--_yeti-gap都由后面的 data 属性提供各属性的默认值也写在 columns.css 中无data-gap时用--yeti-space-md无data-threshold时用--yeti-width-md无data-align时是stretch无data-justify时是flex-start。完整属性参考columns的全部可配置项都通过 data 属性暴露。以下属性清单来自 manifest.json取值词汇表来自 vocabulary.json属性到私有 CSS 变量的映射在 attributes.css 中属性可选值词汇表默认值作用data-thresholdxssmmdlgxl2xlmd容器宽度低于该值后列变成行data-gapnonexssmmdlgxl2xl3xl以及全部流式组合如sm-md、lg-xlmd列与列、行与行之间的间距data-alignstartcenterendstretchbaselinestretch列的垂直交叉轴对齐data-justifystartcenterendbetweenaroundevenlystart列未占满一行时在主轴的分布方式data-limit2345无不限制一行最多允许的列数超出者独占整行data-span子元素123456无该子元素占有几份份额几倍于普通兄弟的宽度data-threshold阈值宽度阈值直接取自 Yeti 的宽度刻度 space.css--yeti-width-*是固定 rem 值xs16rem、sm24rem、md32rem、lg48rem、xl64rem、2xl80rem。它们在 rem 中定义、跟随访问者的根字号缩放因为「阈值是内容宽度的度量而非字号的度量」见 space.css 的注释。映射规则见 attributes.css[data-thresholdlg] { --_yeti-threshold: var(--yeti-width-lg); }。data-limit一行最多几列data-limit通过:nth-child选择器实现从第 N1 个子元素开始把flex-basis直接钉死为100%使其永远独占一行。实现见 columns.css.columns[data-limit2] :nth-child(n 3), .columns[data-limit3] :nth-child(n 4), .columns[data-limit4] :nth-child(n 5), .columns[data-limit5] :nth-child(n 6) { flex-basis: 100%; }注意这只影响行数上限data-limit2时第 3 个及之后的子元素各占一整行但第 1、2 个元素依然受阈值控制——容器窄于阈值时它们依然堆叠。因此data-limit与阈值是两个独立的维度阈值决定「够不够宽」limit 决定「够宽时一行最多几个」。对应测试见 columns.spec.js其中断言第三个元素 top 值不小于第一行底部即换到下一行且宽度等于容器宽度。data-span给某个子元素加倍份额普通情况下所有子元素flex-grow: 1均分一行。data-span允许打破均分它把flex-grow设为对应倍数因此data-span2的元素分得普通兄弟两倍的份额.columns [data-span] { flex-grow: var(--_yeti-span); }--_yeti-span由 attributes.css 的[data-span2]等规则提供。官方文档给出的经典案例div classcolumns article contenteditable="false">【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
