Hello Documentation

Align self

Override the default alignment (specified by align-items in flex layout) of a single item.

Start

Usage

u-flex-align-self-start(@[breakpoint])

Examples

Abu Dhabi

Amsterdam

Brussels

Cairo

Doha

Edinburgh

u-flex-align-self-start

Center

Usage

u-flex-align-self-center(@[breakpoint])

Examples

Abu Dhabi

Amsterdam

Brussels

Cairo

Doha

Edinburgh

u-flex-align-self-center

End

Usage

u-flex-align-self-end(@[breakpoint])

Examples

Abu Dhabi

Amsterdam

Brussels

Cairo

Doha

Edinburgh

u-flex-align-self-end

Stretch

Usage

u-flex-align-self-stretch(@[breakpoint])

Examples

Abu Dhabi

Amsterdam

Brussels

Cairo

Doha

Edinburgh

u-flex-align-self-stretch

Baseline

Usage

u-flex-align-self-baseline(@[breakpoint])

Examples

Abu Dhabi

Amsterdam

Brussels

Cairo

Doha

Edinburgh

u-flex-align-self-baseline

Order

Change order without changing underlying HTML.

First

Usage

u-flex-order-first(@[breakpoint])

Examples

1 - Amsterdam

2 - Brussels

3 - Cairo

4 - Doha

5 - Edinburgh

u-flex-order-first

Last

Usage

u-flex-order-last(@[breakpoint])

Examples

1 - Amsterdam

2 - Brussels

3 - Cairo

4 - Doha

5 - Edinburgh

u-flex-order-last

None

Useful to cancel first or last order on a specific breakpoint.

Usage

u-flex-order-none(@[breakpoint])

Examples

1 - Amsterdam

2 - Brussels

3 - Cairo

4 - Doha

5 - Edinburgh

u-flex-order-last u-flex-order-none@medium

Proportions

Grow

Specify the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container.

Usage

u-flex-grow[amount](@[breakpoint])

amount
A number between 1-5

Examples

1 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

2 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

3 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

1: u-flex-grow1
2: u-flex-grow2
3: u-flex-grow3

Shrink

Specify the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container.

Usage

u-flex-shrink[amount](@[breakpoint])

amount
A number between 0-5.
Default behavior is 1.
Using 0 prevents shrinking.

Examples

1 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

2 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

3 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam quae beatae cumque aut accusamus vero maxime magnam ipsam.

1: u-flex-shrink1
2: u-flex-shrink2
3: u-flex-shrink3

Shorthands

The following shorthands utilities define the size flexibility. When based on width/height properties, it means width for flex with row direction, while height is for flex with column direction.

Initial

Sizes the item based on the width/height properties. It can shrink when there is overflow. Corresponds to CSS property flex: 0 1 auto.

Usage

u-flex-initial(@[breakpoint])

Auto

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. Corresponds to CSS property flex: 1 1 auto.

Usage

u-flex-auto(@[breakpoint])

None

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. Corresponds to CSS property flex: 0 0 auto.

Usage

u-flex-none(@[breakpoint])