CSS - align-items Property

CSS align-items property collectively sets the align-self value for all immediate children. In Flexbox, it aligns items on the Cross Axis, while in Grid Layout, it aligns items on the Block Axis within their grid area.

Possible Values

The align-items property can have following values:

  • normal: Based on the layout mode, the effect of normal keyword changes:

    • Behaves like start on replaced absolutely-positioned boxes, and as stretch in all other absolutely-positioned boxes, when the layout is absolutely-positioned.

    • Behaves like stretch in static position of absolutely-positioned layouts.

    • Behaves like stretch for flex items.

    • Behaves similar to stretch for grid items, except for the boxes which have an aspect ratio or an intrinsic size where it behaves like start.

    • Does not apply to block-level boxes , and to the table cells.

  • flex-start: Aligns the cross-start margin edges of the flex items with the cross-start edge of the line.

  • flex-end: Aligns the cross-end margin edges of the flex items with the cross-end edge of the line.

  • center: Margins of flex-items' boxes are centered within the line on the cross-axis. when the cross-size of an element is larger than the container, the content overflows equally in both directions.

  • start: Items are aligned to each other against the start edge of the container, in the appropriate axis.

  • end: Items are aligned to each other against the end edge of the container, in the appropriate axis.

  • self-start: Items are aligned to the edge of the alignment container's start side of the item, in the appropriate axis.

  • self-end: Items are aligned to the edge of the alignment container's end side of the item, in the appropriate axis.

  • baseline, first baseline, last baseline: Aligns the items such that their baseline is aligned.

  • stretch: Stretches the flex items such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.

  • safe: Used with an alignment keyword and when the item overflows the container, causing any loss of data, the alignment is set as per the start value.

  • unsafe: Used with an alignment keyword and even if the item overflows the container, causing any loss of data, the alignment value passed is honored.

Applies to

All the HTML elements.

Syntax

Basic Keyword

align-items: normal;
align-items: stretch;

Positional Alignment

align-items: center;
align-items: start;
align-items: end;
align-items: flex-start;
align-items: flex-end;
align-items: self-start;
align-items: self-end;

Baseline Alignment

align-items: baseline;
align-items: first baseline;
align-items: last baseline; 
align-items: safe center;
align-items: unsafe center;

CSS align-items - normal Value

The following example demonstrates that align-items: normal property aligning flex items to stretch vertically to fill the container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: normal;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - start Value

The following example demonstrates that align-items: start property aligns the flex items at the start of the cross axis of a container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: start;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - end Value

The following example demonstrates that align-items: end property aligns the flex items at the end of the cross axis of a container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: end;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - center Value

The following example demonstrates that align-items: center property aligns the flex items at the center of the cross axis of a container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: center;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - flex-start Value

The following example demonstrates that align-items: flex-start property aligns the flex items at the start of the cross axis of a container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: flex-start;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - flex-end Value

The following example demonstrates that align-items: flex-end property aligns the flex items at the end of the cross axis of a container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: flex-end;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - self-start Value

The following example demonstrates that align-items: self-start property aligns the flex items to the top of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: self-start;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-Items - self-end Value

The following example demonstrates that align-items: self-end property aligns the flex items to the bottom of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: self-end;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - baseline Value

The following example demonstrates that align-items: baseline property aligns flex items along their baselines −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: baseline;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      display: flex;
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      align-items: center;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>

CSS align-items - stretch Value

The following example demonstrates that align-items: stretch property stretch the flex items vertically to fill the entire space of the flex container −

<html>
<head>
<style>
   .flex-container {
      display: flex;
      align-items: stretch;
      background-color: green;
      height: 300px;
      width: 100%;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
   }
   .flex-item1 {
      min-height: 40px;
   }
   .flex-item2 {
      min-height: 70px;
   }
   .flex-item3 {
      min-height: 50px;
   }
   .flex-item4 {
      min-height: 90px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div class="flex-item1">Flex item 1</div>
      <div class="flex-item2">Flex item 2</div>
      <div class="flex-item3">Flex item 3</div>
      <div class="flex-item4">Flex item 4</div>
   </div>
</body>
</html>
Advertisements