polymer-flex-layout: clean up container in leftView; add more docs

Author: frankiefu

polymer-flex-layout/polymer-flex-layout.html

@@ -78,6 +78,20 @@
 /**
  * If true, polymer-flex-layout is the flex container.
  *
+ * Example:
+ *
+ *     <polymer-flex-layout isContainer>
+ *       <div>Left</div>
+ *       <div flex>Main</div>
+ *       <div>Right</div>
+ *     </polymer-flex-layout>
+ *
+ *     ---------------------------------
+ *     |-------------------------------|
+ *     ||Left|       Main       |Right||
+ *     |-------------------------------|
+ *     ---------------------------------
+ *
  * @attribute isContainer
  * @type boolean
  * @default false
@@ -93,20 +107,26 @@
     Polymer('polymer-flex-layout', {
       vertical: false,
       isContainer: false,
+      layoutContainer: null,
       enteredView: function() {
         this.installControllerStyles();
         this.layoutContainer = this.isContainer ? 
             this : (this.parentNode.host || this.parentNode);
-        if (!this.isContainer) {
-          this.style.display = 'none';
+        this.verticalChanged();
+        this.alignChanged();
+        this.justifyChanged();
+      },
+      leftView: function() {
+        this.layoutContainer = null;
+      },
+      layoutContainerChanged: function(old) {
+        if (old) {
+          old.classList.remove('flexbox');
+        }
+        this.style.display = this.layoutContainer === this ? '' : 'none';
+        if (this.layoutContainer) {
+          this.layoutContainer.classList.add('flexbox');
         }
-        this.async(function() {
-          this.layoutContainer && this.layoutContainer.classList.add('flexbox');
-          this.verticalChanged();
-          this.alignChanged();
-          this.justifyChanged();
-        });
-        
       },
       switchContainerClass: function(prefix, old, name) {
         if (this.layoutContainer && name) {