Yogesh Chauhan's Blog

CSS align-items property examples

in CSS on 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.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
The SELECT DISTINCT Statement in SQLSQL/MySQLThe SQL UNION OperatorSQL/MySQLHow to insert Bootstrap 4 in Angular 9 app?AngularJavaScript: Methods for HTML DOM classList PropertyJavaScriptList of WordPress directories functionsWordPressCheck if any column has NULL values in PostgresPostgresHow to disable scrolling on html body on menu click using JavaScript?JavaScriptHow to float an image around texts?CSSWhy do we need HAVING Clause in SQL?SQL/MySQLHow to use Context in React?ReactUnary Operators in JavaScriptJavaScriptUnderstand Inheritance in PHP in this Basic Example (For Beginners)PHP