CSS Flexbox Guide

1. Flexbox Container Properties

These properties belong strictly to the flex container (the parent element).

display

Defines a flex container.

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

flex-direction

Establishes the main-axis, defining the direction flex items are placed in the flex container.

• row (default): left to right
• row-reverse: right to left
• column: top to bottom
• column-reverse: bottom to top

justify-content

Defines the alignment along the main axis. It helps distribute extra free space.

• flex-start (default): items are packed toward the start line
• flex-end: items are packed toward to end line
• center: items are centered along the line
• space-between: items are evenly distributed (first item is on the start line, the last on the end)
• space-around: items are evenly distributed with equal space around them

align-items

Defines the default behavior for how flex items are laid out along the cross axis.

• stretch (default): stretch to fill the container
• flex-start: items are placed at the start of the cross axis
• flex-end: items are placed at the end of the cross axis
• center: items are centered in the cross-axis

2. Flex Item Properties

These properties apply only to the children within the flex container.

flex-grow

Defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. For instance, if all items have flex-grow: 1, they will share the remaining space equally.

flex-basis

Defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.

align-self

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