Flex
These utilities provide a way to manage flex layout using classes. A good understanding of CSS flex layout is needed to use them properly. Get an overview of the CSS flex rules with The Flexbox cheatsheet.
These utilities define the alignement and position of elements inside the flex container. Check the items documentation to override the alignement for an item.
Jutify content
Disposition of items on the main axis. (horizontally for row direction, vertically for column direction).
Start (default)
Usage
u-flex-justify-start(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-justify-start
Center
Usage
u-flex-justify-center(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-justify-center
End
Usage
u-flex-justify-end(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-justify-end
Between
Usage
u-flex-justify-between(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-justify-between
Around
Usage
u-flex-justify-around(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-justify-around
Align items
Define alignement of item (vertically for row direction, horizontally for column direction)
Start
Usage
u-flex-align-items-start(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-items-start
Center
Usage
u-flex-align-items-center(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-items-center
End
Usage
u-flex-align-items-end(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-items-end
Strech (default)
Usage
u-flex-align-items-strech(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-items-strech
Baseline
Usage
u-flex-align-items-baseline(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-items-baseline
Align content
Disposition of items on the cross axis. (vertically for row direction, horizontally for column direction).
Start
Usage
u-flex-align-content-start(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-content-start
Center
Usage
u-flex-align-content-center(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-content-center
End
Usage
u-flex-align-content-end(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-content-end
Space between
Usage
u-flex-align-content-between(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-content-between
Space around
Usage
u-flex-align-content-around(@[breakpoint])
Examples
Amsterdam
Brussels
Cairo
Doha
Edinburgh
Freetown
Georgetown
Helsinki
u-flex u-flex-align-content-around