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",
);