Polymer - Iron Flex Layout

The <iron-flex-layout> element is useful for providing CSS flexible box layout and is also called as flexbox.

The flexbox can be used in two different ways −

  • Layout classes − It is a stylesheet providing certain rules of class-based flexbox where the layout properties are directly defined in the markup.

  • Custom CSS mixins − It is a stylesheet containing custom CSS mixins, which we can apply inside a CSS rule with the help of @apply function.


To use the iron-flex-layout element, navigate to your project folder in the command prompt and use the following command −

bower install PolymerElements/iron-flex-layout --save

The above command installs the iron-flex-layout element in bower_components folder. Next, 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">

The following example demonstrates the use of iron-flex-layout element −

<!DOCTYPE html>
      <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">
         body {
            font-weight: 300;
         div {
            border: 2px solid DarkCyan ;
            background-color: white;
         .layout {
            margin-bottom: 25px;
            background-color: DarkCyan ;
         p {
            margin: 10px;
      <div class = "horizontal layout">
         <div><p>Epsilon (flex)</p></div>


To run the application, navigate to your project directory and run the following command −

polymer serve

Now open the browser and navigate to Following will be the output.

Iron Flex Layout
Kickstart Your Career

Get certified by completing the course

Get Started