Internet Explorer version 10 and earlier versions do not support the align-items property.
Checkout the full support chart on MDN
We use CSS align-items property to specify the alignment of flex items.
align-items property applied to all elements as a group but if you want to set a position of specific elements we can use align-self property.
Let’s take a look at different values and examples.
This is a default value. Flex items are stretched to fix the flexbox container.
As per the value, the flex items are centered vertically in the container.
Flex items are positioned at the top vertically (at the start of the flex container).
Flex items are positioned at the bottom vertically (at the end of the flex container).
Flex items are positioned at the top vertically (at the baseline of the flex container).
initial value sets flex items to their default value.
This value inherits the property value from its parent element’s property value.
align align-items bottom center flex flexbox stretch top