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 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #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
A few HTML coding standards from WordPressHTMLRevisiting variable scope in JavaScriptJavaScriptWordPress: How to create a folder if it doesn’t already exist?WordPressSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPress3 JavaScript methods to use when you want to go back and forth in historyJavaScriptWordPress get_posts ExamplesWordPressfirst-of-type and last-of-type selectors in CSSCSSPostgreSQL BETWEENPostgresSlider animation using CSS transform propertyCSSWhat does it mean by Continuous Integration, Continuous Delivery and Continuous Deployment?MiscellaneousSELF JOIN in PostgresPostgresPostgreSQL transactions using the BEGIN, COMMIT, and ROLLBACK statements.Postgres