Layouts in polymer

Polymer.js is a great tool!

There are tons of things that you can do with polymer, one best thing is aligning your elements with ease. Even before flex alignment existed Polymer used to help people to align elements as they need.
To get started you need to include the following js on to your project.

import "@polymer/iron-flex-layout/iron-flex-layout";
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
/*And add those classes to your template*/
<style is="custom-style"
      include="Iron-flex Iron-flex-reverse Iron-flex-alignment Iron-flex-factors Iron-positioning"></style>

Below are the list of classes that are available to layout your elements. Here is link to play with those classes link
@apply — layout-horizontal;
@apply — layout-vertical;
@apply — layout-flex;
@apply — layout-flex-2;
@apply — layout-flex-3; …
@apply — layout-flex-12;
@apply — layout-flex-auto;
@apply — layout-flex-none;
@apply — layout-center;
@apply — layout-center-center;
@apply — layout-center-justified;
@apply — layout-start;
@apply — layout-end;
@apply — layout-start-justified;
@apply — layout-end-justified;
@apply — layout-justified;
@apply — layout-around-justified;
@apply — layout-self-start;
@apply — layout-self-center;
@apply — layout-self-end;
@apply — layout-self-stretch;
@apply — layout-baseline
@apply — layout-self-baseline;
@apply — layout-wrap;
@apply — layout-horizontal-reverse;
@apply — layout-vertical-reverse;
@apply — layout-wrap-reverse;
@apply — layout-block;
@apply — layout-invisible;
@apply — layout-relative;
@apply — layout-inline;
@apply — layout-no-wrap;
@apply — layout-start-aligned;
@apply — layout-end-aligned;
@apply — layout-center-aligned;
@apply — layout-between-aligned;
@apply — layout-around-aligned;
@apply — layout-fit;
@apply — layout-scroll;
@apply — layout-fixed-bottom;
@apply — layout-fixed-left;
@apply — layout-fixed-right;
@apply — layout-fixed-top;