align-content#

#Introduction

In flexible box layout, the align-content property defines how flex lines are aligned along the cross-axis.

In grid layout, the align-content property defines how to align grid tracks along the block axis.

#Examples

css-apisrc/align-content/App.tsx

Preview

#Syntax

#Values

#stretch

Default value. If the combined size of the items along the cross axis (block axis in grid layout) is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container along the cross axis (block axis in grid layout).

#start

All lines are packed starting from the start edge of the container.

#end

All lines are packed starting from the end edge of the container.

#flex-start

Behaves the same as start. Recommended to use only in flexible box layout.

#flex-end

Behaves the same as end. Recommended to use only in flexible box layout.

#center

All lines are packed toward the center of the container. Lines are tightly packed against each other and aligned centrally within the container. The distance between the cross-axis (block axis in grid layout) start edge and the first line equals the distance between the cross-axis (block axis in grid layout) end edge and the last line.

#space-between

Lines are evenly distributed in the container. The spacing between each pair of adjacent lines is equal. The cross-axis (block axis in grid layout) start edge and end edge of the container are flush with the first and last lines respectively.

#space-around

Lines are evenly distributed in the container, with equal space between lines. The space between the cross-axis (block axis in grid layout) start edge and the first line, and between the cross-axis (block axis in grid layout) end edge and the last line, is half the size of the space between adjacent lines.

#Formal definition

#Formal syntax

align-content = stretch | start | end | flex-start | flex-end | center | space-between | space-around

#Differences from web

mdn: align-content

1. normal, baseline, first baseline, and last baseline are not supported. Initial value is stretch.
2. space-evenly is not supported, will be supported in the future.

#Compatibility