srcmini<iron-flex-layout>元素用于提供CSS灵活框布局。也称为flexbox。
你可以通过两种不同的方式使用flexbox：
- 布局类：布局类是一种样式表, 它提供基于类的Flexbox的某些规则, 其中布局属性直接在标记中定义。
- 自定义CSS混合插件：这是一个样式表, 其中包含自定义CSS混合插件, 可以在@apply函数的帮助下将其应用于CSS规则中。
例子
打开命令提示符, 并使用以下命令转到你的项目文件夹以实现iron-flex-layout元素：
bower install PolymerElements/iron-flex-layout -save
现在, 你可以使用以下命令将iron-flex-layout文件导入index.html中：
<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>输出
评论前必须登录！
注册