<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   .flexbox-parent {
  display: -webkit-flex;
  display: flex;
  background: #FFD54F;
  overflow: hidden;
  width: 100%;
  padding: 3px;
  min-height: 550px;
  max-height: 1000px;
}
.flexbox-parent > div {
  display: inline-block;
  background: white;
  overflow: hidden;
  margin: 3px;
  padding: 5px;
}
.flexbox-parent > div .child-controls {
  margin-top: 7px;
}

.child-number {
  display: block;
  width: 22px;
  height: 22px;
  background: #FFB300;
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding-top: 3px;
  text-align: center;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  float: left;
}

.code {
  font-family: Consolas, "Courier New", Monospace;
  font-size: 15px;
}

.remove-child {
  background: transparent;
  color: #FF6F00;
  font-size: 14px;
  cursor: pointer;
}

.highlight {
  color: #FF8F00;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.right-padding {
  padding-right: 15px;
}

h3 {
  margin: 0 0 10px 0 !important;
}

p {
  margin: 0 0 10px 0 !important;
  line-height: 1.4em !important;
}

md-input-container {
  padding: 0 0 5px 0 !important;
}
md-input-container .md-input {
  padding: 0 !important;
  line-height: 1em !important;
}

md-select {
  margin-top: 0 !important;
}
md-select .md-select-label {
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}

md-radio-button {
  margin: 5px 10px !important;
}

