CSS Alignment

Alignment is a core concept in CSS layout. With the advent of Flexbox and Grid, CSS provides a powerful and consistent set of properties to control the alignment of elements within a container. This chapter summarizes these key alignment properties.

Alignment can be divided into two dimensions:

1. Content Distribution: Controls the overall alignment and spacing of a group of items within their container.
2. Self Alignment: Controls the alignment of a single item within its layout container (or cell).

Content Distribution (Along the Main Axis)

The justify-content property is used to control the alignment and distribution of items along the main axis (usually horizontal).

• flex-start: (Default) Aligns to the start of the main axis.
• flex-end: Aligns to the end of the main axis.
• center: Aligns to the center.
• space-between: Distributes items evenly; the first item is at the start, the last item is at the end.
• space-around: Distributes items evenly with equal space around each item.
• space-evenly: Distributes items so that the spacing between any two items (and the space to the edges) is equal.

.container {
  display: flex;
  justify-content: space-between;
}

Content Distribution (Along the Cross Axis)

The align-content property is used to control the alignment and distribution of items along the cross axis (usually vertical). This property only takes effect when there are multiple lines/columns of items (i.e., flex-wrap: wrap).

• flex-start: Aligns to the start of the cross axis.
• flex-end: Aligns to the end of the cross axis.
• center: Aligns to the center.
• space-between: Distributes lines evenly.
• space-around: Distributes lines with equal space around each line.
• space-evenly: Distributes lines so that the spacing between any two lines (and the space to the edges) is equal.
• stretch: (Default) Stretches lines to fill the container.

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: center;
}

Self Alignment (Along the Cross Axis)

The align-items property is used to control the alignment of items along the cross axis. This is one of the most commonly used alignment properties.

• stretch: (Default) If items do not have a set height/width, they will stretch to fill the container's height/width.
• flex-start: Aligns to the start of the cross axis.
• flex-end: Aligns to the end of the cross axis.
• center: Aligns to the center.
• baseline: Aligns along the baseline of the first line of text in the item.

.container {
  display: flex;
  height: 200px;
  align-items: center; /* Vertically centers all items */
}

Single Item Alignment

The align-self property is used on individual flex items and can override the align-items set on the container.

.container {
  display: flex;
  align-items: flex-start;
}

.special-item {
  align-self: center; /* Only this item is centered */
}

Alignment in Grid Layout

Grid layout uses the same alignment properties, but the names are slightly different to reflect its two-dimensional nature:

• justify-content: Horizontal alignment of the grid within the container.
• align-content: Vertical alignment of the grid within the container.
• justify-items: Horizontal alignment of items within their cells.
• align-items: Vertical alignment of items within their cells.
• justify-self and align-self: Used for individual grid items.

place- Shorthand Properties:

• place-content: Shorthand for align-content and justify-content.
• place-items: Shorthand for align-items and justify-items.

.grid-container {
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
}

Mastering these alignment properties is key to becoming proficient in modern CSS layout.