Flex

Available Classes

flex-container

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

flex-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

flex-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-content

• 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

flex-grow

• u-flexGrow1 - Specify how much the flex item will grow relatively
• u-flexGrow0 - Stop an element from growing and overriding shrink

flex-shrink

X can be any of the following numbers: 0, 1

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

flex-basis

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

• u-flexBasisAuto
• u-flexBasis0

flex 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.

Aligning with 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