Flexbox & Grid
Utilities for controlling how flex items both grow and shrink.
Class | Styles |
---|---|
flex-<number> | flex: <number>; |
flex-<fraction> | flex: calc(<fraction> * 100%); |
flex-auto | flex: 1 1 auto; |
flex-initial | flex: 0 1 auto; |
flex-none | flex: none; |
Use flex-<number>
utilities like flex-1
to allow a flex item to grow and shrink as needed, ignoring its initial size:
Use flex-initial
to allow a flex item to shrink but not grow, taking into account its initial size:
Use flex-auto
to allow a flex item to grow and shrink, taking into account its initial size:
Use flex-none
to prevent a flex item from growing or shrinking:
Use the flex-(<custom-property>)
syntax to set the flex based on a custom property:
<div class="flex-(--my-flex) ..."> <!-- ... --></div>
Use the flex-[<value>]
syntax to set the flex based on a completely custom value:
<div class="flex-[3_1_auto] ..."> <!-- ... --></div>
Prefix a flex
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="flex-none md:flex-1"> <!-- ... --></div>
Learn more about using variants in the variants documentation.