Grids

Flex Row

Item 1
Item 2
Item 3
HTML 
<div class="ss-c-flex--row" style="gap: 1rem">
            <div class="ss-c-demo-box">Item 1</div>
            <div class="ss-c-demo-box">Item 2</div>
            <div class="ss-c-demo-box">Item 3</div>
        </div>

Flex Column

Item A
Item B
Item C
HTML 
<div class="ss-c-flex--col" style="gap: 1rem">
            <div class="ss-c-demo-box">Item A</div>
            <div class="ss-c-demo-box">Item B</div>
            <div class="ss-c-demo-box">Item C</div>
        </div>

Flex Wrap

Box 1
Box 2
Box 3
Box 4
HTML 
<div class="ss-c-flex--row ss-c-flex--wrap" style="gap: 1rem">
            <div class="ss-c-demo-box" style="width: 30%">Box 1</div>
            <div class="ss-c-demo-box" style="width: 30%">Box 2</div>
            <div class="ss-c-demo-box" style="width: 30%">Box 3</div>
            <div class="ss-c-demo-box" style="width: 30%">Box 4</div>
        </div>

Align Self

start
center
end
stretch
HTML 
<div
            class="ss-c-flex--row"
            style="height: 120px; align-items: stretch; gap: 1rem"
        >
            <div class="ss-c-demo-box ss-c-align_self--start">start</div>
            <div class="ss-c-demo-box ss-c-align_self--center">center</div>
            <div class="ss-c-demo-box ss-c-align_self--end">end</div>
            <div class="ss-c-demo-box ss-c-align_self--stretch">stretch</div>
        </div>

Flex Row Reverse

First
Second
Third
HTML 
<div class="ss-c-flex--row--reverse" style="gap: 1rem">
            <div class="ss-c-demo-box">First</div>
            <div class="ss-c-demo-box">Second</div>
            <div class="ss-c-demo-box">Third</div>
        </div>

Flex Column Reverse

Bottom
Middle
Top
HTML 
<div class="ss-c-flex--col--reverse" style="gap: 1rem">
            <div class="ss-c-demo-box">Bottom</div>
            <div class="ss-c-demo-box">Middle</div>
            <div class="ss-c-demo-box">Top</div>
        </div>