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