Flex

SUIT CSS Flex Utilities

The foundation of our CSS flex utilities are sourced from SUIT CSS:

u-flex - Create a flex container
u-flexInline - Create an inline flex container

All flex utilities can be limited to specific breakpoints:

u-sm-flexX - To use at the smallest Media Query breakpoint.
u-md-flexX - To use at the medium Media Query breakpoint.
u-lg-flexX - To use at the largest Media Query breakpoint.

Direction

u-flexRow - Displays items in a row
u-flexRowReverse - Reverses items in a row
u-flexCol - Display items in a column
u-flexColReverse - Reverses items in a column

Wrap

u-flexWrap - Wrap items onto another line when space allows
u-flexNoWrap - Force items to stay on one line
u-flexWrapReverse - Wrap items and reverse direction

Justify

u-flexJustifyStart - Align items at the start of the main axis
u-flexJustifyEnd - Align items at the end of the main axis
u-flexJustifyCenter - Align items at the center of the main axis
u-flexJustifyBetween - Items have space between each other on main axis
u-flexJustifyAround - Items have space around each other on main axis

Align Items

u-flexAlignItemsStretch - Items stretch to fill container
u-flexAlignItemsStart - Cross-start margin edge of the items is placed on the cross-start line
u-flexAlignItemsEnd - Cross-end margin edge of the items is placed on the cross-end line
u-flexAlignItemsCenter - Items are centered in the cross-axis
u-flexAlignItemsBaseline - Items have their baselines aligned on the cross axis

Align Content

u-flexAlignContentStart - Items are packed to the start of the container
u-flexAlignContentEnd - Items are packed to the end of the container
u-flexAlignContentCenter - Items are packed to the centre of the container
u-flexAlignContentStretch - Lines stretch to take up the remaining space
u-flexAlignContentBetween - Lines evenly distributed; first and last lines at container edge
u-flexAlignContentAround - Lines evenly distributed with equal space around each line

Align Self

u-flexAlignSelfStart - Aligns single item at cross axis start
u-flexAlignSelfEnd - Aligns single item at cross axis end
u-flexAlignSelfCenter - Aligns single item at cross axis centre
u-flexAlignSelfStretch - Stretches single item from cross start to end
u-flexAlignSelfAuto - Uses the default set by align-items

Order

u-flexOrderFirst - Positions an item at the start
u-flexOrderLast - Positions an item at the end
u-flexOrderNone - Sets item order to the default of 0

Grow

u-flexGrowX - Specify how much the flex item will grow relatively

X can be any of the following numbers: 1, 2, 3, 4, 5.

Shrink

u-flexShrinkX - Specify how much the flex item will shrink relatively

X can be any of the following numbers: 0, 1, 2, 3, 4, 5.

Basis

Used to override other utilities and tweak how space is distributed.

u-flexBasisAuto
u-flexBasis0

Shorthand

u-flexInitial - Sizes the item based on the width/height properties
u-flexAuto - Sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis.
u-flexNone - Sizes the item according to the width/height properties, but makes the flex item fully inflexible. Similar to initial, except that flex items are not allowed to shrink, even in overflow situations.

Auto Margins

u-flexExpand - Expand all margins to fill remaining space
u-flexExpandTop - Expand top margin to fill remaining space
u-flexExpandRight - Expand right margin to fill remaining space
u-flexExpandBottom - Expand bottom margin to fill remaining space
u-flexExpandLeft - Expand left margin to fill remaining space

Specific to this project, we've added some additional shorthand classes:

u-flexExpandEnds - Expand top and bottom margins
u-flexExpandSides - Expand left and right margins

Flexbox's Best-Kept Secret