`(column :height (vh 90) :width (vw 90) :bgcolor "#FAF7F0" :color "#1F2328"
	     (box :padding ((lh 1) (px 24)) :border "#2F3437" :text-align center
	          "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties.")
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#D97757" :bgcolor "#FFF5ED"
	          :color "#3D2B1F"
	          "Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
	           :bgcolor "#FFF8F2"
	           (column
	            (box :width (px 220) :padding-inline (px 10) :border "#D97757"
		             :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		             center "row")
	            (flex :width (px 220) :height (lh 4) :padding-inline (px 8) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
		              :flex-direction row :column-gap (px 10)
		              :align-items center
		              (box :width (px 42) :height (lh 1) :bgcolor "#F7C8B3" :text-align center "A")
		              (box :width (px 42) :height (lh 1) :bgcolor "#F0A88F" :text-align center "B")
		              (box :width (px 42) :height (lh 1) :bgcolor "#D97757" :text-align center "C")))
	           (column
	            (box :width (px 220) :padding-inline (px 10) :border "#D97757"
		             :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		             center "row-reverse")
	            (flex :width (px 220) :height (lh 4) :padding-inline (px 8) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
		              :flex-direction row-reverse :column-gap (px 10)
		              :align-items center
		              (box :width (px 42) :height (lh 1) :bgcolor "#F7C8B3" :text-align center "A")
		              (box :width (px 42) :height (lh 1) :bgcolor "#F0A88F" :text-align center "B")
		              (box :width (px 42) :height (lh 1) :bgcolor "#D97757" :text-align center "C")))
	           (column
	            (box :width (px 220) :padding-inline (px 10) :border "#D97757"
		             :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		             center "column")
	            (flex :width (px 220) :height (lh 6) :padding-inline (px 8) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
		              :flex-direction column :row-gap (lh 1) :align-items
		              stretch
		              (box :height (lh 1) :bgcolor "#F7C8B3" :text-align center "A")
		              (box :height (lh 1) :bgcolor "#F0A88F" :text-align center "B")
		              (box :height (lh 1) :bgcolor "#D97757" :text-align center "C")))
	           (column
	            (box :width (px 220) :padding-inline (px 10) :border "#D97757"
		             :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		             center "column-reverse")
	            (flex :width (px 220) :height (lh 6) :padding-inline (px 8) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
		              :flex-direction column-reverse :row-gap (lh 1)
		              :align-items stretch
		              (box :height (lh 1) :bgcolor "#F7C8B3" :text-align center "A")
		              (box :height (lh 1) :bgcolor "#F0A88F" :text-align center "B")
		              (box :height (lh 1) :bgcolor "#D97757" :text-align center "C"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#5E7F6A" :bgcolor "#F3FAF4"
	          :color "#24352A"
	          "Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A"
	           :bgcolor "#F8FCF8"
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center "nowrap")
	            (flex :max-width (px 293) :padding-inline (px 8) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A"
		              :flex-wrap nowrap :column-gap (px 8) :align-items
		              center
		              (box :flex-shrink 1 :width (px 92) :height (lh 1)
			               :bgcolor "#DCEBDD"
			               :text-align center "A")
		              (box :flex-shrink 1 :width (px 92) :height (lh 1)
			               :bgcolor "#BFD6C2"
			               :text-align center "B")
		              (box :flex-shrink 1 :width (px 92) :height (lh 1)
			               :bgcolor "#8FAF95"
			               :text-align center "C")))
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center "wrap")
	            (flex :max-width (px 293) :padding-inline (px 8) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A"
		              :flex-wrap wrap :column-gap (px 8) :row-gap (lh 1)
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#DCEBDD"
			               :text-align center "A 118")
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#BFD6C2"
			               :text-align center "B 118")
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#8FAF95"
			               :text-align center "C 118")))
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center "wrap-reverse")
	            (flex :max-width (px 293) :padding-inline (px 8) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A"
		              :flex-wrap wrap-reverse :column-gap (px 8)
		              :row-gap (lh 1)
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#DCEBDD"
			               :text-align center "A 118")
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#BFD6C2"
			               :text-align center "B 118")
		              (box :flex-shrink 0 :width (px 118) :height (lh 1)
			               :bgcolor "#8FAF95"
			               :text-align center "C 118"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#6F6A95" :bgcolor "#F7F4FC"
	          :color "#2F2B45"
	          "Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95"
	           :bgcolor "#FBF9FF"
	           (column
	            (box :max-width (px 440) :padding-inline (px 10) :border
		             "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center ":flex-flow (row wrap)")
	            (flex :max-width (px 440) :padding-inline (px 8) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95"
		              :flex-flow (row wrap) :gap ((lh 1) (px 12))
		              (box :width (px 170) :height (lh 1) :bgcolor "#E4DEF4" :text-align center "A")
		              (box :width (px 170) :height (lh 1) :bgcolor "#CBC2E3" :text-align center "B")
		              (box :width (px 170) :height (lh 1) :bgcolor "#AFA3D1" :text-align center
			               "C wraps")))
	           (column
	            (box :max-width (px 440) :padding-inline (px 10) :border
		             "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center ":flex-flow (column wrap)")
	            (flex :max-width (px 440) :padding-inline (px 8) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95"
		              :flex-flow (column wrap) :gap ((lh 1) (px 12))
		              (box :width (px 140) :height (lh 1) :bgcolor "#E4DEF4" :text-align center "A")
		              (box :width (px 140) :height (lh 1) :bgcolor "#CBC2E3" :text-align center "B")
		              (box :width (px 140) :height (lh 1) :bgcolor "#AFA3D1" :text-align center
			               "C new column"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#3F6D88" :bgcolor "#F1F8FB"
	          :color "#20313A"
	          "Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
	           :bgcolor "#F6FBFD"
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-start")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content flex-start
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "center")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content center
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-end")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content flex-end
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-between")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content
		              space-between
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-around")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content space-around
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-evenly")
	            (flex :width (px 146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content space-evenly
		              (box :width (px 28) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "A")
		              (box :width (px 28) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "B")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "start")
	            (flex :width (px 176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content start
		              (box :width (px 70) :height (lh 1) :bgcolor "#CAE6F0" :text-align center "start")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "end")
	            (flex :width (px 176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content end
		              (box :width (px 70) :height (lh 1) :bgcolor "#A8D2E2" :text-align center "end")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "stretch")
	            (flex :width (px 176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content stretch
		              (box :width (px 70) :height (lh 1) :bgcolor "#7DB8CE" :text-align center "stretch")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "normal")
	            (flex :width (px 176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content normal
		              (box :width (px 70) :height (lh 1) :bgcolor "#5F9CB5" :text-align center "normal")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#3F6D88"
		             :bgcolor "#FFFDF8" :text-align
		             center "normal")
	            (flex :width (px 176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" :justify-content normal
		              (box :width (px 70) :height (lh 1) :bgcolor "#3F6D88"
			               :color "#FFFFFF" :text-align center
			               "normal"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#9A6B43" :bgcolor "#FFF7EE"
	          :color "#3A2A1D"
	          "Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43"
	           :bgcolor "#FFFAF5"
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-start")
	            (flex :width (px 176) :height (lh 5) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              flex-start
		              (box :width (px 68) :height (lh 1) :bgcolor "#F1D0AF" :text-align center "short")
		              (box :width (px 78) :height (lh 3) :bgcolor "#D9AD83" :text-align center
			               "tall\nitem\nsets line")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "center")
	            (flex :width (px 176) :height (lh 5) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              center
		              (box :width (px 68) :height (lh 1) :bgcolor "#F1D0AF" :text-align center "short")
		              (box :width (px 78) :height (lh 3) :bgcolor "#D9AD83" :text-align center
			               "tall\nitem\nsets line")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-end")
	            (flex :width (px 176) :height (lh 5) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              flex-end
		              (box :width (px 68) :height (lh 1) :bgcolor "#F1D0AF" :text-align center "short")
		              (box :width (px 78) :height (lh 3) :bgcolor "#D9AD83" :text-align center
			               "tall\nitem\nsets line")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "stretch")
	            (flex :width (px 176) :height (lh 5) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              stretch
		              (box :width (px 72) :bgcolor "#F1D0AF" :text-align center
			               "auto height stretches")
		              (box :width (px 78) :height (lh 3) :bgcolor "#D9AD83" :text-align center
			               "line height")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "baseline")
	            (flex :width (px 176) :height (lh 5) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              baseline
		              (box :width (px 90) :height (lh 1) :bgcolor "#BA8456" :text-align center
			               "baseline")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "start")
	            (flex :width (px 146) :height (lh 4) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              start
		              (box :width (px 62) :height (lh 1) :bgcolor "#F1D0AF" :text-align center "start")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "end")
	            (flex :width (px 146) :height (lh 4) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              end
		              (box :width (px 62) :height (lh 1) :bgcolor "#D9AD83" :text-align center "end")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "start")
	            (flex :width (px 146) :height (lh 4) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              start
		              (box :width (px 78) :height (lh 1) :bgcolor "#BA8456" :text-align center
			               "start")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "end")
	            (flex :width (px 146) :height (lh 4) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              end
		              (box :width (px 70) :height (lh 1) :bgcolor "#9A6B43"
			               :color "#FFFFFF" :text-align center
			               "end")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "normal")
	            (flex :width (px 146) :height (lh 4) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :align-items
		              normal
		              (box :width (px 62) :bgcolor "#7A5132" :color
			               "#FFFFFF" :text-align center "normal")))
	           (column
	            (box :width (px 146) :padding-inline (px 4) :border "#9A6B43"
		             :bgcolor "#FFFDF8" :text-align
		             center "stretch note")
	            (box :width (px 146) :height (lh 4) :padding-inline (px 8) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43"
		             :color "#3A2A1D"
		             "normal behaves stretch-like for auto cross size in this DSL.")))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#7C6A2F" :bgcolor "#FBF8E8"
	          :color "#362F16"
	          "Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F"
	           :bgcolor "#FFFDF0"
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-start")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content flex-start :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "center")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content center :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "flex-end")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content flex-end :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-between")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content space-between :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-around")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content space-around :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "space-evenly")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content space-evenly :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "stretch")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content stretch :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "start")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content start :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "end")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content end :row-gap (lh 1) :column-gap
		              (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "normal")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content normal :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "normal")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              wrap :align-content normal :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 78) :height (lh 1) :bgcolor "#EEE1A8" :text-align center "A")
		              (box :width (px 78) :height (lh 1) :bgcolor "#D9C46D" :text-align center "B")
		              (box :width (px 78) :height (lh 1) :bgcolor "#B89B3D" :text-align center "C")))
	           (column
	            (box :width (px 176) :padding-inline (px 4) :border "#7C6A2F"
		             :bgcolor "#FFFDF8" :text-align
		             center "nowrap note")
	            (flex :width (px 176) :height (lh 7) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :flex-wrap
		              nowrap :align-content normal :row-gap (lh 1)
		              :column-gap (px 8)
		              (box :width (px 96) :height (lh 1) :bgcolor "#EEE1A8" :text-align center
			               "single line"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#3D7068" :bgcolor "#F1FAF8"
	          :color "#1D3935"
	          "Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides.")
	     (flex :flex-flow (row wrap) :row-gap (lh 1) :column-gap (px 12)
	           :padding-inline (px 12) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068"
	           :bgcolor "#F7FCFB"
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center ":gap ((lh 1) (px 14))")
	            (flex :max-width (px 293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :flex-wrap wrap :gap
		              ((lh 1) (px 14))
		              (box :width (px 104) :height (lh 1) :bgcolor "#CDEBE5" :text-align center "A")
		              (box :width (px 104) :height (lh 1) :bgcolor "#9FD5CB" :text-align center "B")
		              (box :width (px 104) :height (lh 1) :bgcolor "#71BDB0" :text-align center "C")))
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center ":row-gap (lh 2)")
	            (flex :max-width (px 293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :flex-wrap wrap
		              :row-gap (lh 2) :column-gap (px 8)
		              (box :width (px 104) :height (lh 1) :bgcolor "#CDEBE5" :text-align center "A")
		              (box :width (px 104) :height (lh 1) :bgcolor "#9FD5CB" :text-align center "B")
		              (box :width (px 104) :height (lh 1) :bgcolor "#71BDB0" :text-align center "C")))
	           (column
	            (box :max-width (px 293) :padding-inline (px 10) :border
		             "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		             :text-align center ":column-gap (px 32)")
	            (flex :max-width (px 293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :flex-wrap wrap
		              :row-gap (lh 1) :column-gap (px 32)
		              (box :width (px 104) :height (lh 1) :bgcolor "#CDEBE5" :text-align center "A")
		              (box :width (px 104) :height (lh 1) :bgcolor "#9FD5CB" :text-align center "B")
		              (box :width (px 104) :height (lh 1) :bgcolor "#71BDB0" :text-align center "C"))))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#8E4A63" :bgcolor "#FFF4F7"
	          :color "#3A1F2A"
	          "Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values.")
	     (flex :height (lh 5) :padding-inline (px 12) :border-right "#8E4A63" :border-bottom "#8E4A63" :border-left "#8E4A63" :bgcolor "#FFF8FA" :column-gap (px 12)
	           :align-items center
	           (box :order 3 :width (px 150) :height (lh 2) :bgcolor "#F2C4D2" :text-align center
		            "source 1\n:order 3")
	           (box :order 1 :width (px 150) :height (lh 2) :bgcolor "#DEA4B7" :text-align center
		            "source 2\n:order 1")
	           (box :order 2 :width (px 150) :height (lh 2) :bgcolor "#C87F9A" :text-align center
		            "source 3\n:order 2")
	           (box :order 1 :width (px 150) :height (lh 2) :bgcolor "#A95F7C"
		            :color "#FFFFFF" :text-align center
		            "source 4\nsame order"))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#2F5F7C" :bgcolor "#F1F8FC"
	          :color "#1C303D"
	          "Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space.")
	     (column
	      (box :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	           :bgcolor "#FFFDF8" :color "#3D3A35"
	           "Grow factors: same basis, different growth weights.")
	      (flex :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	            :bgcolor "#F8FCFE" :column-gap (px 10)
	            (box :flex-grow 1 :flex-basis (px 120) :height (lh 2) :bgcolor
		             "#C7E3F0" :text-align center
		             "grow 1\nbasis 120")
	            (box :flex-grow 2 :flex-basis (px 120) :height (lh 2) :bgcolor
		             "#96C7DD" :text-align center
		             "grow 2\nbasis 120")
	            (box :flex-grow 3 :flex-basis (px 120) :height (lh 2) :bgcolor
		             "#5FA4C2" :text-align center
		             "grow 3\nbasis 120")))
	     (column
	      (box :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	           :bgcolor "#FFFDF8" :color "#3D3A35"
	           "Shrink factors: overflowing bases lose space by weighted shrink.")
	      (flex :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	            :bgcolor "#F8FCFE" :column-gap (px 10)
	            (box :flex-shrink 1 :flex-basis (px 320) :height (lh 2)
		             :bgcolor "#C7E3F0" :text-align
		             center "shrink 1\nbasis 320")
	            (box :flex-shrink 3 :flex-basis (px 320) :height (lh 2)
		             :bgcolor "#96C7DD" :text-align
		             center "shrink 3\nbasis 320")
	            (box :flex-shrink 5 :flex-basis (px 320) :height (lh 2)
		             :bgcolor "#5FA4C2" :text-align
		             center "shrink 5\nbasis 320")))
	     (column
	      (box :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	           :bgcolor "#FFFDF8" :color "#3D3A35"
	           "Basis versus width: explicit basis overrides width; auto basis uses width/content.")
	      (flex :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	            :bgcolor "#F8FCFE" :column-gap (px 10)
	            (box :flex-basis (px 120) :width (px 240) :height (lh 2)
		             :bgcolor "#C7E3F0" :text-align
		             center "basis (px 120)\nwidth (px 240)")
	            (box :flex-basis auto :width (px 240) :height (lh 2) :bgcolor
		             "#96C7DD" :text-align center
		             "basis auto\nwidth (px 240)")
	            (box :flex (1 1 (px 160)) :width (px 240) :height (lh 2)
		             :bgcolor "#5FA4C2" :text-align
		             center "flex tuple\nbasis (px 160)")))
	     (column
	      (box :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	           :bgcolor "#FFFDF8" :color "#3D3A35"
	           "Basis keywords: auto, min-content, and max-content select the starting size.")
	      (flex :padding-inline (px 12) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
	            :bgcolor "#F8FCFE" :flex-wrap wrap :row-gap (lh 1)
	            :column-gap (px 10)
	            (box :flex-shrink 0 :flex-basis auto :width (px 180)
		             :height (lh 2) :bgcolor "#C7E3F0"
		             :text-align center "auto\nuses width")
	            (box :flex-shrink 0 :flex-basis min-content :width
		             (px 180) :height (lh 2) :bgcolor "#96C7DD" :text-align center
		             "min-content\nwrap choices")
	            (box :flex-shrink 0 :flex-basis max-content :width
		             (px 180) :height (lh 2) :bgcolor "#5FA4C2" :text-align center
		             "max-content\nkeeps phrase width")))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#52612F" :bgcolor "#F8FAEF"
	          :color "#293116"
	          "Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts.")
	     (flex :height (lh 7) :padding-inline (px 12) :border-right "#52612F" :border-bottom "#52612F" :border-left "#52612F" :bgcolor "#FCFDF6" :flex-wrap wrap
	           :row-gap (lh 1) :column-gap (px 8) :align-items center
	           (box :flex 1 :bgcolor "#DDE8B2"
		            :text-align center ":flex 1\n= 1 1 (px 0)")
	           (box :flex none :width (px 140) :bgcolor "#C5D681" :text-align center
		            ":flex none\n= 0 0 auto")
	           (box :flex auto :width (px 140) :bgcolor "#AABE59" :text-align center
		            ":flex auto\n= 1 1 auto")
	           (box :flex initial :width (px 140) :bgcolor "#8D9E3C" :text-align center
		            ":flex initial\n= 0 1 auto")
	           (box :flex (2 1 (px 160)) :bgcolor
		            "#66762D" :color "#FFFFFF" :text-align center
		            ":flex (2 1 (px 160))\none atomic shorthand"))
	     (box :height (lh 1))
	     (box :padding-inline (px 18) :border "#7B4D38" :bgcolor "#FFF6F0"
	          :color "#392319"
	          "Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting.")
	     (flex :height (lh 7) :padding-inline (px 12) :border-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :bgcolor "#FFFAF7" :align-items
	           flex-start :flex-wrap wrap :row-gap (lh 1) :column-gap
	           (px 10)
	           (box :align-self auto :width (px 118) :height (lh 2) :bgcolor
		            "#EFC7B6" :text-align center
		            "auto\ninherits start")
	           (box :align-self flex-start :width (px 118) :height (lh 2)
		            :bgcolor "#DBA58D" :text-align
		            center "flex-start")
	           (box :align-self center :width (px 118) :height (lh 2)
		            :bgcolor "#BF7F63" :text-align
		            center "center")
	           (box :align-self flex-end :width (px 118) :height (lh 2)
		            :bgcolor "#9D6048" :color "#FFFFFF" :text-align
		            center "flex-end")
	           (box :align-self stretch :width (px 118) :bgcolor
		            "#7B4D38" :color "#FFFFFF" :text-align center
		            "stretch\nauto cross")
	           (box :align-self normal :width (px 118) :bgcolor
		            "#5D3929" :color "#FFFFFF" :text-align center
		            "normal\nstretch-like"))
	     (flex :height (lh 6) :padding-inline (px 12) :border-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :bgcolor "#FFFAF7" :align-items
	           flex-start :flex-wrap wrap :row-gap (lh 1) :column-gap
	           (px 10)
	           (box :align-self start :width (px 118) :height (lh 2) :bgcolor
		            "#EFC7B6" :text-align center
		            "start")
	           (box :align-self end :width (px 118) :height (lh 2) :bgcolor
		            "#DBA58D" :text-align center
		            "end")
	           (box :align-self flex-start :width (px 118) :height (lh 2)
		            :bgcolor "#BF7F63" :text-align
		            center "flex-start")
	           (box :align-self flex-end :width (px 118) :height (lh 2)
		            :bgcolor "#9D6048" :color "#FFFFFF" :text-align
		            center "flex-end")
	           (box :align-self baseline :width (px 118) :height (lh 2)
		            :bgcolor "#7B4D38" :color "#FFFFFF" :text-align
		            center "baseline"))
	     (box :height (lh 1))
	     (box :padding ((lh 1) (px 24)) :border "#2F3437" :text-align center
	          "Summary\nUse direction and wrap to create lines, basis/width to choose starting sizes, grow/shrink to distribute space, then justify/align properties to pack items and lines."))