Polymer Iron Flex Layout

by Online Tutorials Library July 14, 2022

Polymer Iron Flex Layout

The <iron-flex-layout> element is used to provide CSS flexible box layout. It is also known as flexbox.

You can use flexbox in two different ways:

Layout classes: The layout class is a stylesheet which provides certain rules of class-based flexbox where the layout properties are directly defined in the markup.
Custom CSS mixins: It is a stylesheet which contains custom CSS mixins, which can be applied inside a CSS rule with the help of @apply function.

Example

Open command prompt and go to your project folder to implement iron-flex-layout element by using the following command:

iron flex layout

Now, you can import the iron-flex-layout file in your index.html using the following command:

  <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>  

Output:

iron flex layout 2

Next TopicIron Form

Polymer Iron Flex Layout

Polymer Iron Flex Layout

Example

Apache Pig UNION Operator

PostgreSQL BIGINT

You may also like