Helpers: Flexbox


Container

Flexbox container

Direction

Row

Flex direction row
Flex direction row
Flex direction row

Row-reverse

Flex direction row-reverse
Flex direction row-reverse
Flex direction row-reverse

Column

Flex direction column
Flex direction column
Flex direction column

Column-reverse

Flex direction column-reverse
Flex direction column-reverse
Flex direction column-reverse

Wrap

Nowrap

Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap
Flex-wrap nowrap

Wrap

Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap
Flex-wrap wrap

Wrap-reverse

Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse
Flex-wrap reverse

Justify content

Flex start

Justify content flex start
Justify content flex start
Justify content flex start

Flex end

Justify content flex end
Justify content flex end
Justify content flex end

Center

Justify content center
Justify content center
Justify content center

Space between

Justify content space between
Justify content space between
Justify content space between

Space around

Justify content space around
Justify content space around
Justify content space around

Space evenly

Justify content space evenly
Justify content space evenly
Justify content space evenly

Align content

Flex start

Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start
Align content flex start

Flex end

Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end
Align content flex end

Center

Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center
Align content center

Space between

Align content space between
Align content space between
Align content space between
Align content space between
Align content space between
Align content space between
Align content space between
Align content space between
Align content space between
Align content space between

Space around

Align content space around
Align content space around
Align content space around
Align content space around
Align content space around
Align content space around
Align content space around
Align content space around
Align content space around
Align content space around

Space evenly

Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly
Align content space evenly

Stretch

Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch
Align content stretch

Align items

Stretch

Justify content stretch
Justify content stretch
Justify content stretch

Flex start

Justify content flex start
Justify content flex start
Justify content flex start

Flex end

Justify content flex end
Justify content flex end
Justify content flex end

Center

Justify content center
Justify content center
Justify content center

Baseline

Justify content baseline
Justify content baseline
Justify content baseline

Align self

Auto

Align self auto
Flex item
Flex item

Flex start

Align self flex start
Flex item
Flex item

Flex end

Align self flex end
Flex item
Flex item

Center

Align self center
Flex item
Flex item

Baseline

Align self baseline
Flex item
Flex item

Stretch

Align self stretch
Flex item
Flex item

Grow

Flex grow 0
Flex grow 1
Flex grow 2
Flex grow 3
Flex grow 4
Flex grow 5

Shrink

Flex shrink 0
Flex shrink 1
Flex shrink 2
Flex shrink 3
Flex shrink 4
Flex shrink 5