CSS Flexbox Layout- Learn to use align-items Property 15th Dec 2021

In this blog, we will learn about align-items property.The align-items property acts directly on the flex-items inside the container. We are going to take a look at all the possible values with an example.Point to note is that it is very much similar to justify-content property,except the fact that align-items means how flex-items are placed along the cross axis(and not main axis) of the flex-container. The cross-axis of flex-container in itself is determined by flex-direction property. I would recommend reading below blogs before starting on this one

1) Basics of flexbox
2) What Is flexbox-direction and flex-wrap
3) What Is Justify Content property in flex layout

I have summary everything we will learn in this image below.After reading this blog,come and have a look again at this pic and it will make even more sense

Possible Values of align-items

• stretch
• flex-start
• flex-end
• center
• baseline

You can go to my demo to download the code and try out on your own.Github repository link for css3flexboxdemo is Flexbox Layout Demo.In the github repo, look for file demo-of-align-item.html which is relevant to this blog.

All the properties were obvious to me and it will be for you too (if you have already gone through my What Is Justify Content property in flex layout blog.Having said that, I found the baseline value a bit tricky so I created a separate blog for the same.

So that you dont have to try out the code yourself, I have attached screenshots in order to let you know the impact of different values of align-items on the HTML.Like mentioned in my other blogs, I would strongly recommend you to try out parallely and use my demo project as a starting template.

1)align-items:flex-start

For this egample,am placing the html and style.For subsequent egamples, just replace the align-items property with the appropriate value.Also,point to note is that we have row as the value for flex direction property

                  <style>                  
                  .flex-container {
                    display: flex;
                    flex-wrap: wrap;
                    background-color: green;
                    align-items: flex-start;
                    flex-direction: row;
                    height: 200px;
                  }            
                  .flex-container > div {
                    font-size: 30px;
                    width: 70px;
                    background-color: rgb(243, 241, 241);
                  }
                  </style>
        
                !-- and html looks like -->
                <div class="flex-container">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
                <div>11</div>
                <div>12</div>
                <div>13</div>
              </div>
              

In the above eg, since the value is flex-start,flex items are displayed at top of cross axis

And that's it. Hope this article was helpful. .Email me at "techspacedeck@gmail.com" incase you have queries. Alternatively, you can fill the "CONTACT" form or drop a comment below