| Class | Properties |
|---|---|
.flex-initial | flex: initial; |
.flex-1 | flex: 1; |
.flex-auto | flex: auto; |
.flex-none | flex: none; |
.flex-grow | flex-grow: 1; |
.flex-grow-0 | flex-grow: 0; |
.flex-shrink | flex-shrink: 1; |
.flex-shrink-0 | flex-shrink: 0; |
Usage
Initial
Use .flex-initial to allow a flex item to shrink but not grow, taking into account its initial size.
Flex 1
Use .flex-1 to allow a flex item to grow and shrink, ignoring its initial size.
Auto
Use .flex-auto to allow a flex item to grow and shrink, taking into account its initial size.
Grow
Use .flex-grow to allow a flex item to grow and fill available space.
Use .flex-grow-0 to prevent a flex item from growing.
Shrink
Use .flex-shrink to allow a flex item to shrink if required.
Use .flex-shrink-0 to prevent a flex item from shrinking.
None
Use .flex-none to prevent a flex item from growing or shrinking.
Variants
By default, only responsive variants are generated for flex utilities.
Responsive
To control the flex direction of an element at a specific breakpoint, add a {screen}: prefix to any existing flex utility.
For example, use .md:flex-1 to apply the flex-1 utility at only medium screen sizes and above.
Hover-state
To include hover-state variants like .hover:flex-1, add "flexs" to the $hover-variants variable when recompiling your CSS:
$hover-variants: (
// ...
"flex",
);