YogeshChauhan.com

CSS align-items property examples

January 30, 2021

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.

dreamhost

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

Casting in PostgreSQLPostgresHow to find the HCF or GCD and LCM of two given numbers using Swift?SwiftHow services and dependency injection work in Angular?AngularLearn to Implement Estimated Reading Time using PHP Part 1: The BasicsPHPHow to swap images on hover using CSS?CSSSolution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software”MiscQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptKubernetes vs. Docker? It’s a misleading phraseMiscHow to Create a Backup From Any Database in SQL?SQL/MySQLWhat is the difference between float and double?MiscHow to add Laravel to WordPress using Sage theme (and install Tailwind CSS)?PHPLearn to create profile card using HTML and CSSCSS