Flex Utilities

Flex Container Classes

• d-flex: Sets the display property to flex, making the element a flex container.
• flex-inline: Uses inline-flex display.

Flex Direction Classes

• flex-direction-row: Sets the flex direction to row.
• flex-direction-row-reverse: Sets the flex direction to row reverse.
• flex-direction-column: Sets the flex direction to column.
• flex-direction-column-reverse: Sets the flex direction to column reverse.

Wrap and No-Wrap Classes

• flex-wrap: Enables wrapping of items.
• flex-nowrap: Disables wrapping of items.
• flex-wrap-reverse: Items wrap in reverse order.

Justify Content Classes

• justify-content-start: Items aligned to the start of the container.
• justify-content-end: Items aligned to the end of the container.
• justify-content-center: Items centered in the container.
• justify-content-between: Space distributed between items.
• justify-content-around: Space distributed around items.
• justify-content-evenly: Space distributed evenly.

Align Items Classes

• align-items-start: Items aligned to the start of the cross axis.
• align-items-end: Items aligned to the end of the cross axis.
• align-items-center: Items centered along the cross axis.
• align-items-baseline: Items aligned along the baseline.
• align-items-stretch: Items stretched to fill the container.

Align Content Classes

• align-content-start: Lines aligned to the start of the container.
• align-content-end: Lines aligned to the end of the container.
• align-content-center: Lines centered in the container.
• align-content-between: Space distributed between lines.
• align-content-around: Space distributed around lines.
• align-content-stretch: Lines stretched to fill the container.

Align Self Classes

• align-self-start: Individual item aligned to start.
• align-self-end: Individual item aligned to end.
• align-self-center: Individual item centered.
• align-self-baseline: Individual item aligned to baseline.
• align-self-stretch: Individual item stretched to fill the container.

Flex Grow and Shrink Classes

• flex-grow-0: Disable flex grow.
• flex-grow-1: Enable flex grow.
• flex-shrink-0: Disable flex shrink.
• flex-shrink-1: Enable flex shrink.

Order Classes

• order-0: Sets the order of a flex item to 0.
• order-1: Sets the order of a flex item to 1.
• order-2: Sets the order of a flex item to 2.
• tablet-order-0: Sets the order of a flex item to 0 on tablet and smaller screens.
• tablet-order-1: Sets the order of a flex item to 1 on tablet and smaller screens.
• tablet-order-2: Sets the order of a flex item to 2 on tablet and smaller screens.
• tablet-order-3: Sets the order of a flex item to 3 on tablet and smaller screens.
• tablet-order-4: Sets the order of a flex item to 4 on tablet and smaller screens.
• tablet-order-5: Sets the order of a flex item to 5 on tablet and smaller screens.
• tablet-order-6: Sets the order of a flex item to 6 on tablet and smaller screens.
• tablet-order-7: Sets the order of a flex item to 7 on tablet and smaller screens.
• tablet-order-8: Sets the order of a flex item to 8 on tablet and smaller screens.
• tablet-order-9: Sets the order of a flex item to 9 on tablet and smaller screens.
• tablet-order-10: Sets the order of a flex item to 10 on tablet and smaller screens.

Featured Cards

These classes are used to set the width of cards, allowing you to feature one or multiple cards in a row.

• feature
• feature-sm
• feature-md
• feature-lg

Usage Examples

Here are some examples showcasing how you might use these utilities in your HTML:

<z-row>
                <z-col class="card">Item 1</z-col>
                <z-col class="card feature-lg">Item 2</z-col>
            </z-row>