Why won't polymer's flex attribute/class just work?

Question

Browser: Firefox v35 OS: Linux Ubuntu 14, Polymer: v1.4

Was following Rob Dodson's polycasts - most of the videos mention using 'flex' (flexbox) to achieve responsive designs. I however have had a rough time getting it to work..

In the sample file listed below,

the flex attribute on the paper-header-panel is superflous (even without it, the element stretches - note the blue border
the flex attribute on the span tag within the toolbar DOES work - see the more icon scoot all the way to the right. This is good / expected
Finally I'd like the div with the content class to 'flex' - but it won't. Ideally there should be no white area.

The documentation & guide isn't helping a bit. Even the snippets on the guide are not working for me.

Code follows:

<!DOCTYPE html>
<html>

<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

<link rel='import' href='elements.html' />
<link rel="stylesheet" href="app.css" />
<style>
    .icon-snooze {
        color: red;
        width: 48px;
        height: 48px;
    }
</style>


<style is="custom-style" include='iron-flex iron-positioning'>
    body {
        border: 1px dashed red;
    }
    
    paper-header-panel {
        border: 2px dashed dodgerblue;
    }
    
    .content {
        border: 2px dashed tomato;
        background-color: var(--paper-light-blue-500);
    }
</style>

</head>

<body class='fullbleed vertical layout'>

<paper-header-panel class='flex'>
    <paper-toolbar>
        <paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
        <div>Header</div>
        <span class='flex'></span>
        <paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>

    </paper-toolbar>
    <div class='content flex'>Content </div>

</paper-header-panel>
</body>
</html>

More observations:
Horizontal flex works as expected/out of the box.

For the vertical flex, it works if I set an explicit height on the parent/container - which kinda defeats the purpose.

<body class='fullbleed vertical layout'>
<div class='layout vertical container' style='height:50vh;' >
    <div>one</div>
    <div class="flex">two (won't flex without height set)</div>
    <div>three</div>
</div>
<div class='layout horizontal container'>
    <div>one</div>
    <div class="flex">two (will flex)</div>
    <div>three</div>
</div>
</div>

JFYI - I've included iron-flex-layout-classes.html in my elements.html ...included in snippet — Gishu
Bear in mind that the classes approach to iron-flex-layout uses the /deep/ combinator which is being deprecated. You should use the mixins in iron-flex-layout.html instead — Alan Dávalos
@Alan - Are you sure about this ? From the iron-flex-layout.html code comments: Please note that the old /deep/ layout classes are deprecated, and should not be used. To continue using layout properties directly in markup, please switch to using the new dom-module-based layout classes. — Gishu
The iron-flex-layout-classes.html found in the iron-flex-layout github root is the correct file to use. — Snekw
@Gishu yeah, you're right, I thought the iron-flex-layout-classes.html file was still using the old classes model but as you mentioned it's not doing so — Alan Dávalos

Snekw Snekw · Accepted Answer · 2016-04-26T12:51:05

iron-flex-layout can be a hard one to use at the beginning and even later down the road.

Let's breakdown how we can achive the desired output.
First we need that fullbleed class on the body. That makes it so we are using the full size of the screen. Then we add the <paper-header-panel> element that will take care of displaying, positioning and sizing of our header and content. We don't need to add any classes to the paper-header-panel.
Next we add in two div elements. Other is the actual header with the paper-header class and other is the content host with fit class. The fit class takes care of making sure that our content fills the whole screen.

Inside of the first div with paper-header class we add in our toolbar and other content just as you had provided. That works and is correct.

If you would like to have different layout type for your content (horizontal or vertical for example) you can add the needed classess to the div with the fit class.

See the code below.

<!doctype html>

<head>
  <meta charset="utf-8">
  <!---- >
  <base href="https://polygit.org/components/">
  Toggle below/above as backup when server is down
  <!---->
  <base href="https://polygit2.appspot.com/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-header-panel/paper-header-panel.html">
  <link rel="import" href="paper-toolbar/paper-toolbar.html">
  <link rel="import" href="paper-icon-button/paper-icon-button.html">
  <link rel="import" href="iron-icons/iron-icons.html">
  <link rel="import" href="iron-icon/iron-icon.html">
  <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html">

  <style is="custom-style" include='iron-flex iron-positioning'>
    body {
      border: 1px dashed red;
    }
    paper-header-panel {
      border: 2px dashed dodgerblue;
    }
    .fit {
      @apply(--iron-positoning-fit);
      height: 100%;
      border: 2px dashed tomato;
      background-color: #00B7FF;
    }
  </style>

</head>

<body class='fullbleed'>
  <paper-header-panel>
    <div class="paper-header">
      <paper-toolbar>
        <paper-icon-button id="navicon" icon="icons:menu"></paper-icon-button>
        <div>Header</div>
        <span class="flex"></span>
        <paper-icon-button id='morebutton' icon='icons:more-vert'></paper-icon-button>
      </paper-toolbar>
    </div>
    <div class="fit">
      <div>Content</div>
    </div>
  </paper-header-panel>
</body>

Why won't polymer's flex attribute/class just work?

1 Answers