Align Items and Align Content are important properties used in Flexbox and Grid layouts to control alignment and spacing of elements.
Align Items is used to align items along the cross axis inside a container. In Flexbox, the cross axis is vertical when the flex direction is row. This property affects how individual items are positioned within the container.
Common values of Align Items include stretch which is the default and makes items stretch to fill the container height. Center aligns items in the middle. Flex start aligns items at the top. Flex end aligns items at the bottom. Baseline aligns items based on their text baseline.
Example of Align Items in Flexbox
.container {
display: flex;
align-items: center;
height: 200px;
border: 1px solid black;
}
This will center all items vertically inside the container.
Align Content is used to control the spacing between rows when there are multiple lines of items. It only works when flex wrap is enabled and there is extra space in the container.
Common values of Align Content include stretch which spreads rows to fill space. Center places rows in the middle. Flex start aligns rows at the top. Flex end aligns rows at the bottom. Space between adds equal space between rows. Space around adds space around rows. Space evenly distributes equal space everywhere.
Example of Align Content in Flexbox
.container {
display: flex;
flex-wrap: wrap;
align-content: space-between;
height: 300px;
border: 1px solid black;
}
This will distribute multiple rows with space between them.
Key Difference between Align Items and Align Content
Align Items controls alignment of individual items inside a single row or column. Align Content controls spacing between multiple rows or lines.
When to use Align Items
Use it when you want to control vertical alignment of items in a single row.
When to use Align Content
Use it when you have multiple rows and want to control spacing between those rows.
Practice Tip
Create a container with multiple items and try different values of align items and align content to clearly understand how they behave.