ポリマー-鉄フレックスレイアウト

<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/ に移動します。出力は次のようになります。

Iron Flex Layout

Polymer-iron-flex-layout

ポリマー-鉄フレックスレイアウト

例

出力