In CSS,justify-content and `align-items` are properties used in flexbox and grid layouts to control the alignment and distribution of items within their containers. They serve different purposes:

Flexbox

justify-content

Purpose: Aligns and distributes space between items along the main axis (the axis defined by `flex-direction`).

Main Axis: In a row-based layout (default), the main axis is horizontal. In a column-based layout (`flex-direction: column`), the main axis is vertical.

Values

flex-start: Aligns items at the start of the main axis.

flex-end: Aligns items at the end of the main axis.

center: Centers items along the main axis.

space-between: Distributes items evenly with the first item at the start and the last item at the end.

space-around: Distributes items evenly with equal space around each item.

space-evenly: Distributes items evenly with equal space between and around items.

Example

.container {

display: flex;

justify-content: space-between;

}

align-items

Purpose: Aligns items along the cross axis (perpendicular to the main axis).

Cross Axis: In a row-based layout, the cross axis is vertical. In a column-based layout, the cross axis is horizontal.

Values

flex-start: Aligns items at the start of the cross axis.

flex-end: Aligns items at the end of the cross axis.

center: Centers items along the cross axis.

baseline: Aligns items along their baseline.

stretch: Stretches items to fill the container along the cross axis (default).

Example

.container {

display: flex;

align-items: center;

}

Grid Layout

In a CSS Grid layout, justify-content and `align-items` have similar roles but for grid items.

justify-conten` aligns grid items along the inline (horizontal) axis of the grid container.

align-items aligns grid items along the block (vertical) axis of the grid container.

Example

.grid-container {

display: grid;

justify-content: space-between;

align-items: center; }

details

justify-content controls the alignment and spacing of items along the main axis (horizontal in a row layout or vertical in a column layout).

align-items controls the alignment of items along the cross axis (vertical in a row layout or horizontal in a column layout).