Polymerjs iron-flex-layout元素 _Polymerjs元素

【Polymerjs iron-flex-layout元素】< 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 = "http://www.srcmini.com/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 = "http://www.srcmini.com/bower_components/webcomponentsjs/webcomponents-lite.min.js"> < /script> < link rel = "import"href = "http://www.srcmini.com/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>

输出