CSS align-items Property - Naukri Code 360

Introduction

The CSS align-items property is used to control how items are positioned along the cross axis in a flex container. It helps in aligning items vertically within their container, making it a powerful tool for creating well-structured layouts. Commonly used in web design, this property ensures that elements are arranged in a visually appealing manner without much effort.

This article will cover everything about the align-items property, including its syntax, default value, property values, and supported browsers.

Definition and Usage

The `align-items` property is used in CSS to control how items are aligned vertically inside a container. It works specifically with Flexbox, which is a layout model designed to create flexible & responsive layouts. When you use `align-items`, you’re telling the browser how to position items along the cross axis (the axis perpendicular to the main axis).

For example, if your Flexbox container has a horizontal main axis (default), the cross axis will be vertical. In this case, `align-items` will align items vertically. If the main axis is vertical, the cross axis will be horizontal, & `align-items` will align items horizontally.

The `align-items` property accepts several values:

1. `stretch` (default): Items stretch to fill the container along the cross axis.

2. `flex-start`: Items align at the start of the cross axis.

3. `flex-end`: Items align at the end of the cross axis.

4. `center`: Items are centered along the cross axis.

5. `baseline`: Items align based on their text baselines.

Syntax

The align-items property is simple to use. It defines how the flex or grid items are aligned along the cross-axis (the axis perpendicular to the main axis). Here is the syntax:

align-items: value;

Parameters

value: This specifies the alignment behavior. We will discuss the possible values in the "Property Values" section.

Code Example

Let’s take a simple HTML & CSS example to demonstrate the `align-items` property:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items Example</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f4f4f4;
      border: 2px solid #333;
      align-items: center; /* Change this value to see different alignments */
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: #007bff;
      color: white;
      text-align: center;
      line-height: 50px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>


</html>

Output

In this Code:

1. HTML Structure:

- We have a `div` with the class `container` that acts as the Flexbox container.

- Inside it, there are three `div` elements with the class `item`. These are the Flexbox items.

2. CSS Styling:

- The `.container` class uses `display: flex` to create a Flexbox layout.

- The `align-items: center` property centers the items vertically (since the default main axis is horizontal).

- Each `.item` has a fixed width & height, a background color, & some text for visibility.

3. Experiment with Values:

- Try changing the `align-items` value to `flex-start`, `flex-end`, `stretch`, or `baseline` to see how the alignment changes.

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Align Items Example</title>
    <style>
        .container {
            display: flex;
            height: 200px;
            border: 2px solid black;
        }
        .item {
            width: 50px;
            height: 50px;
            background-color: lightblue;
            border: 1px solid darkblue;
        }
    </style>
</head>
<body>
    <div class="container" style="align-items: center;">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Output

In this example, the items will be vertically aligned at the center of the container.

Default Value

The default value of the align-items property is stretch. When set to stretch, flex or grid items stretch to fill the container along the cross-axis, maintaining their minimum and maximum constraints.

Example:

<div class="container" style="align-items: stretch;">
    <!-- Items will stretch to fill the container height -->
</div>

If no align-items value is specified, the items stretch by default, adjusting their height to match the container's height.

Property Values

The align-items property supports several values, each providing different alignment options. Let’s discuss each value in detail with examples:

1. flex-start

Aligns items to the start of the cross-axis.

<div class="container" style="align-items: flex-start;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Output:

Items are positioned at the top of the container.

2. flex-end

Aligns items to the end of the cross-axis.

<div class="container" style="align-items: flex-end;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Output:

Items are positioned at the bottom of the container.

3. center

Aligns items to the center of the cross-axis.

<div class="container" style="align-items: center;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Output:

Items are centered vertically in the container.

4. baseline

Aligns items so that their baselines align.

<div class="container" style="align-items: baseline;">
    <div class="item" style="font-size: 12px;">Small</div>
    <div class="item" style="font-size: 24px;">Large</div>
    <div class="item" style="font-size: 16px;">Medium</div>
</div>

Output:

Items align based on their text baselines.

5. stretch

Stretches items to fill the container along the cross-axis.

<div class="container" style="align-items: stretch;">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

Output:

Items stretch to fill the height of the container.

More Examples

Now, let’s discuss a few more examples with different values & layouts. These examples will help you see how `align-items` works in various situations.

Example 1: `align-items: flex-start`

This value aligns items at the start of the cross-axis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items: Flex Start</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f4f4f4;
      border: 2px solid #333;
      align-items: flex-start; /* Aligns items at the start */
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: #007bff;
      color: white;
      text-align: center;
      line-height: 50px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output

Explanation:

- The `align-items: flex-start` property aligns all items at the top of the container (start of the cross axis).

- This is useful when you want items to stick to the top of the container.

Example 2: `align-items: flex-end`

This value aligns items at the end of the cross axis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items: Flex End</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f4f4f4;
      border: 2px solid #333;
      align-items: flex-end; /* Aligns items at the end */
    }
    .item {
      width: 100px;
      height: 50px;
      background-color: #007bff;
      color: white;
      text-align: center;
      line-height: 50px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output

Explanation:

- The `align-items: flex-end` property aligns all items at the bottom of the container (end of the cross axis).

- This is useful when you want items to stick to the bottom of the container.

Example 3: `align-items: stretch`

This value stretches items to fill the container along the cross axis.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items: Stretch</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f4f4f4;
      border: 2px solid #333;
      align-items: stretch; /* Stretches items to fill the container */
    }
    .item {
      width: 100px;
      background-color: #007bff;
      color: white;
      text-align: center;
      line-height: 50px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output

Explanation:

- The `align-items: stretch` property stretches all items to fill the height of the container.

- Notice that the `height` property is removed from the `.item` class to allow stretching.

Example 4: `align-items: baseline`

This value aligns items based on their text baselines.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Align Items: Baseline</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      background-color: #f4f4f4;
      border: 2px solid #333;
      align-items: baseline; /* Aligns items based on their baselines */
    }
    .item {
      width: 100px;
      background-color: #007bff;
      color: white;
      text-align: center;
      margin: 5px;
    }
    .item:nth-child(1) {
      font-size: 20px;
      padding-top: 30px;
    }
    .item:nth-child(2) {
      font-size: 30px;
    }
    .item:nth-child(3) {
      font-size: 15px;
      padding-top: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

Output

Explanation:

- The `align-items: baseline` property aligns items based on the baseline of their text content.

- Even if items have different font sizes or padding, their baselines will align.

Supported Browsers

The align-items property is widely supported across modern browsers. Here’s a quick summary:

Browser	Version Supported
Google Chrome	29+
Firefox	28+
Safari	9+
Microsoft Edge	12+
Opera	17+

Ensure your users are using updated browsers for the best experience.

Frequently Asked Questions

1. What is the default value of the align-items property?

The default value of align-items is stretch, which stretches items to fill the container along the cross-axis.

2. Can I use align-items with Grid layouts?

Yes, the align-items property works with both Flexbox and Grid layouts.

3. What is the difference between align-items and justify-content?

align-items aligns items along the cross-axis, while justify-content aligns items along the main axis.

Conclusion

In this article, we discussed the align-items CSS property, its syntax, default value, various property values, and browser support. By understanding and using align-items, you can align elements efficiently in Flexbox and Grid layouts to create visually appealing and well-structured web designs.