geekinney/ebox-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
6cd5a67a35
ebox-playground/examples/flex-reference.ebox
Kinneyzhang 6cd5a67a35 feat: add sizing and interactive text reference examples 
Load same-basename Elisp companions through the generic preview runner. Demonstrate size semantics and native help, pointer, hover and keymap behavior with isolated example state.

Update Flex and Grid examples and extend reusable comparison and interaction evaluators with publication, allocation and fresh-render parity checks.

Validation: make check passed, including all 72 Playground tests.
2026-09-09 22:25:28 +08:00

615 lines
39 KiB
Plaintext
Raw Blame History

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