(column :height '(viewport-height) :width '(viewport) :overflow
	'scroll :bgcolor "#FAF7F0"
	(box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0"
	     :color "#1F2328" :text-align 'center
	     "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties.")
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#D97757" :border-top 'none
	      :bgcolor "#FFF8F2"
	      (column
	       (box :width '(220) :padding '(0 (10)) :border "#D97757"
		    :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		    'center "row")
	       (flex :width '(220) :height 4 :padding '(0 (8)) :border
		     "#D97757" :border-top 'none :bgcolor "#FFF8F2"
		     :flex-direction 'row :column-gap '(10)
		     :align-items 'center
		     (box :width '(42) :height 1 :bgcolor "#F7C8B3"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(42) :height 1 :bgcolor "#F0A88F"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(42) :height 1 :bgcolor "#D97757"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(220) :padding '(0 (10)) :border "#D97757"
		    :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		    'center "row-reverse")
	       (flex :width '(220) :height 4 :padding '(0 (8)) :border
		     "#D97757" :border-top 'none :bgcolor "#FFF8F2"
		     :flex-direction 'row-reverse :column-gap '(10)
		     :align-items 'center
		     (box :width '(42) :height 1 :bgcolor "#F7C8B3"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(42) :height 1 :bgcolor "#F0A88F"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(42) :height 1 :bgcolor "#D97757"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(220) :padding '(0 (10)) :border "#D97757"
		    :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		    'center "column")
	       (flex :width '(220) :height 6 :padding '(0 (8)) :border
		     "#D97757" :border-top 'none :bgcolor "#FFF8F2"
		     :flex-direction 'column :row-gap 1 :align-items
		     'stretch
		     (box :height 1 :bgcolor "#F7C8B3" :color
			  "#1F2328" :text-align 'center "A")
		     (box :height 1 :bgcolor "#F0A88F" :color
			  "#1F2328" :text-align 'center "B")
		     (box :height 1 :bgcolor "#D97757" :color
			  "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(220) :padding '(0 (10)) :border "#D97757"
		    :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
		    'center "column-reverse")
	       (flex :width '(220) :height 6 :padding '(0 (8)) :border
		     "#D97757" :border-top 'none :bgcolor "#FFF8F2"
		     :flex-direction 'column-reverse :row-gap 1
		     :align-items 'stretch
		     (box :height 1 :bgcolor "#F7C8B3" :color
			  "#1F2328" :text-align 'center "A")
		     (box :height 1 :bgcolor "#F0A88F" :color
			  "#1F2328" :text-align 'center "B")
		     (box :height 1 :bgcolor "#D97757" :color
			  "#1F2328" :text-align 'center "C"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#5E7F6A" :border-top 'none
	      :bgcolor "#F8FCF8"
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center "nowrap")
	       (flex :max-width '(293) :padding '(0 (8)) :border
		     "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
		     :flex-wrap 'nowrap :column-gap '(8) :align-items
		     'center
		     (box :flex-shrink 1 :width '(92) :height 1
			  :bgcolor "#DCEBDD" :color "#1F2328"
			  :text-align 'center "A")
		     (box :flex-shrink 1 :width '(92) :height 1
			  :bgcolor "#BFD6C2" :color "#1F2328"
			  :text-align 'center "B")
		     (box :flex-shrink 1 :width '(92) :height 1
			  :bgcolor "#8FAF95" :color "#1F2328"
			  :text-align 'center "C")))
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center "wrap")
	       (flex :max-width '(293) :padding '(0 (8)) :border
		     "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
		     :flex-wrap 'wrap :column-gap '(8) :row-gap 1
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#DCEBDD" :color "#1F2328"
			  :text-align 'center "A 118")
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#BFD6C2" :color "#1F2328"
			  :text-align 'center "B 118")
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#8FAF95" :color "#1F2328"
			  :text-align 'center "C 118")))
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center "wrap-reverse")
	       (flex :max-width '(293) :padding '(0 (8)) :border
		     "#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
		     :flex-wrap 'wrap-reverse :column-gap '(8)
		     :row-gap 1
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#DCEBDD" :color "#1F2328"
			  :text-align 'center "A 118")
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#BFD6C2" :color "#1F2328"
			  :text-align 'center "B 118")
		     (box :flex-shrink 0 :width '(118) :height 1
			  :bgcolor "#8FAF95" :color "#1F2328"
			  :text-align 'center "C 118"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#6F6A95" :border-top 'none
	      :bgcolor "#FBF9FF"
	      (column
	       (box :max-width '(440) :padding '(0 (10)) :border
		    "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center ":flex-flow (row wrap)")
	       (flex :max-width '(440) :padding '(0 (8)) :border
		     "#6F6A95" :border-top 'none :bgcolor "#FBF9FF"
		     :flex-flow '(row wrap) :gap '(1 (12))
		     (box :width '(170) :height 1 :bgcolor "#E4DEF4"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(170) :height 1 :bgcolor "#CBC2E3"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(170) :height 1 :bgcolor "#AFA3D1"
			  :color "#1F2328" :text-align 'center
			  "C wraps")))
	      (column
	       (box :max-width '(440) :padding '(0 (10)) :border
		    "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center ":flex-flow (column wrap)")
	       (flex :max-width '(440) :padding '(0 (8)) :border
		     "#6F6A95" :border-top 'none :bgcolor "#FBF9FF"
		     :flex-flow '(column wrap) :gap '(1 (12))
		     (box :width '(140) :height 1 :bgcolor "#E4DEF4"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(140) :height 1 :bgcolor "#CBC2E3"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(140) :height 1 :bgcolor "#AFA3D1"
			  :color "#1F2328" :text-align 'center
			  "C new column"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#3F6D88" :border-top 'none
	      :bgcolor "#F6FBFD"
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-start")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'flex-start
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "center")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'center
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-end")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'flex-end
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-between")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content
		     'space-between
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-around")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'space-around
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-evenly")
	       (flex :width '(146) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'space-evenly
		     (box :width '(28) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(28) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "B")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "start")
	       (flex :width '(176) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'start
		     (box :width '(70) :height 1 :bgcolor "#CAE6F0"
			  :color "#1F2328" :text-align 'center "start")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "end")
	       (flex :width '(176) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'end
		     (box :width '(70) :height 1 :bgcolor "#A8D2E2"
			  :color "#1F2328" :text-align 'center "end")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "left")
	       (flex :width '(176) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'left
		     (box :width '(70) :height 1 :bgcolor "#7DB8CE"
			  :color "#1F2328" :text-align 'center "left")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "right")
	       (flex :width '(176) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'right
		     (box :width '(70) :height 1 :bgcolor "#5F9CB5"
			  :color "#1F2328" :text-align 'center "right")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "normal")
	       (flex :width '(176) :border "#3F6D88" :border-top 'none
		     :bgcolor "#F6FBFD" :justify-content 'normal
		     (box :width '(70) :height 1 :bgcolor "#3F6D88"
			  :color "#FFFFFF" :text-align 'center
			  "normal"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#9A6B43" :border-top 'none
	      :bgcolor "#FFFAF5"
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-start")
	       (flex :width '(176) :height 5 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'flex-start
		     (box :width '(68) :height 1 :bgcolor "#F1D0AF"
			  :color "#1F2328" :text-align 'center "short")
		     (box :width '(78) :height 3 :bgcolor "#D9AD83"
			  :color "#1F2328" :text-align 'center
			  "tall\nitem\nsets line")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "center")
	       (flex :width '(176) :height 5 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'center
		     (box :width '(68) :height 1 :bgcolor "#F1D0AF"
			  :color "#1F2328" :text-align 'center "short")
		     (box :width '(78) :height 3 :bgcolor "#D9AD83"
			  :color "#1F2328" :text-align 'center
			  "tall\nitem\nsets line")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-end")
	       (flex :width '(176) :height 5 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'flex-end
		     (box :width '(68) :height 1 :bgcolor "#F1D0AF"
			  :color "#1F2328" :text-align 'center "short")
		     (box :width '(78) :height 3 :bgcolor "#D9AD83"
			  :color "#1F2328" :text-align 'center
			  "tall\nitem\nsets line")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "stretch")
	       (flex :width '(176) :height 5 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'stretch
		     (box :width '(72) :bgcolor "#F1D0AF" :color
			  "#1F2328" :text-align 'center
			  "auto height stretches")
		     (box :width '(78) :height 3 :bgcolor "#D9AD83"
			  :color "#1F2328" :text-align 'center
			  "line height")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "baseline")
	       (flex :width '(176) :height 5 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'baseline
		     (box :width '(90) :height 1 :bgcolor "#BA8456"
			  :color "#1F2328" :text-align 'center
			  "baseline")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "start")
	       (flex :width '(146) :height 4 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'start
		     (box :width '(62) :height 1 :bgcolor "#F1D0AF"
			  :color "#1F2328" :text-align 'center "start")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "end")
	       (flex :width '(146) :height 4 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'end
		     (box :width '(62) :height 1 :bgcolor "#D9AD83"
			  :color "#1F2328" :text-align 'center "end")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "self-start")
	       (flex :width '(146) :height 4 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'self-start
		     (box :width '(78) :height 1 :bgcolor "#BA8456"
			  :color "#1F2328" :text-align 'center
			  "self-start")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "self-end")
	       (flex :width '(146) :height 4 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'self-end
		     (box :width '(70) :height 1 :bgcolor "#9A6B43"
			  :color "#FFFFFF" :text-align 'center
			  "self-end")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "normal")
	       (flex :width '(146) :height 4 :border "#9A6B43"
		     :border-top 'none :bgcolor "#FFFAF5" :align-items
		     'normal
		     (box :width '(62) :bgcolor "#7A5132" :color
			  "#FFFFFF" :text-align 'center "normal")))
	      (column
	       (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "stretch note")
	       (box :width '(146) :height 4 :padding '(0 (8)) :border
		    "#9A6B43" :border-top 'none :bgcolor "#FFFAF5"
		    :color "#3A2A1D"
		    "normal behaves stretch-like for auto cross size in this DSL.")))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#7C6A2F" :border-top 'none
	      :bgcolor "#FFFDF0"
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-start")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'flex-start :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "center")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'center :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "flex-end")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'flex-end :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-between")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'space-between :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-around")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'space-around :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "space-evenly")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'space-evenly :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "stretch")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'stretch :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "start")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'start :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "end")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'end :row-gap 1 :column-gap
		     '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "baseline")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'baseline :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "normal")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'wrap :align-content 'normal :row-gap 1
		     :column-gap '(8)
		     (box :width '(78) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(78) :height 1 :bgcolor "#D9C46D"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(78) :height 1 :bgcolor "#B89B3D"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
		    :bgcolor "#FFFDF8" :color "#1F2328" :text-align
		    'center "nowrap note")
	       (flex :width '(176) :height 7 :border "#7C6A2F"
		     :border-top 'none :bgcolor "#FFFDF0" :flex-wrap
		     'nowrap :align-content 'normal :row-gap 1
		     :column-gap '(8)
		     (box :width '(96) :height 1 :bgcolor "#EEE1A8"
			  :color "#1F2328" :text-align 'center
			  "single line"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 1 :column-gap '(12)
	      :padding '(0 (12)) :border "#3D7068" :border-top 'none
	      :bgcolor "#F7FCFB"
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center ":gap (1 (14))")
	       (flex :max-width '(293) :border "#3D7068" :border-top
		     'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap
		     '(1 (14))
		     (box :width '(104) :height 1 :bgcolor "#CDEBE5"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(104) :height 1 :bgcolor "#9FD5CB"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(104) :height 1 :bgcolor "#71BDB0"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center ":row-gap 2")
	       (flex :max-width '(293) :border "#3D7068" :border-top
		     'none :bgcolor "#F7FCFB" :flex-wrap 'wrap
		     :row-gap 2 :column-gap '(8)
		     (box :width '(104) :height 1 :bgcolor "#CDEBE5"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(104) :height 1 :bgcolor "#9FD5CB"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(104) :height 1 :bgcolor "#71BDB0"
			  :color "#1F2328" :text-align 'center "C")))
	      (column
	       (box :max-width '(293) :padding '(0 (10)) :border
		    "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
		    :text-align 'center ":column-gap (32)")
	       (flex :max-width '(293) :border "#3D7068" :border-top
		     'none :bgcolor "#F7FCFB" :flex-wrap 'wrap
		     :row-gap 1 :column-gap '(32)
		     (box :width '(104) :height 1 :bgcolor "#CDEBE5"
			  :color "#1F2328" :text-align 'center "A")
		     (box :width '(104) :height 1 :bgcolor "#9FD5CB"
			  :color "#1F2328" :text-align 'center "B")
		     (box :width '(104) :height 1 :bgcolor "#71BDB0"
			  :color "#1F2328" :text-align 'center "C"))))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 5 :padding '(0 (12)) :border "#8E4A63"
	      :border-top 'none :bgcolor "#FFF8FA" :column-gap '(12)
	      :align-items 'center
	      (box :order 3 :width '(150) :height 2 :bgcolor "#F2C4D2"
		   :color "#1F2328" :text-align 'center
		   "source 1\n:order 3")
	      (box :order 1 :width '(150) :height 2 :bgcolor "#DEA4B7"
		   :color "#1F2328" :text-align 'center
		   "source 2\n:order 1")
	      (box :order 2 :width '(150) :height 2 :bgcolor "#C87F9A"
		   :color "#1F2328" :text-align 'center
		   "source 3\n:order 2")
	      (box :order 1 :width '(150) :height 2 :bgcolor "#A95F7C"
		   :color "#FFFFFF" :text-align 'center
		   "source 4\nsame order"))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 '(0 (12)) :border "#2F5F7C" :border-top 'none
	      :bgcolor "#FFFDF8" :color "#3D3A35"
	      "Grow factors: same basis, different growth weights.")
	 (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	       :bgcolor "#F8FCFE" :column-gap '(10)
	       (box :flex-grow 1 :flex-basis '(120) :height 2 :bgcolor
		    "#C7E3F0" :color "#1F2328" :text-align 'center
		    "grow 1\nbasis 120")
	       (box :flex-grow 2 :flex-basis '(120) :height 2 :bgcolor
		    "#96C7DD" :color "#1F2328" :text-align 'center
		    "grow 2\nbasis 120")
	       (box :flex-grow 3 :flex-basis '(120) :height 2 :bgcolor
		    "#5FA4C2" :color "#1F2328" :text-align 'center
		    "grow 3\nbasis 120")))
	(column
	 (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	      :bgcolor "#FFFDF8" :color "#3D3A35"
	      "Shrink factors: overflowing bases lose space by weighted shrink.")
	 (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	       :bgcolor "#F8FCFE" :column-gap '(10)
	       (box :flex-shrink 1 :flex-basis '(320) :height 2
		    :bgcolor "#C7E3F0" :color "#1F2328" :text-align
		    'center "shrink 1\nbasis 320")
	       (box :flex-shrink 3 :flex-basis '(320) :height 2
		    :bgcolor "#96C7DD" :color "#1F2328" :text-align
		    'center "shrink 3\nbasis 320")
	       (box :flex-shrink 5 :flex-basis '(320) :height 2
		    :bgcolor "#5FA4C2" :color "#1F2328" :text-align
		    'center "shrink 5\nbasis 320")))
	(column
	 (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	      :bgcolor "#FFFDF8" :color "#3D3A35"
	      "Basis versus width: explicit basis overrides width; auto basis uses width/content.")
	 (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	       :bgcolor "#F8FCFE" :column-gap '(10)
	       (box :flex-basis '(120) :width '(240) :height 2
		    :bgcolor "#C7E3F0" :color "#1F2328" :text-align
		    'center "basis 120\nwidth 240")
	       (box :flex-basis 'auto :width '(240) :height 2 :bgcolor
		    "#96C7DD" :color "#1F2328" :text-align 'center
		    "basis auto\nwidth 240")
	       (box :flex '(1 1 (160)) :width '(240) :height 2
		    :bgcolor "#5FA4C2" :color "#1F2328" :text-align
		    'center "flex tuple\nbasis 160")))
	(column
	 (box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	      :bgcolor "#FFFDF8" :color "#3D3A35"
	      "Intrinsic basis keywords: content, min-content, and max-content derive size from text.")
	 (flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none
	       :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1
	       :column-gap '(10)
	       (box :flex-shrink 0 :flex-basis 'content :width '(180)
		    :height 2 :bgcolor "#C7E3F0" :color "#1F2328"
		    :text-align 'center "content\nnatural text")
	       (box :flex-shrink 0 :flex-basis 'min-content :width
		    '(180) :height 2 :bgcolor "#96C7DD" :color
		    "#1F2328" :text-align 'center
		    "min-content\nwrap choices")
	       (box :flex-shrink 0 :flex-basis 'max-content :width
		    '(180) :height 2 :bgcolor "#5FA4C2" :color
		    "#1F2328" :text-align 'center
		    "max-content\nkeeps phrase width")))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 7 :padding '(0 (12)) :border "#52612F"
	      :border-top 'none :bgcolor "#FCFDF6" :flex-wrap 'wrap
	      :row-gap 1 :column-gap '(8) :align-items 'center
	      (box :flex 1 :bgcolor "#DDE8B2" :color "#1F2328"
		   :text-align 'center ":flex 1\n= 1 1 0")
	      (box :flex 'none :width '(140) :bgcolor "#C5D681" :color
		   "#1F2328" :text-align 'center
		   ":flex none\n= 0 0 auto")
	      (box :flex 'auto :width '(140) :bgcolor "#AABE59" :color
		   "#1F2328" :text-align 'center
		   ":flex auto\n= 1 1 auto")
	      (box :flex 'initial :width '(140) :bgcolor "#8D9E3C"
		   :color "#1F2328" :text-align 'center
		   ":flex initial\n= 0 1 auto")
	      (box :flex '(2 1 (120)) :flex-basis '(160) :bgcolor
		   "#66762D" :color "#FFFFFF" :text-align 'center
		   ":flex (2 1 120)\nthen basis 160"))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(0 (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 7 :padding '(0 (12)) :border "#7B4D38"
	      :border-top 'none :bgcolor "#FFFAF7" :align-items
	      'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap
	      '(10)
	      (box :align-self 'auto :width '(118) :height 2 :bgcolor
		   "#EFC7B6" :color "#1F2328" :text-align 'center
		   "auto\ninherits start")
	      (box :align-self 'flex-start :width '(118) :height 2
		   :bgcolor "#DBA58D" :color "#1F2328" :text-align
		   'center "flex-start")
	      (box :align-self 'center :width '(118) :height 2
		   :bgcolor "#BF7F63" :color "#1F2328" :text-align
		   'center "center")
	      (box :align-self 'flex-end :width '(118) :height 2
		   :bgcolor "#9D6048" :color "#FFFFFF" :text-align
		   'center "flex-end")
	      (box :align-self 'stretch :width '(118) :bgcolor
		   "#7B4D38" :color "#FFFFFF" :text-align 'center
		   "stretch\nauto cross")
	      (box :align-self 'normal :width '(118) :bgcolor
		   "#5D3929" :color "#FFFFFF" :text-align 'center
		   "normal\nstretch-like"))
	(flex :height 6 :padding '(0 (12)) :border "#7B4D38"
	      :border-top 'none :bgcolor "#FFFAF7" :align-items
	      'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap
	      '(10)
	      (box :align-self 'start :width '(118) :height 2 :bgcolor
		   "#EFC7B6" :color "#1F2328" :text-align 'center
		   "start")
	      (box :align-self 'end :width '(118) :height 2 :bgcolor
		   "#DBA58D" :color "#1F2328" :text-align 'center
		   "end")
	      (box :align-self 'self-start :width '(118) :height 2
		   :bgcolor "#BF7F63" :color "#1F2328" :text-align
		   'center "self-start")
	      (box :align-self 'self-end :width '(118) :height 2
		   :bgcolor "#9D6048" :color "#FFFFFF" :text-align
		   'center "self-end")
	      (box :align-self 'baseline :width '(118) :height 2
		   :bgcolor "#7B4D38" :color "#FFFFFF" :text-align
		   'center "baseline"))
	(box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
	(box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0"
	     :color "#1F2328" :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."))