Search within TutorialsPark

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


Syntax:

CSS align-items property. internetexplorer safari firefox opera chrome

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

Property Values

Value Description
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

Specifications

Specs Value
Name align-items
Value flex-start | flex-end | center | baseline | stretch
Initial Value stretch
Applies to flex-containers
Javascript syntax object.style.alignItems="center"
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome


Related Examples.