<div ng-controller="LayoutCtrl" layout="column" layout-fill class="layout-content">

  <p>
    The <code>layout-align</code> attribute takes two words.
    The first word says how the children will be aligned in the layout's direction, and the second word says how the children will be aligned perpindicular to the layout's direction.
    <br/>
    Only one word is required for the attribute. For example, <code>layout="row" layout-align="center"</code> would make the elements center horizontally and use the default behavior vertically.
    <br/>
    <code>layout="column" layout-align="center end"</code> would make
    children align along the center vertically and along the end (right) horizontally.
  </p>
  <p>
   See below for more examples:
  </p>

  <section class="layout-panel-parent">
    <div ng-panel="layoutDemo">
      <docs-demo demo-title='layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}"' class="small-demo" interpolate-code="true">
        <demo-file name="index.html">
          <div layout="{{layoutDemo.direction}}" layout-align="{{layoutAlign()}}">
            <div>one</div>
            <div>two</div>
            <div>three</div>
          </div>
        </demo-file>
      </docs-demo>
    </div>
  </section>

  <div layout="column" layout-gt-sm="row" layout-align="space-around">

    <div>
      <md-subheader>Layout Direction</md-subheader>
      <md-radio-group ng-model="layoutDemo.direction">
        <md-radio-button value="row">row</md-radio-button>
        <md-radio-button value="column">column</md-radio-button>
      </md-radio-group>
    </div>
    <div>
      <md-subheader>Alignment in Layout Direction ({{layoutDemo.direction == 'row' ? 'horizontal' : 'vertical'}})</md-subheader>
      <md-radio-group ng-model="layoutDemo.mainAxis">
        <md-radio-button value="start">start</md-radio-button>
        <md-radio-button value="center">center</md-radio-button>
        <md-radio-button value="end">end</md-radio-button>
        <md-radio-button value="space-around">space-around</md-radio-button>
        <md-radio-button value="space-between">space-between</md-radio-button>
      </md-radio-group>
    </div>
    <div>
      <md-subheader>Alignment in Perpindicular Direction ({{layoutDemo.direction == 'column' ? 'horizontal' : 'vertical'}})</md-subheader>
      <md-radio-group ng-model="layoutDemo.crossAxis">
        <md-radio-button value="start">start</md-radio-button>
        <md-radio-button value="center">center</md-radio-button>
        <md-radio-button value="end">end</md-radio-button>
      </md-radio-group>
    </div>

  </div>
</div>
