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.
align-items: stretch;
This is a default value. Flex items are stretched to fix the flexbox container.
align-items: center;
As per the value, the flex items are centered vertically in the container.
align-items: flex-start;
Flex items are positioned at the top vertically (at the start of the flex container).
align-items: flex-end;
Flex items are positioned at the bottom vertically (at the end of the flex container).
align-items: baseline;
Flex items are positioned at the top vertically (at the baseline of the flex container).
align-items: initial;
initial value sets flex items to their default value.
align-items: inherit;
This value inherits the property value from its parent element’s property value.
align align-items bottom center flex flexbox stretch top
