Polymer - 铁布局

<iron-flex-layout> 元素对于提供 CSS 灵活布局很有用，也被称为Flexbox。

Flexbox 可以以两种不同的方式使用 -

布局类 - 它是提供基于类的 Flexbox 特定规则的样式表，其中布局属性直接在标记中定义。
自定义 CSS 混合 - 它是包含自定义 CSS 混合的样式表，我们可以借助于 @apply 函数在 CSS 规则内应用。

示例

要使用 iron-flex-layout 元素，请导航到命令提示符中的项目文件夹并使用以下命令 -

bower install PolymerElements/iron-flex-layout --save

以上命令在 bower_components 文件夹中安装铁布局元素。接下来，使用以下命令在 index.html 中导入 iron-flex-layout 文件 -

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

以下示例演示了 iron-flex-layout 元素的使用 -

<!DOCTYPE html>
<html>
   <head>
      <title>iron-flex-layout</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <script src = "bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
      <link rel = "import"
         href = "bower_components/iron-flex-layout/classes/iron-flex-layout.html">
    
      <style>
         body {
            font-weight: 300;
         }
         div {
            border: 2px solid DarkCyan ;
            background-color: white;
         }
         .layout {
            margin-bottom: 25px;
            background-color: DarkCyan ;
         }
         p {
            margin: 10px;
         }
      </style>
   </head>
   
   <body>
      <h2>Iron-Flex-Layout</h2>
      <div class = "horizontal layout">
         <div><p>Delta</p></div>
         <div><p>Epsilon (flex)</p></div>
         <div><p>Zeta</p></div>
      </div>
   </body>
</html>

输出

要运行应用程序，请导航至您的项目目录并运行以下命令 -

polymer serve

现在，打开浏览器并导航到http://127.0.0.1:8081/。以下是输出。

polymer_elements.htm

打印页面