Tag: align-items

This is the continuation of the post – css intro to flexbox part 1. Part 1 mostly focused on explaining conceptual things. In this post, I am going to focus on showing examples for each flexbox property. Note that all the other common css code is in part 1. I wrote necessary code only for each property.

justify-content

As explained in part 1 post, justify-content tells you how the flex items should be aligned along the main axis.

justify-content: center

justify-content:center aligns the flex items in the middle of the container but doesn’t do anything for the space between the items because space is defined by the margin.

.container {
    justify-content: center;
}

justify-content: space-between

Space is evenly distributed between flex items. Flexbox automatically calculates all the spaces and positions for each item. Space between the items will be automatically adjusted if the width of the container changes.

.container {
    justify-content: space-between;
}

justify-content: space-around

space around puts the same amount of space for both left and right side of each item. You will see that the space between item 1 and 2 are double of the left space of item 1. The difference between space-between and space-around is that space-between only evenly distributes the space between the items but space-around puts all the space equally for both left/right side.

.container {
    justify-content: space-around;
}

justify-content: space-evenly

space-evenly puts equal space to all sides. As you can see all the spaces are same here. It ensures all the spaces between the elements and side of the elements are same.

.container {
    justify-content: space-evenly;
}

justify-content: flex-end

flex-end puts all the elements to the end. Note that main-axis here is horizontal from left to right that all the elements are placed on the right side.

.container {
    justify-content: flex-end;
}

justify-content: flex-start

This is the default option which places all the items to the start (main axis from left to right) which is left side.

.container {
    justify-content: flex-start;
}

align-items

align-items tells how the flex items should be aligned along the cross axis which is perpendicular to main axis. To show the example, I need to have different height for one of the item.

New HTML Code for align-items example

<div class="container">
  <div class="item">1</div>
  <div class="item i2">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

New CSS Code for align-items example

.i2 {
  height: 200px;
}

align-items: flex-start

Note again align-items will align the items along cross axis. flex-start will align all the items to the start of the axis which is top in this case. It might be little hard to see at first time. But take a closer look and you will see all the items are aligned at the top which is the start of the cross axis

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

align-items: flex-end

flex-end now will place all the items at the end of the cross axis which is the bottom.

.container {
    align-items: flex-end;
}

align-items: center

As you can already guess, center will place all the items on the center of the cross axis.

.container {
    align-items: center;
}

align-items: stretch

This is the default mode which stretches all the items to the max of flex items. Since it’s default, you don’t need to specify at all.

.container {
    align-items: stretch;
}

align-items: baseline

baseline will align the items based on the text in the flex item. For the example, let me add another class – increasing the font size.

New HTML Code

note that i4 class is added to 4.

<div class="container">
  <div class="item">1</div>
  <div class="item i2">2</div>
  <div class="item">3</div>
  <div class="item i4">4</div>
  <div class="item">5</div>
</div>

New CSS Class

.i4 {
  font-size: 70px;
}

.container {
  align-items: baseline;
}

What happens if flex-direction: column?

It changes the main axis from top to bottom and cross axis from left to right. In this case, you will see all the items are in the center of horizontal line due to align-items: center (see the code below). justify-content: center makes sure all the items are centered vertically here.

.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Conclusion

We have taken a look at how flex container properties work. I will continue to explain flex item properties in different post. For conceptual explanation, please take a look at part 1. And for more examples of flex items please take a look at part 3