                              :class "rc-div-table-row"
                              :children [[label :width col1 :label "g s b"]
                                         [label :width col2 :label "grow shrink basis"]
-                                        [:span {:style {:width col3}} "If none of the above common valaues above meet your needs, this gives you precise control."]]]]]]]))
+                                        [:span {:style {:width col3}} "If none of the common values above meet your needs, this gives you precise control."]]]]]]]))
 
 
 (defn the-key-style

  [v-box
   :children [[title :level :level2 :label "The Key Style"]
              [paragraphs
               [:p "In the Flexbox world, there are two parties in any layout - " [:span.bold "containers"] " and their child " [:span.bold "items"] "."]
               [:p "While the tutorials walk you through the menagerie of flexbox related styles, we've found that one style more than any other is
                 critical to getting what you want: the " [:span.bold "flex"] " style of the children."]
               [:p "When we're having a bad day with layouts, 90% of the time it is because we didn't get the flex style of a child right."]]
              [title :level :level2 :label "flex=??"]
              [paragraphs
               [:p "The tutorials tell you that the " [:span.bold "flex"] " style can be single values like " [:span.bold "none"] "  and " [:span.bold "auto"] ".
                 But realise that every single time, flex resolves to a triple of sub-values:"]
               [:ul
                [:li [:span [:span.bold "grow"]   " - Integer which determines how an item grows in size if there is extra container space to distribute. 0 for no growing."]]
                [:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size if container space is reduced. 0 for no shrinking."]]
                [:li [:span [:span.bold "basis"]  " - The default size of an item before any necessary growing or shrinking. Can be
                  values like 60% or 100px. It can also be " [:span.bold "auto"] " which means to use the natural size of the item (or its further children)"]]]

               [:p "So even if you provide a single value like " [:span.bold "flex=\"none\""]  ",
                 what you are really providing is " [:span.bold "flex=\"0 0 auto\""] ". It always resolves to a triple. If you get this point, you are half way there."]

               [:p "Confusion reigns a bit because you can do this " [:span.bold "flex=\"auto\""]  ",
                 which resolves to " [:span.bold "flex=\"1 1 auto\""] ".  Eh?  My \"auto\" begates another \"auto\". Breeding like rabits."]
               [:p "Determines the value for the 'flex' attribute (which has grow, shrink and basis), based on the :size parameter."]
               [:p.bold "IMPORTANT: The term 'size' means width of the item in the case of flex-direction 'row' OR height of the item in the case of flex-direction 'column'."]
               [:p "Flex property explanation:"]
               ]
              [:p "Supported values:"]

              [gap :size "20px"]
              [paragraphs
               [:p "If number of words is not 1 or 3, an exception is thrown."]
               [:p "Reference: http://www.w3.org/TR/css3-flexbox/#flexibility"]
               [:p "Diagram:   http://www.w3.org/TR/css3-flexbox/#flex-container"]
                 [:p "Regex101 testing: ^(initial|auto|none)|(\\d+)(px|%|em)|(\\d+)\\w(\\d+)\\w(.*) - remove double backslashes"]]]])



(defn panel2
  []
  [v-box
   :gap      "10px"
   :children [[panel-title "Layout"]
              [h-box
               :gap      "100px"
               :children [[left-column]
                          [right-column]]]
              [line]
              [h-box
               :gap      "100px"
               :children [[the-key-style]
                          [size-table]]]
              ]])

;; core holds a reference to panel, so need one level of indirection to get figwheel updates
(defn panel

                        [box :size \"100%\" :child \"Content\"]]
            [box :child \"Footer\"]]]"]
               [gap :size "15px"]
               [:p "results in:"]

               [v-box
                :gap      "1px"
