- ☀️Light
- 🌙Dark
- 💻System
📐 What is flex used for?
Flex utilities are used to control the layout of elements inside a flex container. They let you change direction, wrapping behavior, alignment along the main axis and cross axis, and define how items grow or shrink. Combined with responsive variants, they make it easy to build adaptive layouts without writing custom CSS.
All these utilities are designed to be used on an element with
display: flex
(for example using
.d-flex in this framework).
💠 Examples
The flex utilities are grouped into several families:
.fd-* for direction,
.fw-* for wrapping,
.jc-* for horizontal alignment,
.ai-* and
.ac-* for vertical alignment,
and
.as-*
to control alignment of individual items.
Item 1
Item 2
Item 3
Start
Middle
End
Block A
Block B
Block C
Item 1
Item 2
Item 3
Item 4
Item 5
Stretch A
Stretch B
Stretch C
Start
Center
End
Stretch
Baseline
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
Box 9
Box 10
Box 11
Box 12
Fixed
Flex auto
Flex auto
💻 HTML Code
Item 1
Item 2
Item 3
Start
Middle
End
Block A
Block B
Block C
Item 1
Item 2
Item 3
Item 4
Item 5
Stretch A
Stretch B
Stretch C
Start
Center
End
Stretch
Baseline
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Fixed
Flex auto
Flex auto
📏 Flex Utilities & Breakpoints
Flex utilities follow a consistent naming pattern. You can use:
.fd-* to control direction,
.fw-* to toggle wrapping,
.jc-* to align items along the main axis,
.ai-* to align items on the cross axis,
.ac-* to align multi-line content,
and
.as-* to override alignment for a single item.
Responsive variants are created by appending a breakpoint suffix, such as
-xs,
-sm,
-md,
or
-lg.
For example,
.fd-column fd-row-md
stacks items in a column on small screens and switches to a row layout starting from the
md breakpoint.
.fd-{direction}
Controls the flex direction of a container
(for example:
.fd-row,
.fd-column).
.fw-{mode}
Controls wrapping behavior inside the container
(for example:
.fw-wrap,
.fw-nowrap).
.jc-{value}
Aligns items along the main axis
(for example:
.jc-center,
.jc-between).
.ai-{value}
Aligns items on the cross axis
(for example:
.ai-center,
.ai-stretch).
.ac-{value}
Aligns multi-line flex content when wrapping is enabled
(for example:
.ac-between,
.ac-around).
.as-{value}
Overrides alignment for a single flex item
(for example:
.as-start,
.as-end).
.flex-1-1-auto
Allows the item to grow and shrink automatically, sharing remaining space with other flex items.
.{utility}-{breakpoint}
Applies the selected utility only from the specified breakpoint
(for example:
.fd-row-md,
.jc-center-lg).