Flex - Nitro UI

u-flex

I am flexbox container

u-inline-flex

I am inline flexbox container

u-flex--row

Flex item 1

Flex item 2

Flex item 3

u-flex--row-reverse

Flex item 1

Flex item 2

Flex item 3

u-flex--column

Flex item 1

Flex item 2

Flex item 3

u-flex--column-reverse

Flex item 1

Flex item 2

Flex item 3

u-flex--nowrap

Flex item

u-flex--wrap

Flex item

u-flex--wrap-reverse

Flex item

u-flex--justify-start

Flex item

u-flex--justify-end

Flex item

u-flex--justify-center

Flex item

u-flex--justify-between

Flex item

u-flex--justify-around

Flex item

u-flex--justify-evenly

Flex item

u-flex--items-start

Flex item

u-flex--items-end

Flex item

u-flex--items-center

Flex item

u-flex--items-baseline

Flex item

u-flex--items-stretch

Flex item

u-flex--content-start

Flex item

u-flex--content-end

Flex item

u-flex--content-center

Flex item

u-flex--content-between

Flex item

u-flex--content-around

Flex item

u-flex--content-stretch

Flex item

u-flex__self-auto

Flex item

Aligned flex item

Flex item

u-flex__self-start

Flex item

Aligned flex item

Flex item

u-flex__self-end

Flex item

Aligned flex item

Flex item

u-flex__self-center

Flex item

Aligned flex item

Flex item

u-flex__self-baseline

Flex item

Aligned flex item

Flex item

u-flex__self-stretch

Flex item

Aligned flex item

Flex item

u-flex__fill

Flex item

Filled flex item with lot of content

Flex item

u-flex__grow-1

Grow flex item

Flex item

u-flex__shrink-1

Flex item

Flex item shrinked

Flex item

normal margins

Flex item

margin right auto

Flex item

Flex item Right auto

Flex item

margin right auto

Flex item left auto

Flex item

Order first last

Flex order

Flex order first

Flex order

Flex order last

Flex order

Order 1-12

order 4

order 5

order 6

order 1

order 2

order 3

order 7

order 8

order 10

order 11

order 12

order 9

u-flex

u-inline-flex

Direction

u-flex--row

u-flex--row-reverse

u-flex--column

u-flex--column-reverse

Wrap

u-flex--nowrap

u-flex--wrap

u-flex--wrap-reverse

Justify Content

u-flex--justify-start

u-flex--justify-end

u-flex--justify-center

u-flex--justify-between

u-flex--justify-around

u-flex--justify-evenly

Align items

u-flex--items-start

u-flex--items-end

u-flex--items-center

u-flex--items-baseline

u-flex--items-stretch

Align Content

u-flex--content-start

u-flex--content-end

u-flex--content-center

u-flex--content-between

u-flex--content-around

u-flex--content-stretch

Flex Child Property

Align Self

u-flex__self-auto

u-flex__self-start

u-flex__self-end

u-flex__self-center

u-flex__self-baseline

u-flex__self-stretch

Fill

u-flex__fill

Grow and Shrink

u-flex__grow-1

u-flex__shrink-1

Auto Margins

normal margins

margin right auto

margin right auto

Flex order

Order first last

Order 1-12