ADVERTISEMENT
ADVERTISEMENT

CSS align-items Property

Learn about the CSS align-items property, its usages, syntax and examples.
Submitted by Shahnail Khan, on April 02, 2022

The introduction of CSS Flexbox proved to be efficient for web developers in making responsive layout structures without using float. There are 6 different flex container properties, namely, flex-direction, flex-wrap, flex-flow, justify-content, align-items, and align-content, which serve different purposes. In this tutorial, we'll specifically deal with the align-items property.

What is CSS align-items Property?

The align-items property is one of the CSS flex container properties which specifies the proper arrangement of items inside the flex container on the Cross Axis. Its default value is stretch. This property accepts only pre-defined keyword values.

Syntax:

align-items: stretch| flex-start| flex-end| center| baseline| initial| inherit

Quick overview of the syntax used,

Value Explanation
baseline Alignment of items at the baseline of container.
center Alignment of items at the center of the container.
flex-end Alignments of items at the bottom of the container.
flex-start Alignment of items at the top of the container.
stretch Default value. Flex items fit in the container.

The example given below illustrates CSS align-items Property

Example 1:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>align-items</title>
   </head>
   
   <style>
      .container{
      background-color: teal;
      font-size: x-large;
      height: 50px;
      display: flex;
      align-items: flex-start;
      width: 30em;
      }
      a{
      color: black;
      margin-right: 20px;
      }
   </style>
   
   <body>
      <nav class="container">
         <a href="#">Home</a>
         <a href="#">About</a>
         <a href="#"> Contact</a>
      </nav>
   </body>
</html>

Output:

CSS align-items Property | Example 1

We have created a navbar. The CSS align-items property is applied to all the navbar elements. Since the property value is set to "flex-start", all the items in the container class are positioned at the beginning of the container.

Example 2:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>align-items</title>
   </head>
   
   <style>
      .Image{
      background-color: teal;
      height: 250px;
      display: flex;
      align-items: center;
      }
   </style>
   
   <body>
      <div class="Image">
         <img src="https://static.vecteezy.com/system/resources/thumbnails/000/180/409/small/software_enginner_1-01.png" >
      </div>
   </body>
</html>

Output:

CSS align-items Property | Example 2

We have inserted an image. The align-items property is applied to the Image class. Since the property value is set to "center", the image is positioned at the center of the container.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.