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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Crypto.getRandomValues() method in JavaScriptJavaScriptHow to use images instead of HTML radio buttons using CSS?CSSHow to verify your domain in Google Console with a TXT record?MiscellaneousHow to merge arrays in JavaScript?JavaScriptHow to add Google Static Map using ACF map field?WordPressHow to show slider value in HTML5 range input using JavaScript?HTMLHow to add a select dropdown in React?ReactRendering Elements in ReactReactFor In Loop in Swift for BeginnersSwiftControl Scrolling with CSS Scroll SnapCSSHow to use GROUPING SETS to boost GROUP BY queries in Postgres?PostgresHow to create ‘share on LinkedIn’ link using just HTML?HTML