CSS3 align-items Property
To align items perpendicular to thes cross axis of the flex-box container
Definition and Notes.
1. The CSS3 align-items property is used align contents perpendicular to the cross axis of the flex container, if space is available.
2. No effect will be created if there is only a single row or column.This property is similar to the justify-content
CSS align-items property.
View in Splitscreen»
Code-Editor:Note-Even if there is one item with flex-grow value other than 0, no properties will be applied, as no empty space would be available
|flex-start||Flex Items are laid towards the start of the main axis.Its the default|
|flex-end||Flex Items are laid towards the end of the main axis|
|center||Flex items are laid in the center of the container|
|baseline||Flex items are evenly laid out on the Main axis, with first and last item against the edge|
|stretch||Flex items are evenly laid out on the main axis, with half-size spaces at each end of the axis|
|Value||flex-start | flex-end | center | baseline | stretch|
|Computed Value||Same as declared value.|