flex Utilities

The Flex utilities are: flex-basis, flex-shrink, flex-grow and align-self.

These utilities are usable on flex elements to change their behavior, so you can use it on child elements from ledge, switcher and sidebar components.

Examples

The `flex-basis` is used as a normal flex basis value.

Flex-basis defines the default size of an element before the remaining space is distributed.

Element 1

Element 2

Element 3

Element 1

Element 2

Element 3

The `flex-grow` is used as a normal flex grow value.

Flex-grow defines the ability for a flex item to grow if necessary.

Element 1

Element 2

Element 3

The `flex-shrink` is used as a normal flex shrink value.

Flex-shrink defines the ability for a flex item to shrink if necessary.

Try to resize the example bellow to see how elements shrink.

Element Lorem ipsum dolor sit

The `align-self` allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Element Lorem ipsum dolor sit