企业官网建设流程全解析

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 的源码注释）：

1. 布局类（Layout Classes）：一个基于类的样式表（stylesheet），提供一组简单的 class 式 flexbox 规则，让你直接在 HTML 标记中通过类名（如layout horizontal、flex）指定布局属性。
2. 自定义 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/目录），该组件共包含四个可引入的样式文件：

二、用法一：布局类——直接在标记中书写布局

布局类适用于不希望写任何 CSS 规则的场景：在元素上直接叠加类名即可。核心规则定义在 classes/iron-flex-layout.html。

2.1 引入方式

<link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">

若页面涉及 Shadow DOM 且需要类名穿透样式边界，则改用 Shadow 版：

<link rel="import" href="bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html">

2.2 主方向与换行类

以下类名控制容器的display与flex-direction/flex-wrap：

源码中这些规则均同时输出-ms-、-webkit-前缀版本，以保证 IE 10 与旧版 WebKit 的兼容性。注意horizontal-reverse、wrap等类必须与layout类组合使用（例如class="layout horizontal-reverse"），因为样式表中选择器写法为.layout.horizontal-reverse。

2.3 弹性伸缩类（flex 比例）

给子元素添加如下类名，控制其在主轴上的伸缩比例：

其中flex与flex-1是等价的（源码中二者共用同一条规则），flex-2到flex-12提供 2:1、3:1 等比伸缩档位，方便实现"中间弹性、两侧固定"的经典布局。

2.4 对齐类

对齐分为三条轴线，类名规则如下（源码中按注释明确划分）：

• 交叉轴对齐（作用于容器，align-items）：layout start（flex-start）、layout center（center）、layout end（flex-end）；
• 主轴对齐（作用于容器，justify-content）：layout start-justified（flex-start）、layout center-justified（center）、layout end-justified（flex-end）、layout around-justified（space-around）、layout justified（space-between）；
• 自对齐（作用于单个子元素，align-self）：self-start、self-center、self-end、self-stretch；
• 组合速记：layout center-center同时设置align-items: center; justify-content: center;，即源码注释中的"居中速记"。

2.5 其他通用布局类

除 flexbox 外，组件还封装了一组高频的定位/显示工具类：

2.6 布局类完整示例

<div class="layout horizontal wrap"> <div class="flex">自适应宽度</div> <div class="flex-2">宽度是前者的两倍</div> </div> <div class="layout vertical center-center" style="height: 200px;"> <div>水平垂直居中</div> </div> <div class="relative" style="height: 100px;"> <div class="fit">铺满父容器</div> </div>

三、用法二：自定义 CSS Mixin——在样式规则中使用@apply

如果更习惯把所有布局声明集中在样式表中（例如用于组件内封装），可以使用 Mixin 版本。规则定义在 iron-flex-layout.html 的:root自定义属性块中。

3.1 引入与基本用法

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> <style is="custom-style"> .my-toolbar { @apply(--layout-horizontal); @apply(--layout-center); } .my-content { @apply(--layout-flex); } </style>

关键点：Mixins 通过@apply()函数展开，且必须在<style is="custom-style">（Polymer 的自定义样式块）内使用，普通<style>无法识别@apply。组件本身也定义了一个基础规则[hidden] { display: none !important; }，保证 IE 10 下 HTML5 的hidden属性生效（见 iron-flex-layout.html 顶部）。

3.2 完整 Mixin 清单

所有 Mixin 与布局类一一对应，便于按需选用：

• 容器与方向：--layout（display: flex）、--layout-inline（inline-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/属于已被规范淘汰的组合器（deprecated），Polymer 1.x 时代的页面通常用它作为过渡方案；在当下的新项目中，更推荐直接使用 Mixin 方式，将@apply(--layout-*)写在组件自身的样式块内，既不需要穿透边界，也符合样式封装原则。

五、演示页与可运行示例：从源码直接验证效果

组件自带一个完整的 演示页，覆盖了水平/垂直布局、弹性子元素、伸缩比例、交叉轴对齐、主轴对齐、自对齐、换行与通用工具类共 14 个场景，可以直接在浏览器打开验证。演示页使用了一个辅助元素demo-snippet（定义在 demo/demo-snippet.html），它会把<template>内的源码渲染出来，同时自动高亮显示对应的 CSS 与 HTML。

下面摘取演示页中的几个代表性片段（均已做简化整理，可直接套用）：

水平布局 + 弹性子元素（对应 demo 中 "Horizontal and vertical layout" 与 "Flexible children"）：

<style is="custom-style"> #demo2 { @apply(--layout-horizontal); } .flexchild { @apply(--layout-flex); } </style> <div class="container" id="demo2"> <div>one</div> <div class="flexchild">two (flex)</div> <div>three</div> </div>

伸缩比例 3:1:2（对应 "Flex ratios"）：

<style is="custom-style"> #demo4 { @apply(--layout-horizontal); } .flexchild { @apply(--layout-flex); } .flex2child { @apply(--layout-flex-2); } .flex3child { @apply(--layout-flex-3); } </style> <div class="container" id="demo4"> <div class="flex3child">one</div> <div class="flexchild">two</div> <div class="flex2child">three</div> </div>

换行（对应 "Wrapping"，容器固定宽度 200px）：

<style is="custom-style"> #demo13 { @apply(--layout-horizontal); @apply(--layout-wrap); width: 200px; } </style> <div class="container" id="demo13"> <div>one</div><div>two</div><div>three</div><div>four</div> </div>

自对齐（对应 "Self alignment"，四个子元素分别 start / center / end / stretch）：

<style is="custom-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 class="container" id="demo12"> <div class="child1">one</div> <div class="child2">two</div> <div class="child3">three</div> <div class="child4">four</div> </div>

演示页顶部还演示了通用工具类（block、invisible、relative+fit），其中fit子元素会绝对定位铺满relative父容器，可用于实现遮罩层、全屏占位等效果。

六、在当前仓库中的应用与选型建议

本仓库（TodoMVC）的 examples/polymer 示例即采用 Polymer 技术栈构建，其入口页面通过<link rel="import" href="elements/elements.build.html">引入聚合后的自定义元素（见 index.html），而iron-flex-layout这类样式型组件通常随bower_components一并分发，供应用或自定义元素内部通过@apply快速获取布局能力。

在实际项目中选用哪种方式，可以参考以下准则：

• 追求标记可读性、不想维护 CSS：使用布局类，直接在元素上叠加layout horizontal、flex、layout center-center等类名，适合模板与原型快速迭代；
• 追求样式集中、便于封装与主题化：使用 Mixin，把所有布局声明收敛进组件样式块，配合<style is="custom-style">使用，适合需要复用、组合多个布局能力的自定义元素；
• 类名方式与 Shadow DOM 共存：在 Polymer 1.x 时代可用iron-shadow-flex-layout.html的/deep/规则，但该选择器已废弃，新代码优先考虑 Mixin；
• 需要固定定位、全屏、滚动容器等场景：两类 API 都内置了对应的固定类/固定 Mixin（fixed-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