Tutorials


CSS align-items property


The align-items property in CSS is used within a flex container to align flex items along the cross axis (perpendicular to the main axis). It controls how flex items are aligned within each flex line of the container. This property is crucial for managing vertical alignment in a flex container.

Basic Syntax

selector {
  align-items: value;
}

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center; /* Change this value to see different alignment options */
      height: 300px; /* To see vertical alignment, set a height for the container */
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
  </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>

In this example, align-items: center; vertically centers the flex items within the container.

Values for align-items

1. stretch (default)

  • Description: Flex items are stretched to fill the container along the cross axis. This is the default value.
  • Use Case: Use this value when you want items to occupy the full height (or width, if the main axis is vertical) of the container.
.container {
  align-items: stretch; /* Stretch items to fill the container's cross axis */
}

2. flex-start

  • Description: Aligns flex items to the start of the container along the cross axis. For a horizontal flex direction, this aligns items to the top of the container.
  • Use Case: Use this value when you want items to align at the top of the container.
.container {
  align-items: flex-start; /* Align items to the start of the container's cross axis */
}

3. flex-end

  • Description: Aligns flex items to the end of the container along the cross axis. For a horizontal flex direction, this aligns items to the bottom of the container.
  • Use Case: Use this value when you want items to align at the bottom of the container.
.container {
  align-items: flex-end; /* Align items to the end of the container's cross axis */
}

4. center

  • Description: Centers flex items along the cross axis. For a horizontal flex direction, this centers items vertically within the container.
  • Use Case: Use this value to center items vertically or horizontally within the container.
.container {
  align-items: center; /* Center items along the cross axis of the container */
}

5. baseline

  • Description: Aligns flex items such that their baselines align. This value is useful for aligning text or items with varying heights.
  • Use Case: Use this value to align items based on their text baselines, useful for typographic alignment.
.container {
  align-items: baseline; /* Align items based on their text baselines */
}

6. auto

  • Description: Allows the item to use its default alignment behavior. This value is rarely used explicitly as it's the default behavior for align-items.
  • Use Case: Generally, you do not need to use auto explicitly because stretch is the default.
.container {
  align-items: auto; /* Default behavior, same as stretch */
}

Practical Examples

Example 1: Stretch Items

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: stretch; /* Items will stretch to fill the container's cross axis */
      height: 300px;
    }
    .item {
      width: 100px;
      margin: 10px;
      background-color: lightblue;
      border: 1px solid blue;
    }
  </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>

In this example, the items stretch to fill the height of the container.

Example 2: Center Items

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: center; /* Center items vertically */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightgreen;
      border: 1px solid green;
    }
  </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>

Here, items are centered vertically within the container.

Example 3: Align Items to the End

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      align-items: flex-end; /* Align items to the bottom of the container */
      height: 300px;
    }
    .item {
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: lightcoral;
      border: 1px solid red;
    }
  </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>

In this example, items are aligned to the bottom of the container.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about