CSS align-items

The align-items property in CSS specifies the alignment of flex items inside a flex container on the cross-axis. It defines how the flex items are aligned relative to each other within the container.

Syntax of align-items

</>
Copy
align-items: normal|stretch|positional alignment|flex-start|flex-end|baseline|initial|inherit;

Values

ValueDescription
normalThe default alignment, behaves as stretch for flex containers.
stretchFlex items are stretched to fill the container on the cross-axis.
flex-startItems are aligned at the start of the container’s cross-axis.
flex-endItems are aligned at the end of the container’s cross-axis.
centerItems are centered along the cross-axis.
baselineItems are aligned such that their baselines align.
positional alignmentA more advanced form of alignment, using alignment keywords like start, end, or self-start.
initialResets the property to its default value (normal).
inheritInherits the value from the parent container.

Default Value

normal

Examples for align-items

Using the CSS align-items Property

This example demonstrates how to use the align-items property to control the alignment of flex items on the cross-axis.

</>
Copy
.container {
  display: flex;
  align-items: center;
}

Example 1. align-items: center;

The following example shows how the align-items property works with the value center.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    width: 400px;
    height: 200px;
    display: flex;
    align-items: center;
    border: 2px solid black;
    gap: 10px;
  }

  .box {
    width: 50px;
    background-color: red;
  }
</style>
</head>
<body>

<h1>CSS align-items: flex-start Property Example</h1>

<div class="container">
  <div class="box" style="height:50px">1</div>
  <div class="box" style="height:100px">2</div>
  <div class="box" style="height:70px">3</div>
</div>

</body>
</html>

Example 2. align-items: flex-start;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    width: 400px;
    height: 200px;
    display: flex;
    align-items: flex-start;
    border: 2px solid black;
    gap: 10px;
  }

  .box {
    width: 50px;
    background-color: red;
  }
</style>
</head>
<body>

<h1>CSS align-items: flex-start Property Example</h1>

<div class="container">
  <div class="box" style="height:50px">1</div>
  <div class="box" style="height:100px">2</div>
  <div class="box" style="height:70px">3</div>
</div>

</body>
</html>

Example 3. align-items: flex-end;

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    width: 400px;
    height: 200px;
    display: flex;
    align-items: flex-end;
    border: 2px solid black;
    gap: 10px;
  }

  .box {
    width: 50px;
    background-color: red;
  }
</style>
</head>
<body>

<h1>CSS align-items: flex-start Property Example</h1>

<div class="container">
  <div class="box" style="height:50px">1</div>
  <div class="box" style="height:100px">2</div>
  <div class="box" style="height:70px">3</div>
</div>

</body>
</html>

Using align-items in JavaScript

You can dynamically set the align-items property of a flex container using JavaScript’s style.alignItems.

</>
Copy
document.getElementById("flexContainer").style.alignItems = "flex-start";

JavaScript Example for align-items

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
<style>
  .container {
    display: flex;
    align-items: stretch;
    height: 200px;
    border: 2px solid black;
  }

  .box {
    flex: 0 0 30%;
    height: 50px;
    background-color: red;
    margin: 5px;
    text-align: center;
    line-height: 50px;
  }

  button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
  }
</style>
</head>
<body>

<h1>Dynamic align-items Example</h1>

<div class="container" id="flexContainer">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>
<button onclick="alignStart()">Align Start</button>
<button onclick="alignEnd()">Align End</button>

<script>
  function alignStart() {
    document.getElementById("flexContainer").style.alignItems = "flex-start";
  }

  function alignEnd() {
    document.getElementById("flexContainer").style.alignItems = "flex-end";
  }
</script>

</body>
</html>

Browser Support

The align-items property is supported in all modern browsers. Below is a compatibility table:

BrowserVersion
Chrome57.0
Firefox52.0
Safari10.1
Edge16.0
Opera44.0