Polymer layout and flex attribute

Question

I'm trying to understand how layouts work in Polymer and I the following thing puzzled me

    <div class="category-item leaderboard" vertical layout>
    <div class="tile theme-bg-a" dummy fit></div>
    <div class="tile" flex vertical layout>
      <div flex relative>
        <!-- sizing wrapper -->
        <div fit layout vertical center center-justified>
          <div class="category-bg-wrapper" relative>
            <core-icon icon="category-icons:leaderboard" class="category-tile-bg" fit></core-icon>
          </div>
        </div>
      </div>
      <div class="cat-name" horizontal center layout>
        <div flex>Leaderboard</div>
        <core-icon class="category-icon" icon="arrow-forward"></core-icon>
      </div>
    </div>
  </div>

In the 3rd line above (<div class="tile" flex vertical layout>), how does "flex" attribute effect layout and why is it needed? In the documentation (https://www.polymer-project.org/docs/polymer/layout-attrs.html) it says:

When a container includes the layout attribute, it can become a flex container. You can specify horizontal, vertical to change the orientation

Also in line number 4 (<div flex relative>) what is the reason to use flex attribute with relative again?

Answer 1

As far as I know the flex attribute makes the element expand to the size of the available space.