iron-flex-layout 使用指南用 Polymer 的 Flexbox 布局类与 CSS Mixin 快速构建响应式布局【免费下载链接】todomvcHelping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more项目地址: https://gitcode.com/gh_mirrors/to/todomvc导读iron-flex-layout是 Polymer Elements 体系中专门为 CSS Flexbox 提供封装的基础组件它不渲染任何可见 DOM而是以两种互补的形式——布局类Layout Classes与自定义 CSS Mixin——把繁琐、易错、充满厂商前缀的 flexbox 声明收敛成一组简单、可记忆、可在标记中直接书写的规则。本文基于仓库内 bower_components/iron-flex-layout/README.md 及其源码与演示页完整讲解两种使用方式的全部类名与 Mixin 清单、apply的用法、Shadow DOM 下的iron-shadow-flex-layout差异并结合 演示页 给出可直接运行的代码示例。读完本文你将能在自己的 Polymer 或 Web Components 项目中用类名或 Mixin 两分钟内搭出水平/垂直布局、弹性伸缩、对齐与固定定位等常见页面骨架。一、组件是什么一种组件两种用法iron-flex-layout的定位与一般组件不同它不提供任何自定义元素标签而是通过引入的样式文件为页面注入两套能力见 iron-flex-layout.html 的源码注释布局类Layout Classes一个基于类的样式表stylesheet提供一组简单的 class 式 flexbox 规则让你直接在 HTML 标记中通过类名如layout horizontal、flex指定布局属性。自定义 CSS Mixin另一个样式表将 flexbox 属性封装为 CSS 自定义属性Custom Properties在 CSS 规则内部通过apply()函数引用例如apply(--layout-horizontal);。两种方式底层是同一套 flexbox 属性区别只在于写在哪里类名写在元素上Mixin 写在样式规则里。项目元数据中bower.json 将组件版本标识为1.2.0描述为 Provide flexbox-based layouts依赖polymer ^1.1.0使用方式即通过 HTML Import 引入iron-flex-layout.html或classes/iron-flex-layout.html。从源码结构看bower_components/iron-flex-layout/目录该组件共包含四个可引入的样式文件文件提供的用法说明iron-flex-layout.htmlCSS Mixin定义--layout-*系列自定义属性供apply()使用classes/iron-flex-layout.html布局类普通选择器.layout.*、.flex*等适用于普通 DOMclasses/iron-shadow-flex-layout.html布局类Shadow DOM 版带html /deep/前缀可穿透 Shadow 边界index.html组件文档页依赖iron-component-page渲染 API 文档见 index.html二、用法一布局类——直接在标记中书写布局布局类适用于不希望写任何 CSS 规则的场景在元素上直接叠加类名即可。核心规则定义在 classes/iron-flex-layout.html。2.1 引入方式link relimport hrefbower_components/iron-flex-layout/classes/iron-flex-layout.html若页面涉及 Shadow DOM 且需要类名穿透样式边界则改用 Shadow 版link relimport hrefbower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html2.2 主方向与换行类以下类名控制容器的display与flex-direction/flex-wrap类名等效 CSS作用layout horizontaldisplay: flex; flex-direction: row;水平排列默认主轴从左到右layout horizontal-reverseflex-direction: row-reverse;水平反向排列layout verticalflex-direction: column;垂直排列layout vertical-reverseflex-direction: column-reverse;垂直反向排列layout inlinedisplay: inline-flex;内联弹性容器layout wrapflex-wrap: wrap;允许换行layout wrap-reverseflex-wrap: wrap-reverse;反向换行源码中这些规则均同时输出-ms-、-webkit-前缀版本以保证 IE 10 与旧版 WebKit 的兼容性。注意horizontal-reverse、wrap等类必须与layout类组合使用例如classlayout horizontal-reverse因为样式表中选择器写法为.layout.horizontal-reverse。2.3 弹性伸缩类flex 比例给子元素添加如下类名控制其在主轴上的伸缩比例类名等效 CSSflex/flex-1flex: 1;flex-autoflex: 1 1 auto;flex-noneflex: none;flex-2…flex-12flex: 2;…flex: 12;其中flex与flex-1是等价的源码中二者共用同一条规则flex-2到flex-12提供 2:1、3:1 等比伸缩档位方便实现中间弹性、两侧固定的经典布局。2.4 对齐类对齐分为三条轴线类名规则如下源码中按注释明确划分交叉轴对齐作用于容器align-itemslayout startflex-start、layout centercenter、layout endflex-end主轴对齐作用于容器justify-contentlayout start-justifiedflex-start、layout center-justifiedcenter、layout end-justifiedflex-end、layout around-justifiedspace-around、layout justifiedspace-between自对齐作用于单个子元素align-selfself-start、self-center、self-end、self-stretch组合速记layout center-center同时设置align-items: center; justify-content: center;即源码注释中的居中速记。2.5 其他通用布局类除 flexbox 外组件还封装了一组高频的定位/显示工具类类名等效 CSSblockdisplay: block;invisiblevisibility: hidden !important;relativeposition: relative;fitposition: absolute; top:0; right:0; bottom:0; left:0;scrolloverflow: auto; -webkit-overflow-scrolling: touch;fullbleedbody 上margin: 0; height: 100vh;fixed-top/fixed-right/fixed-bottom/fixed-left对应方向的position: fixed;贴边固定2.6 布局类完整示例div classlayout horizontal wrap div classflex自适应宽度/div div classflex-2宽度是前者的两倍/div /div div classlayout vertical center-center styleheight: 200px; div水平垂直居中/div /div div classrelative styleheight: 100px; div classfit铺满父容器/div /div三、用法二自定义 CSS Mixin——在样式规则中使用apply如果更习惯把所有布局声明集中在样式表中例如用于组件内封装可以使用 Mixin 版本。规则定义在 iron-flex-layout.html 的:root自定义属性块中。3.1 引入与基本用法link relimport hrefbower_components/iron-flex-layout/iron-flex-layout.html style iscustom-style .my-toolbar { apply(--layout-horizontal); apply(--layout-center); } .my-content { apply(--layout-flex); } /style关键点Mixins 通过apply()函数展开且必须在style iscustom-stylePolymer 的自定义样式块内使用普通style无法识别apply。组件本身也定义了一个基础规则[hidden] { display: none !important; }保证 IE 10 下 HTML5 的hidden属性生效见 iron-flex-layout.html 顶部。3.2 完整 Mixin 清单所有 Mixin 与布局类一一对应便于按需选用容器与方向--layoutdisplay: flex、--layout-inlineinline-flex、--layout-horizontal、--layout-horizontal-reverse、--layout-vertical、--layout-vertical-reverse、--layout-wrap、--layout-wrap-reverse伸缩比例--layout-flex-auto、--layout-flex-none、--layout-flex、--layout-flex-2…--layout-flex-12交叉轴对齐--layout-start、--layout-center、--layout-end主轴对齐--layout-start-justified、--layout-center-justified、--layout-end-justified、--layout-around-justified、--layout-justified、--layout-center-center组合速记自对齐--layout-self-start、--layout-self-center、--layout-self-end、--layout-self-stretch其他--layout-block、--layout-invisible、--layout-relative、--layout-fit、--layout-scroll、--layout-fullbleed、--layout-fixed-top、--layout-fixed-right、--layout-fixed-bottom、--layout-fixed-left。源码细节值得注意的实现差异--layout-flex在标准浏览器下输出flex: 1同时为兼容旧语法额外设置了flex-basis: 0.000000001px见 iron-flex-layout.html 的--layout-flex定义这是为了规避某些浏览器在flex: 1与内容尺寸交互时的旧 bug而类版本.flex则直接输出flex: 1。二者在绝大多数现代浏览器中表现一致。四、Shadow DOM 场景iron-shadow-flex-layout 与 /deep/ 前缀当布局类需要作用于自定义元素内部的 Shadow DOM 子树时普通类样式会被样式边界阻挡。为此组件提供了 classes/iron-shadow-flex-layout.html它与普通类版规则完全相同但每条选择器都带上了html /deep/前缀例如html /deep/ .layout.horizontal { display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; }/deep/即早期的允许选择器穿透 Shadow DOM 边界从而让页面全局的布局类在组件内部依然生效。需要注意的是/deep/属于已被规范淘汰的组合器deprecatedPolymer 1.x 时代的页面通常用它作为过渡方案在当下的新项目中更推荐直接使用 Mixin 方式将apply(--layout-*)写在组件自身的样式块内既不需要穿透边界也符合样式封装原则。五、演示页与可运行示例从源码直接验证效果组件自带一个完整的 演示页覆盖了水平/垂直布局、弹性子元素、伸缩比例、交叉轴对齐、主轴对齐、自对齐、换行与通用工具类共 14 个场景可以直接在浏览器打开验证。演示页使用了一个辅助元素demo-snippet定义在 demo/demo-snippet.html它会把template内的源码渲染出来同时自动高亮显示对应的 CSS 与 HTML。下面摘取演示页中的几个代表性片段均已做简化整理可直接套用水平布局 弹性子元素对应 demo 中 Horizontal and vertical layout 与 Flexible childrenstyle iscustom-style #demo2 { apply(--layout-horizontal); } .flexchild { apply(--layout-flex); } /style div classcontainer iddemo2 divone/div div classflexchildtwo (flex)/div divthree/div /div伸缩比例 3:1:2对应 Flex ratiosstyle iscustom-style #demo4 { apply(--layout-horizontal); } .flexchild { apply(--layout-flex); } .flex2child { apply(--layout-flex-2); } .flex3child { apply(--layout-flex-3); } /style div classcontainer iddemo4 div classflex3childone/div div classflexchildtwo/div div classflex2childthree/div /div换行对应 Wrapping容器固定宽度 200pxstyle iscustom-style #demo13 { apply(--layout-horizontal); apply(--layout-wrap); width: 200px; } /style div classcontainer iddemo13 divone/divdivtwo/divdivthree/divdivfour/div /div自对齐对应 Self alignment四个子元素分别 start / center / end / stretchstyle iscustom-style #demo12 { apply(--layout-horizontal); apply(--layout-justified); height: 120px; } #demo12 div { apply(--layout-flex); } .child1 { apply(--layout-self-start); } .child2 { apply(--layout-self-center); } .child3 { apply(--layout-self-end); } .child4 { apply(--layout-self-stretch); } /style div classcontainer iddemo12 div classchild1one/div div classchild2two/div div classchild3three/div div classchild4four/div /div演示页顶部还演示了通用工具类block、invisible、relativefit其中fit子元素会绝对定位铺满relative父容器可用于实现遮罩层、全屏占位等效果。六、在当前仓库中的应用与选型建议本仓库TodoMVC的 examples/polymer 示例即采用 Polymer 技术栈构建其入口页面通过link relimport hrefelements/elements.build.html引入聚合后的自定义元素见 index.html而iron-flex-layout这类样式型组件通常随bower_components一并分发供应用或自定义元素内部通过apply快速获取布局能力。在实际项目中选用哪种方式可以参考以下准则追求标记可读性、不想维护 CSS使用布局类直接在元素上叠加layout horizontal、flex、layout center-center等类名适合模板与原型快速迭代追求样式集中、便于封装与主题化使用 Mixin把所有布局声明收敛进组件样式块配合style iscustom-style使用适合需要复用、组合多个布局能力的自定义元素类名方式与 Shadow DOM 共存在 Polymer 1.x 时代可用iron-shadow-flex-layout.html的/deep/规则但该选择器已废弃新代码优先考虑 Mixin需要固定定位、全屏、滚动容器等场景两类 API 都内置了对应的固定类/固定 Mixinfixed-top/right/bottom/left、fullbleed、scroll无需手写position与overflow细节。七、总结iron-flex-layout的价值在于把 flexbox 的重复劳动压缩为两个可记忆的 API 面布局类面向标记.layout.*、.flex*、.self-*CSS Mixin 面向样式apply(--layout-*)。两者共享同一套语义与命名horizontal、vertical、wrap、center、justified、fit等并统一处理了 IE 10 与旧 WebKit 的厂商前缀。配合 演示页 中的 14 个示例开发者可以快速对照验证每种布局效果并将其作为 Polymer 1.x 与 Web Components 项目中的通用布局基座。【免费下载链接】todomvcHelping you select a JavaScript framework - Todo apps for React.js, Angular, Vue and many more项目地址: https://gitcode.com/gh_mirrors/to/todomvc创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考