Flexbox Styles

The file flex.css contains a set of classes that can be used to style elements using flexbox.

To use these styles on a tag, add the class flex to the tag. Afterwards, you can add any of the following classes to the tag to apply the corresponding style:

General Styles

Class	Description
row	Sets the container as a row
col	Sets the container as a column
grow	Sets the container to grow to fill the available space
wrap	Sets the container to wrap its contents
fw	Sets the container to fill the available width
gutter-sm	Sets the container to have a small gap between its children
gutter-md	Sets the container to have a medium gap between its children
gutter-lg	Sets the container to have a large gap between its children

Alignment styles

Class	Description
la	Sets the container to align its children to the left (horizontally)
ca	Sets the container to align its children to the center (horizontally)
ra	Sets the container to align its children to the right (horizontally)
sa	Sets the container to align its children with space around them (horizontally)
sb	Sets the container to align its children with space between them (horizontally)
vla	Sets the container to align its children to the top (vertically)
vca	Sets the container to align its children to the center (vertically)
vra	Sets the container to align its children to the bottom (vertically)
vsa	Sets the container to align its children with space around them (vertically)
vsb	Sets the container to align its children with space between them (vertically)