Polymer Iron Flex 布局

2025 年 3 月 17 日 | 阅读 1 分钟

<iron-flex-layout> 元素用于提供 CSS 弹性盒子布局。它也被称为 flexbox。

您可以使用 flexbox 以两种不同的方式

布局类: 布局类是一个样式表，它提供基于类的 flexbox 的某些规则，其中布局属性直接在标记中定义。
自定义 CSS 混入: 它是一个样式表，其中包含自定义 CSS 混入，可以在 CSS 规则中使用 @apply 函数应用。

示例

打开命令提示符并转到您的项目文件夹，使用以下命令实现 iron-flex-layout 元素

现在，您可以使用以下命令在您的 index.html 中导入 iron-flex-layout 文件

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

<!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>

输出

下一主题Iron Form

Polymer Iron Flex 布局

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Polymer 教程

Polymer 元素

App 元素

Iron 元素

Paper 元素

Google 组件

Gold 元素

Neon 元素

Platinum 元素

自定义元素

Shadow DOM & 样式

Polymer 事件

Polymer 数据系统

Polymer 工具

Polymer Iron Flex 布局

示例

相关帖子

Iron 表单

Iron 图标

可滑动容器

Iron 图像

Iron 下拉

Iron 元素

Iron A11y 键

Iron 折叠

Iron Ajax

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器