CheatSheetsHero

Catalog / CSS Flexbox Cheatsheet

CSS Flexbox Cheatsheet

A comprehensive cheat sheet covering CSS Flexbox properties, values, and usage examples for creating flexible and responsive layouts.

Flexbox Fundamentals

Enabling Flexbox

To use flexbox, set the display property of a container to flex or inline-flex.

.container { display: flex; /* or inline-flex */ }

flex: Creates a block-level flex container.

inline-flex: Creates an inline-level flex container.

Flex Direction

flex-direction: row;

Items are placed side by side (horizontally) - Default value.

flex-direction: row-reverse;

Items are placed side by side in reverse order (right to left).

flex-direction: column;

Items are placed top to bottom (vertically).

flex-direction: column-reverse;

Items are placed bottom to top (vertically reversed).

Flex Wrap

flex-wrap: nowrap;

Items stay in a single line, even if they overflow the container - Default value.

flex-wrap: wrap;

Items wrap to the next line when they overflow the container.

flex-wrap: wrap-reverse;

Items wrap to the previous line when they overflow the container.

Justify Content & Align Items

Justify Content

justify-content: flex-start;

Items are aligned to the start of the container - Default value.

justify-content: flex-end;

Items are aligned to the end of the container.

justify-content: center;

Items are centered in the container.

justify-content: space-between;

Items are evenly distributed; first item is at the start, last item is at the end.

justify-content: space-around;

Items are evenly distributed with equal space around each item.

justify-content: space-evenly;

Items are distributed so that the spacing between any two items (neither the first nor the last) is the same.

Align Items

align-items: stretch;

Items are stretched to fit the container - Default value.

align-items: flex-start;

Items are aligned to the top of the container.

align-items: flex-end;

Items are aligned to the bottom of the container.

align-items: center;

Items are vertically centered in the container.

align-items: baseline;

Items are aligned based on their baselines.

Flex Item Properties

Flex Grow

flex-grow: 0;

Item does not grow to fill available space - Default value.

flex-grow: 1;

Item grows to fill available space.

flex-grow: n;

Item grows to fill n times the available space compared to other items with flex-grow.

Flex Shrink

flex-shrink: 1;

Item can shrink if necessary - Default value.

flex-shrink: 0;

Item does not shrink, even if it overflows.

flex-shrink: n;

Item shrinks n times more than other items with flex-shrink.

Flex Basis

flex-basis: auto;

Item size is based on its content - Default value.

flex-basis: 0;

Item size is based on flex-grow and flex-shrink.

flex-basis: length;

Item has a fixed size (e.g., flex-basis: 100px).

flex-basis: content;

Keyword specifying an automatic size based on the element’s content.

Flex Shorthand

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

flex: flex-grow flex-shrink flex-basis;

flex: 1; - Equivalent to flex: 1 1 0%; (item grows to fill space, can shrink, basis is 0).

flex: 2 1 200px; - Item grows twice as much as others, can shrink, and has a basis of 200px.

flex: initial; - Resets to default values: 0 1 auto

flex: auto; - Sets to 1 1 auto

flex: none; - Sets to 0 0 auto

Advanced Flexbox

Align Self

align-self: auto;

Item inherits the align-items value from the container - Default value.

align-self: flex-start;

Item is aligned to the top of the container, overriding the container’s align-items value.

align-self: flex-end;

Item is aligned to the bottom of the container, overriding the container’s align-items value.

align-self: center;

Item is vertically centered in the container, overriding the container’s align-items value.

align-self: baseline;

Item is aligned based on its baseline, overriding the container’s align-items value.

align-self: stretch;

Item is stretched to fit the container, overriding the container’s align-items value.

Order

order: 0;

Items are displayed in their source order - Default value.

order: n;

Items are reordered based on the numerical value of the order property. Lower values are displayed first.

Note

Items with the same order value will be displayed in their source order.

Align Content

align-content: stretch;

Lines stretch to take up the remaining space - Default value.

align-content: flex-start;

Lines are packed at the start of the container.

align-content: flex-end;

Lines are packed at the end of the container.

align-content: center;

Lines are packed in the center of the container.

align-content: space-between;

Lines are evenly distributed; the first line is at the start, the last is at the end.

align-content: space-around;

Lines are evenly distributed with equal space around each line.
Download PDF