From 65a24e2b6983b24a0693c9d95443357d5ef08cab Mon Sep 17 00:00:00 2001 From: Kinneyzhang Date: Sat, 5 Sep 2026 05:07:38 +0800 Subject: [PATCH] chore: freeze verified ebox-playground baseline before C1b --- examples/flex-reference.ebox | 1489 +++++++++++++++++----------------- 1 file changed, 725 insertions(+), 764 deletions(-) diff --git a/examples/flex-reference.ebox b/examples/flex-reference.ebox index 3b54c0a..fbaa315 100644 --- a/examples/flex-reference.ebox +++ b/examples/flex-reference.ebox @@ -1,764 +1,725 @@ -(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.")) +(column :height '(viewport-height) :width '(viewport) + :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-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" + :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-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :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-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :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-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :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-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :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-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" + :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-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :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-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :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-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :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-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95" + :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-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95" :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-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95" :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :bgcolor "#F6FBFD" + (column + (box :width '(146) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "flex-start") + (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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 "stretch") + (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :bgcolor "#F6FBFD" :justify-content 'stretch + (box :width '(70) :height 1 :bgcolor "#7DB8CE" + :color "#1F2328" :text-align 'center "stretch"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :bgcolor "#F6FBFD" :justify-content 'normal + (box :width '(70) :height 1 :bgcolor "#5F9CB5" + :color "#1F2328" :text-align 'center "normal"))) + (column + (box :width '(176) :padding '(0 (4)) :border "#3F6D88" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88" + :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" + :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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 "start") + (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items + 'start + (box :width '(78) :height 1 :bgcolor "#BA8456" + :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items + 'end + (box :width '(70) :height 1 :bgcolor "#9A6B43" + :color "#FFFFFF" :text-align 'center + "end"))) + (column + (box :width '(146) :padding '(0 (4)) :border "#9A6B43" + :bgcolor "#FFFDF8" :color "#1F2328" :text-align + 'center "normal") + (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" + :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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 "normal") + (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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 "normal") + (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :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-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" + :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-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :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-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :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-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :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-right "#8E4A63" :border-bottom "#8E4A63" :border-left "#8E4A63" :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-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :bgcolor "#FFFDF8" :color "#3D3A35" + "Grow factors: same basis, different growth weights.") + (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :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-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :bgcolor "#FFFDF8" :color "#3D3A35" + "Shrink factors: overflowing bases lose space by weighted shrink.") + (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :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-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 '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :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-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 '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C" + :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 + :column-gap '(10) + (box :flex-shrink 0 :flex-basis 'auto :width '(180) + :height 2 :bgcolor "#C7E3F0" :color "#1F2328" + :text-align 'center "auto\nuses width") + (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-right "#52612F" :border-bottom "#52612F" :border-left "#52612F" :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 (160)) :bgcolor + "#66762D" :color "#FFFFFF" :text-align 'center + ":flex (2 1 160)\none atomic shorthand")) + (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-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :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-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :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 'flex-start :width '(118) :height 2 + :bgcolor "#BF7F63" :color "#1F2328" :text-align + 'center "flex-start") + (box :align-self 'flex-end :width '(118) :height 2 + :bgcolor "#9D6048" :color "#FFFFFF" :text-align + 'center "flex-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."))