Flexbox in CSS

The CSS properties that allow you to use the CSS3 Flexbox capabilities

Share this page

New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

#align-content

Defines how each line is aligned within a flexbox/grid container. It only applies if flex-wrap: wrap is present, and if there are multiple lines of flexbox/grid items.

default align-content: stretch;

Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

  • The first line is 100px high
  • The second line is 50px high
  • The remaing space is 150px

This remaining space is distributed equally amongst the two lines:

  • The first line is now 175px high
  • The second line is now 125px high

align-content: flex-start;

Each line will only fill the space it needs. They will all move towards the start of the flexbox/grid container's cross axis.

align-content: flex-end;

Each line will only fill the space it needs. They will all move towards the end of the flexbox/grid container's cross axis.

align-content: center;

Each line will only fill the space it needs. They will all move towards the center of the flexbox/grid container's cross axis.

align-content: space-between;

Each line will only fill the space it needs. The remaining space will appear between the lines.

align-content: space-around;

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.

#align-items

Defines how flexbox items are aligned according to the cross axis, within a line of a flexbox container.

align-items: flex-start;

The flexbox items are aligned at the start of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the top.

align-items: flex-end;

The flexbox items are aligned at the end of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be aligned vertically at the bottom.

align-items: center;

The flexbox items are aligned at the center of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will be centered vertically.

align-items: baseline;

The flexbox items are aligned at the baseline of the cross axis.

By default, the cross axis is vertical. This means the flexbox items will align themselves in order to have the baseline of their text align along a horizontal line.

align-items: stretch;

The flexbox items will stretch across the whole cross axis.

By default, the cross axis is vertical. This means the flexbox items will fill up the whole vertical space.

#align-self

Works like align-items, but applies only to a single flexbox item, instead of all of them.

default align-self: auto;

The target will use the value of align-items.

align-self: flex-start;

If the container has align-items: center and the target has align-self: flex-start, only the target will be at the start of the cross axis.

By default, this means it will be aligned vertically at the top.

align-self: flex-end;

If the container has align-items: center and the target has align-self: flex-end, only the target will be at the end of the cross axis.

By default, this means it will be aligned vertically at the bottom.

align-self: center;

If the container has align-items: flex-start and the target has align-self: center, only the target will be at the center of the cross axis.

By default, this means it will be vertically centered.

align-self: baseline;

If the container has align-items: center and the target has align-self: baseline, only the target will be at the baseline of the cross axis.

By default, this means it will be aligned along the basline of the text.

align-self: stretch;

If the container has align-items: center and the target has align-self: stretch, only the target will stretch along the whole cross axis.

#flex-basis

Defines the initial size of a flexbox item.

default flex-basis: auto;

The element will be automatically sized based on its content, or on any height or width value if they are defined.

flex-basis: 80px;

You can define pixel or (r)em values. The element will wrap its content to avoid any overflow.

#flex-direction

Defines how flexbox items are ordered within a flexbox container.

default flex-direction: row;

The flexbox items are ordered the same way as the text direction, along the main axis.

flex-direction: row-reverse;

The flexbox items are ordered the opposite way as the text direction, along the main axis.

flex-direction: column;

The flexbox items are ordered the same way as the text direction, along the cross axis.

flex-direction: column-reverse;

The flexbox items are ordered the opposite way as the text direction, along the cross axis.

#flex-flow

Shorthand property for flex-direction and flex-wrap.

#flex-grow

Defines how much a flexbox item should grow if there's space available.

default flex-grow: 0;

The element will not grow if there's space available. It will only use the space it needs.

flex-grow: 1;

The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value.

flex-grow: 2;

Because the flex-grow value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the remaining space is divided in 3:

  • 1 third goes to the green item
  • 2 thirds go to the pink item
  • Nothing goes to the yellow item, who retains its initial width

#flex-shrink

Defines how much a flexbox item should shrink if there's not enough space available.

default flex-shrink: 1;

If there's not enough space available in the container's main axis, the element will shrink by a factor of 1, and will wrap its content.

flex-shrink: 0;

The element will not shrink: it will retain the width it needs, and not wrap its content. Its siblings will shrink to give space to the target element.

Because the target element will not wrap its content, there is a chance for the flexbox container's content to overflow.

flex-shrink: 2;

Because the flex-shrink value is relative, its behaviour depends on the value of the flexbox item siblings.

In this example, the green item wants to fill 100% of the width. The space it needs is taken from its two siblings, and is divided in 4:

  • 3 quarters are taken from the red item
  • 1 quarter is taken from the yellow item

#flex-wrap

Defines if flexbox items appear on a single line or on multiple lines within a flexbox container.

default flex-wrap: nowrap;

The flexbox items will remain on a single line, no matter what, and will eventually overflow if needed.

flex-wrap: wrap;

The flexbox items will be distributed among multiple lines if needed.

flex-wrap: wrap-reverse;

The flexbox items will be distributed among multiple lines if needed. Any additional line will appear before the previous one.

#justify-content

Defines how flexbox/grid items are aligned according to the main axis, within a flexbox/grid container.

default justify-content: flex-start;

The flexbox/grid items are pushed towards the start of the container's main axis.

justify-content: flex-end;

The flexbox/grid items are pushed towards the end of the container's main axis.

justify-content: center;

The flexbox/grid items are centered along the container's main axis.

justify-content: space-between;

The remaining space is distributed between the flexbox/grid items.

justify-content: space-around;

The remaining space is distributed around the flexbox/grid items: this adds space before the first item and after the last one.

#order

Defines the order of a flexbox item.

default order: 0;

The order of the flexbox items is the one defined in the HTML code.

order: 1;

The order is relative to the flexbox item's siblings. The final order is defined when all individual flexbox item order values are taken into account.

order: -1;

You can use negative values.

order: 9;

You can set a different value for each flexbox item.