Flex

Direction

Flex Direction Utilities set the flex-direction property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-row).

UtilityValue
flex-rowrow
flex-row-reverserow-reverse
flex-columncolumn
flex-column-reversecolumn-reverse

Justify Content

Justify Content Utilities set the justify-content property, use the format justify-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., justify-content-md-center).

UtilityValue
justify-content-startflex-start
justify-content-centercenter
justify-content-endflex-end
justify-content-betweenspace-between
justify-content-aroundspace-around

Align Items

Align Items Utilities set the align-items property, use the format align-items-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-items-md-center).

UtilityValue
align-items-startflex-start
align-items-centercenter
align-items-endflex-end
align-items-baselinebaseline
align-items-stretchstretch

Align Content

Align Content Utilities set the align-content property, use the format align-content-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-content-md-center).

UtilityValue
align-content-startflex-start
align-content-centercenter
align-content-endflex-end
align-content-betweenspace-between
align-content-aroundspace-around
align-content-stretchstretch

Align Self

Align Self Utilities set the align-self property, use the format align-self-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., align-self-md-center).

UtilityValue
align-self-startflex-start
align-self-centercenter
align-self-endflex-end
align-self-autoauto
align-self-baselinebaseline
align-self-stretchstretch

Fill

flex-fill sets flex: 1 1 auto !important. This forces a flex item to fill the remaining space, just becareful using this with long text that has no white space. Use the format flex-{sm|md|lg|xl}-fill to target specific screen sizes (e.g., flex-md-fill).

UtilityValue
flex-fillflex: 1 1 auto

Grow

Flex Grow Utilities set the flex-grow property, use the format flex-{sm|md|lg|xl}-grow-{value} to target specific screen sizes (e.g., flex-md-grow-1).

UtilityValue
flex-grow-00
flex-grow-11

Shrink

Flex Shrink Utilities set the flex-shrink property, use the format flex-{sm|md|lg|xl}-shrink-{value} to target specific screen sizes (e.g., flex-md-shrink-0).

UtilityValue
flex-shrink-00
flex-shrink-11

Wrap

Flex Wrap Utilities set the flex-wrap property, use the format flex-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., flex-md-nowrap).

UtilityValue
flex-nowrapnowrap
flex-wrapwrap
flex-wrap-reversewrap-reverse

Order

Order Utilities set the order property, use the format order-{sm|md|lg|xl}-{value} to target specific screen sizes (e.g., order-md-5).

UtilityValue
order-first-
order-last13
order-00
order-11
order-22
order-33
order-44
order-55
order-66
order-77
order-88
order-99
order-1010
order-1111
order-1212
Edit this page on GitHub

Contributors

Matuzalém Teles, Patrick Yeo

Last edited January 29, 2025 at 1:35:05 AM