Polymer-iron-flex-layout
提供:Dev Guides
ポリマー-鉄フレックスレイアウト
<iron-flex-layout>要素は、CSSフレキシブルボックスレイアウトを提供するのに役立ち、 flexbox とも呼ばれます。
フレックスボックスは、2つの異なる方法で使用することができます-
- レイアウトクラス-レイアウトプロパティがマークアップで直接定義されているクラスベースのフレックスボックスの特定のルールを提供するスタイルシートです。
- カスタムCSSミックスイン-カスタムCSSミックスインを含むスタイルシートで、@ apply関数を使用してCSSルール内に適用できます。
例
iron-flex-layout要素を使用するには、コマンドプロンプトでプロジェクトフォルダに移動し、次のコマンドを使用します-
bower install PolymerElements/iron-flex-layout --save
上記のコマンドは、bower_componentsフォルダーにiron-flex-layout要素をインストールします。 次に、次のコマンドを使用して、indexlにiron-flex-layoutファイルをインポートします-
<link rel = "import" href = "/bower_components/iron-flex-layout/iron-flex-layoutl">
次の例は、鉄フレックスレイアウト要素の使用を示しています-
<!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-layoutl">
<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/ に移動します。 出力は次のようになります。