Flexbox System
The flexbox system allows to further control the layout of the elements. Simply set the class .flex on the direct container of the elements you wish to arrange to begin.
Content direction
Row (default)
By default, using .flex will arrange the descendants in a row, from left to right (or right to left depending on the reading direction). Using .flex--horizontal, you can change the direction from a column to a row.
.flex and .flex--horizontal
Row reverse
.flex and .flex--reverse will rearrange items at the end of the container and also reverse their order horizontally.
.flex and .flex--reverse
Column
Using .flex--vertical on the same element than .flex, the descendants will be arranged in a column, from top to bottom (or bottom to top depending on the reading direction).
.flex and .flex--vertical
Column reverse
.flex and .flex--reverse will rearrange items at the end of the container and also reverse their order vertically.
.flex and .flex--vertical-reverse
Horizontal content alignement
Start
Using .flex--justify-start on the same element than .flex, the descendants will be aligned at the start of the container depending of the reading direction (e.g. from left to right : items aligned at the left).
.flex and .flex--justify-start
Content
Content
Content
Center
Using .flex--horizontal-center on the same element than .flex, the descendants will be aligned at the center of the container.
.flex and .flex--horizontal-center
Content
Content
Content
End
Using .flex--justify-end on the same element than .flex, the descendants will be aligned at the end of the container depending of the reading direction (e.g. from left to right : items aligned at the end).
.flex and .flex--justify-end
Content
Content
Content
Space between
Using .flex--justify-between on the same element than .flex, the descendants will be placed using all the width of the container with the same amount of space between each one of them.
.flex and .flex--justify-between
Content
Content
Content
Space around
Using .flex--justify-around on the same element than .flex, the descendants will be equaly placed. At each side, between the edge and the first/last item, half the size from between the items is applied.
.flex and .flex--justify-around
Content
Content
Content
Space evenly
Using .flex--justify-evenly on the same element than .flex, the descendants will be placed with the same space between them.
.flex and .flex--justify-evenly
Content
Content
Content
Vertical content alignement
Align start
Using .flex--align-start on the same element than .flex, the descendants will be gathered at the start of the container.
.flex and .flex--align-start
Content
Content
Content
Align center
Using .flex--vertical-center on the same element than .flex, the descendants will be gathered at the center of the container.
.flex and .flex--vertical-center
Content
Content
Content
Align end
Using .flex--align-end on the same element than .flex, the descendants will be gathered at the end of the container.
.flex and .flex--align-end
Content
Content
Content
Content wrapping
Wrap
Using .flex--wrap on the same element than .flex, the descendants will break on multiple lines if their combined sizes overflow the size of the container.
.flex and .flex--wrap
Content
Content
Content
No wrap
Using .flex--no-wrap on the same element than .flex, the descendants will be forced to remain on a single line, which may cause them to overflow from the container.
.flex and .flex--no-wrap
Content
Content
Content
Content flexibility
Flex grow
Applying .flex--grow on a specific element will allow it to grow in order to take all the remaining space on the axis inside its container.
.flex on the container and .flex--grow on the desired element
Content
Content
Content
Flex shrink
Applying .flex--shrink on a specific element will allow it to shrink if other elements on the axis have to take more space.
.flex on the container and .flex--shrink on the desired element
Content
Content
Content
Start
Using .flex--justify-start on the same element than .flex, the descendants will be aligned at the start of the container depending of the reading direction (e.g. from left to right : items aligned at the left).
.flex and .flex--justify-start
Center
Using .flex--horizontal-center on the same element than .flex, the descendants will be aligned at the center of the container.
.flex and .flex--horizontal-center
End
Using .flex--justify-end on the same element than .flex, the descendants will be aligned at the end of the container depending of the reading direction (e.g. from left to right : items aligned at the end).
.flex and .flex--justify-end
Space between
Using .flex--justify-between on the same element than .flex, the descendants will be placed using all the width of the container with the same amount of space between each one of them.
.flex and .flex--justify-between
Space around
Using .flex--justify-around on the same element than .flex, the descendants will be equaly placed. At each side, between the edge and the first/last item, half the size from between the items is applied.
.flex and .flex--justify-around
Space evenly
Using .flex--justify-evenly on the same element than .flex, the descendants will be placed with the same space between them.
.flex and .flex--justify-evenly
Align start
Using .flex--align-start on the same element than .flex, the descendants will be gathered at the start of the container.
.flex and .flex--align-start
Align center
Using .flex--vertical-center on the same element than .flex, the descendants will be gathered at the center of the container.
.flex and .flex--vertical-center
Align end
Using .flex--align-end on the same element than .flex, the descendants will be gathered at the end of the container.
.flex and .flex--align-end
Content wrapping
Wrap
Using .flex--wrap on the same element than .flex, the descendants will break on multiple lines if their combined sizes overflow the size of the container.
.flex and .flex--wrap
Content
Content
Content
No wrap
Using .flex--no-wrap on the same element than .flex, the descendants will be forced to remain on a single line, which may cause them to overflow from the container.
.flex and .flex--no-wrap
Content
Content
Content
Content flexibility
Flex grow
Applying .flex--grow on a specific element will allow it to grow in order to take all the remaining space on the axis inside its container.
.flex on the container and .flex--grow on the desired element
Content
Content
Content
Flex shrink
Applying .flex--shrink on a specific element will allow it to shrink if other elements on the axis have to take more space.
.flex on the container and .flex--shrink on the desired element
Content
Content
Content
Wrap
Using .flex--wrap on the same element than .flex, the descendants will break on multiple lines if their combined sizes overflow the size of the container.
.flex and .flex--wrap
No wrap
Using .flex--no-wrap on the same element than .flex, the descendants will be forced to remain on a single line, which may cause them to overflow from the container.
.flex and .flex--no-wrap
Flex grow
Applying .flex--grow on a specific element will allow it to grow in order to take all the remaining space on the axis inside its container.
.flex on the container and .flex--grow on the desired element
Flex shrink
Applying .flex--shrink on a specific element will allow it to shrink if other elements on the axis have to take more space.
.flex on the container and .flex--shrink on the desired element