What is align-items flex-start in CSS?

What is align-items flex-start in CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 2 mins read

Introduction

In this tutorial, we will be diving into the align-items: flex-start property in CSS flexbox. Flexbox is a layout mode that enables you to create flexible and responsive designs with ease. The align-items property is an important one in flexbox, as it allows you to align flex items along the cross-axis of the container. In this tutorial, we will be specifically looking at the flex-start value of the align-items property and how it can be used to align flex items to the top of a container. By the end of this tutorial, you will have a solid understanding of how to use this powerful property in your own projects.

What is the align-items property?

The align-items property is a shorthand property for aligning flex items along the cross-axis of a flex container. The default value is stretch, which means that flex items are stretched to fill the full height of the container.

What is the flex-start value?

The flex-start value aligns flex items to the start of the cross-axis of the container. This means that the top of the flex items will be aligned with the top of the container.

Here is an example of using align-items: flex-start to align flex items to the top of the container:

.container {
  display: flex;
  align-items: flex-start;
}

Example

Here is an example of how to use the align-items: flex-start property in a flex container with three flex items:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  display: flex;
  align-items: flex-start;
  height: 300px;
  background-color: #f1f1f1;
}
.item {
  width: 50px;
  height: 100px;
  background-color: #ddd;
  margin: 10px;
}

In this example, the align-items: flex-start property is used to align the three flex items to the top of the container.

Output

See the Pen Untitled by Vinish Kapoor (@foxinfotech) on CodePen.

Conclusion

In this tutorial, we have covered the align-items: flex-start property in CSS flexbox. The align-items property is used to align flex items along the cross-axis of a flex container and the flex-start value aligns the flex items to the start of the cross-axis, which means the top of the flex items will be aligned with the top of the container.

Related: