CSS Flexbox - align-items

Previous
Quiz
Next

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

  • normal − This keyword's effect is determined on the layout mode:

    In absolute positioning, the keyword acts as a 'start' for replaced boxes and a 'stretch' for other absolute-positioned boxes.

    This keyword behaves as a stretch in the static position of absolutely-positioned layouts.

    The keyword behaves as a stretch for flex elements.

    For grid items, this keyword behaves as a stretch, except for boxes with an aspect ratio or intrinsic sizes, where it functions like a start.

    The property does not affect block-level boxes or table cells.

  • start − Aligns the flex items at the start edge of the alignment container in the corresponding axis.

  • end − Aligns the flex items at the end edge of the alignment container in the corresponding axis.

  • center − The flex items margin boxes are aligned to the center of the cross-axis within the line. Items that are larger in cross-size than the flex container will overflow in both directions equally.

  • flex-start − Only used in flex layout to position flex items flush against the main-start or cross-start side of the flex container.

  • flex-end − Only used in flex layout to position flex items flush against the main-end or cross-end side of the flex container.

  • self-start − The items are aligned to the start edge of the alignment container in the appropriate axis.

  • self-end − The items are aligned to the end edge of the alignment container in the appropriate axis.

  • baseline − Aligns flex items along the flex container baselines. The item with the greatest distance between its cross-start margin edge and baseline aligns with the cross-start edge of the line.

  • stretch − When items are smaller than the alignment container, auto-sized items will be evenly enlarged to fill the container while respecting their width and height limits.

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

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

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

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

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

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

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

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

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

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

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>
Print Page
Previous
Next
Advertisements