Iron flex layout: not getting the proper layout

Question

i am using iron flex layout https://www.webcomponents.org/element/PolymerElements/iron-flex-layout i wanted to align my div like a dashboard view but i am not able to align the boxes, i am using the layout standards https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html mentioned here, no other iron flex styling is working other than layout inline layout-start

The template look likes

 </custom-style>
 <style>

    .layout {
     background-color: #263367;
     padding: 12px;
     margin: 4px;
     height: 300px;
   }
   .layout.center-justified{
     background-color: #289378;
     padding: 12px;
     margin: 4px;
     height: 100px;

 }

   </style>

   <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

   <div class="layout inline layout-start" style="height: 74px width:24px">
     <div>cross axis start alignment</div>
   </div>

    <div class="layout inline layout-start" style="height: 154px">
   <div>cross axis start alignment</div>
   </div>

  <div class="layout inline layout-start" style="height: 154px">
  <div>cross axis start alignment</div>
 </div>

  <div class="layout inline layout-start" style="height: 154px">
     <div>cross axis start alignment</div>
  </div>

The div is not showing when i am using layout inline layout-center-justified

 <div class="layout inline layout-center-justified" style="height: 154px">
      <div>cross axis start alignment</div>
     </div>

can anyone guide me how should i style the below boxes so that it can come according to my requirment and how should i use https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout-classes.html so that i can use other layout classes?

Ofisora Ofisora · Accepted Answer · 2017-09-02T01:53:02

To use the iron-flex-layout make sure you read this guide: https://elements.polymer-project.org/guides/flex-layout.

To use layout classes import the iron-flex-layout-classes file. You must do the followings in any element that uses any of the iron-flex-layout styles:

Import the file

<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">

Include the modules in style

<style include="iron-flex iron-flex-alignment">

If you want to learn basics about CSS flexbox, click here.

For you problem you will need at least one flex container.

Here is the updated code using flex container:

<template>
    <style include="iron-flex iron-flex-alignment">

      .inline {
        background-color: #263367;
        padding: 12px;
        margin: 4px;
        /*height: 300px;*/
        border: 1px solid black;

      }

      .layout-center-justified {
        background-color: #289378;
        padding: 12px;
        margin: 4px;
        /*height: 100px;*/
      }
    </style>


    <div class="vertical layout">
      <div class="horizontal layout justified">
        <div class="layout inline layout-center-justified" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout flex inline layout-start" style="height: 74px width:24px">
          <div>cross axis start alignment</div>
        </div>
      </div>
      <div class="horizontal layout justified">
        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>

        <div class="layout inline layout-start" style="height: 154px">
          <div>cross axis start alignment</div>
        </div>
      </div>
    </div>
</template>

Check out the demo here.

Iron flex layout: not getting the proper layout

1 Answers