YogeshChauhan . com

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 uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 5 Use inline if to make a shorter conditional syntax in React May 4 What is Conditional Rendering in React? May 3 How does @extend rule work in SCSS (Sass)? May 2 How different is Handling Events in React vs HTML DOM? May 2 How to create bouncing balls using HTML canvas and JavaScript? Apr 30 HTML canvas methods

You might also like these

List of all Pseudo Elements in CSSCSSHow to convert a function component into a class in React?ReactEssential SQL Commands We Need to KnowSQL/MySQLSteps to Secure a VPNMiscHow to change CSS with jQuery?CSSLearn how to use Self JOIN in SQL and MySQLSQL/MySQLHow to create a simple drop down menu using JavaScript and CSS?CSSWhat’s a repository on Github?MiscHow to create a Child Theme in WordPress?WordPressPostgreSQL BETWEENPostgresWhat’s a Web Storage API in JavaScript?JavaScriptHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQL