Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Basic

CSS align-items Property

Posted in CSS Tutorial
Updated on Sep 04, 2024
By Mari Selvan
👁️ 17 - Views
⏳ 4 mins
💬 1 Comment
CSS align-items Property

Photo Credit to CodeToFun

🙋 Introduction

The align-items property in CSS is a powerful tool used to control the alignment of items along the cross axis in a flex container.

It is part of the Flexbox layout model and determines how flex items are aligned within the container, relative to each other.

This property is especially useful when creating responsive and flexible layouts that adapt to different screen sizes and content variations.

💡 Syntax

The syntax for the align-items property is straightforward and is applied to the flex container.

Syntax
Copied
Copy To Clipboard
.container {
  align-items: value;
}

🔢 Default Value

The default value of the align-items property is stretch, which means that flex items will stretch to fill the flex container along the cross axis.

🏠 Property Value

  • stretch: Flex items are stretched to fill the container.
  • flex-start: Flex items are aligned at the start of the cross axis.
  • flex-end: Flex items are aligned at the end of the cross axis.
  • center: Flex items are centered along the cross axis.
  • baseline: Flex items are aligned based on their baselines.

📝 Example Usage

In this example, we’ll align flex items to the center of the cross axis within a flex container.

example.scss
Copied
Copy To Clipboard
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS align-items Example</title>
  <style>
    .container {
      display: flex;
      height: 200px;
      border: 2px solid #ccc;
      align-items: center;
    }

    .item {
      width: 100px;
      height: 50px;
      background-color: lightblue;
      margin: 10px;
      text-align: center;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <h1>Flex Container with Centered Items</h1>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The align-items property is widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This ensures that your layouts will behave consistently across different platforms.

🎉 Conclusion

The align-items property is an essential part of the Flexbox layout model, providing a simple way to control the vertical alignment of items within a flex container.

By mastering this property, you can create flexible and responsive designs that look great on any device. Experiment with different values to see how they affect your layout and enhance your web designs.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy