Polymer - Iron Flex Layout
<iron-flex-layout> 元素可用于提供 CSS 弹性框布局，也称为 flexbox。
弹性框可以以两种不同的方式使用 −
布局类 − 它是一个样式表，提供基于类的弹性框的某些规则，其中布局属性直接在标记中定义。
自定义 CSS 混合 −它是一个包含自定义 CSS mixin 的样式表，我们可以借助 @apply 函数将其应用于 CSS 规则中。
示例
要使用 iron-flex-layout 元素，请在命令提示符中导航到您的项目文件夹并使用以下命令 −
bower install PolymerElements/iron-flex-layout --save
上述命令在 bower_components 文件夹中安装 iron-flex-layout 元素。接下来，使用以下命令将 iron-flex-layout 文件导入到 index.html 中 −
<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.html
