Parent Properties

Flex-Direction

When working with Flexbox we need to think in terms of two axes - the main axis and the cross axis. The main axis is defined by the flex-direction property.

1

2

3

Row (Default)

1

2

3

Row-Reverse

1

2

3

Column

1

2

3

Column-Reverse

Flex-Wrap

By default, flex items will try to fit onto one line. However, we can change that and allow the items to wrap as needed.

1

2

3

4

5

6

NoWrap (Default)

1

2

3

4

5

6

Wrap

1

2

3

4

5

6

Wrap-Reverse

Flex-Flow

Flex-Flow a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

1

2

3

4

5

6

Row-NoWrap (Default)

1

2

3

4

5

6

Row-Reverse-NoWrap

1

2

3

4

5

6

Row-Wrap

1

2

3

4

5

6

Column-NoWrap

1

2

3

4

5

6

Column-Reverse-NoWrap

1

2

3

4

5

6

Column-Wrap

Justify-Content

Justify-Content defines the alignment along the main axis. It helps distribute extra free space.

1

2

3

Flex-Start (Default)

1

2

3

Center

1

2

3

Flex-End

1

2

3

Space-Between

1

2

3

Space-Around

1

2

3

Space-Evenly

Align-Items

Align-Items defines the alignment along the cross axis. It works like Justify-Content but in the opposite direction.

1

2

3

4

Stretch (Default)

1

2

3

4

Flex-Start

1

2

3

4

Center

1

2

3

4

Flex-End

1

2

3

4

Baseline

Align-Content

Align-Content aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note that it only takes effect on multi-line flexible containers, where flex-wrap is set to either wrap or wrap-reverse.

1

2

3

4

5

6

Flex-Start (Default)

1

2

3

4

5

6

Center

1

2

3

4

5

6

Flex-End

1

2

3

4

5

6

Space-Between

1

2

3

4

5

6

Space-Around

1

2

3

4

5

6

Space-Evenly

1

2

3

4

5

6

Stretch

Gap

The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges. The gap will only take effect if space applied by justify-content or align-items is smaller.

1

2

3

4

5

6

Gap

1

2

3

4

5

6

Row-Gap

1

2

3

4

5

6

Column-Gap

Children Properties

Flex-Grow

Flex-Grow defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

1

2

3

0 (Default)

1

2

3

1

1

2

3

second-child

1

2

3

proportionally

Flex-Shrink

Flex-Shrink defines the ability for a flex item to shrink if necessary.

1

2

3

1 (Default)

1

2

3

0

Flex-Basis

Flex-Basis defines the default size of an item before the remaining space is distributed.

1

2

3

3em

1

2

3

2em

Flex

Flex is the shorthand for flex-grow, flex-shrink and flex-basis combined.

1

2

3

grow: 0, shrink: 1, basis: auto (Default)

1

2

3

grow: 1, shrink: 0, basis: 8em

Align-Self

Align-Self allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

1

2

3

Flex-Start

1

2

3

Center

1

2

3

Flex-End

Order

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

1

2

3

4

Reversed first and last item

1

2

3

4

All items reversed