md-divider {
  margin: 10px 0 !important;
}
  </style>
 </head>
 <body translate="no">
  <html lang="en" ng-app="flexboxDemoApp">
   <head>
   </head>
   <body ng-controller="AppCtrl">
    <md-content class="md-padding">
     <div layout="column" layout-gt-md="row">
      <div class="right-padding" flex="100" flex-gt-md="66">
       <h3>
        Children Width
       </h3>
       <div class="code" layout="row" layout-align="center center">
        <div flex="15">
         width: {{children_width}}%
        </div>
        <md-slider aria-label="width" flex="" max="100" min="0" ng-model="children_width">
        </md-slider>
       </div>
       <md-divider>
       </md-divider>
       <h3>
        Parent Flex Properties –
        <span class="highlight">
         flex container
        </span>
       </h3>
       <div class="code" layout="column" layout-gt-md="row">
        <div layout="row">
         <div flex="">
          <strong>
           flex-direction
          </strong>
          <md-radio-group ng-model="parent.flexDirection">
           <md-radio-button class="highlight" value="row">
            row
           </md-radio-button>
           <md-radio-button value="row-reverse">
            row-reverse
           </md-radio-button>
           <md-radio-button value="column">
            column
           </md-radio-button>
           <md-radio-button value="column-reverse">
            column-reverse
           </md-radio-button>
          </md-radio-group>
         </div>
         <div flex="">
          <strong>
           flex-wrap
          </strong>
          <md-radio-group ng-model="parent.flexWrap">
           <md-radio-button class="highlight" value="nowrap">
            nowrap
           </md-radio-button>
           <md-radio-button value="wrap">
            wrap
           </md-radio-button>
           <md-radio-button value="wrap-reverse">
            wrap-reverse
           </md-radio-button>
          </md-radio-group>
         </div>
        </div>
        <div layout="row">
         <div flex="">
          <strong>
           justify-content
          </strong>
          <md-radio-group ng-model="parent.justifyContent">
           <md-radio-button class="highlight" value="flex-start">
            flex-start
           </md-radio-button>
           <md-radio-button value="flex-end">
            flex-end
           </md-radio-button>
           <md-radio-button value="center">
            center
           </md-radio-button>
           <md-radio-button value="space-between">
            space-between
           </md-radio-button>
           <md-radio-button value="space-around">
            space-around
           </md-radio-button>
          </md-radio-group>
         </div>
         <div flex="">
          <strong>
           align-items
          </strong>
          <md-radio-group ng-model="parent.alignItems">
           <md-radio-button class="highlight" value="stretch">
            stretch
           </md-radio-button>
           <md-radio-button value="flex-start">
            flex-start
           </md-radio-button>
           <md-radio-button value="flex-end">
            flex-end
           </md-radio-button>
           <md-radio-button value="center">
            center
           </md-radio-button>
           <md-radio-button value="baseline">
            baseline
           </md-radio-button>
          </md-radio-group>
         </div>
        </div>
        <div layout="row">
         <div flex="">
          <strong>
           align-content
          </strong>
          <md-radio-group ng-model="parent.alignContent">
           <md-radio-button class="highlight" value="stretch">
            stretch
           </md-radio-button>
           <md-radio-button value="flex-start">
            flex-start
           </md-radio-button>
           <md-radio-button value="flex-end">
            flex-end
           </md-radio-button>
           <md-radio-button value="center">
            center
           </md-radio-button>
           <md-radio-button value="space-between">
            space-between
           </md-radio-button>
           <md-radio-button value="space-around">
            space-around
           </md-radio-button>
          </md-radio-group>
         </div>
        </div>
       </div>
       <small>
        * The default property values are
        <span class="highlight">
         highlighed
        </span>
        .
       </small>
       <md-divider>
       </md-divider>
       <h3>
        Children Flex Properties –
        <span class="highlight">
         flex items
        </span>
       </h3>
       <div>
        <p>
         The children flex properties can be applied at child level, separate for each child. See the results section and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.
        </p>
       </div>
       <md-divider hide="" show-md="" show-sm="">
       </md-divider>
      </div>
      <div flex="">
       <h3 class="pull-left">
        Result
       </h3>
       <p class="pull-right">
        <md-button class="md-accent md-raised" ng-click="addChild()">
         Add child
        </md-button>
       </p>
       <div class="clearfix">
       </div>
       <div class="flexbox-parent" ng-attr-style="
              -webkit-flex-direction:  {{parent.flexDirection}};
              flex-direction:          {{parent.flexDirection}};

              -webkit-flex-wrap:       {{parent.flexWrap}};
              flex-wrap:               {{parent.flexWrap}};

              -webkit-justify-content: {{parent.justifyContent}};
              justify-content:         {{parent.justifyContent}};

              -webkit-align-items:     {{parent.alignItems}};
              align-items:             {{parent.alignItems}};

              -webkit-align-content:   {{parent.alignContent}};
              align-content:           {{parent.alignContent}};
              ">
        <div class="code md-whiteframe-z1" ng-attr-style="
                width:               {{children_width}}%;

                -webkit-order:       {{child.order}};
                order:               {{child.order}};

                -webkit-flex-grow:   {{child.flexGrow}};
                flex-grow:           {{child.flexGrow}};

                -webkit-flex-shrink: {{child.flexShrink}};
                flex-shrink:         {{child.flexShrink}};

                -webkit-flex-basis:  {{child.flexBasis}};
                flex-basis:          {{child.flexBasis}};

                -webkit-align-self:  {{child.alignSelf}};
                align-self:          {{child.alignSelf}};

              " ng-repeat="child in children">
         <div class="clearfix">
          <span aria-label="Number" class="child-number">
           {{$index + 1}}
          </span>
          <span class="remove-child pull-right" ng-click="removeChild($index)" title="Remove">
           ✖
          </span>
         </div>
         <div class="child-controls">
          <md-input-container>
           <md-tooltip md-direction="top">
            order
           </md-tooltip>
           <input ng-model="children[$index].order" type="number"/>
          </md-input-container>
          <md-input-container>
           <md-tooltip md-direction="top">
            flex-grow
           </md-tooltip>
           <input ng-model="children[$index].flexGrow" type="number"/>
          </md-input-container>
          <md-input-container>
           <md-tooltip md-direction="top">
            flex-shrink
           </md-tooltip>
           <input ng-model="children[$index].flexShrink" type="number"/>
          </md-input-container>
          <md-input-container>
           <md-tooltip md-direction="top">
            flex-basis
           </md-tooltip>
           <input ng-model="children[$index].flexBasis" type="text"/>
          </md-input-container>
          <md-input-container>
           <md-tooltip md-direction="top">
            align-self
           </md-tooltip>
           <md-select ng-model="children[$index].alignSelf">
            <md-option ng-repeat="value in ['auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch']" ng-value="value">
             {{value}}
            </md-option>
           </md-select>
          </md-input-container>
         </div>
        </div>
       </div>
      </div>
     </div>
    </md-content>
   </body>
  </html>
 </body>
</html>
