Category: CSS

This is the continuation of CSS – intro to flexbox part 3. Previous posts explained what flexbox is and conceptual things (part 1) and flexbox container properties and examples (part 2). This post will focus on explaining the properties of flex items and examples for them. Since flex items properties are only applicable to the specified item, I posted the HTML, CSS code again for easier understanding. Please pay special attention to the classes such as i2, i4 that are specific to the item.

HMTL Code

<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>

CSS Code

.container {
  background-color: #ccc;
  display: flex;;
  justify-content: space-between;
  align-items: center;
}

.item {
  background-color: orangered;
  padding: 30px;
  margin: 20px;
  color: #fff;
  font-size: 40px;
}

.i2 {
  height: 200px;
}

align-self: flex-end

This property aligns the item along the cross axis and at the end of the cross axis. As you see in the example, all the items are located at the center due to align-items: center but only item 4 is located at the end of the cross axis. Note that it might look weird since item 2 has a different height. But the item 2 is still aligned in the center of the cross axis.

.i4 {
    align-self: flex-end;
}

align-self: flex-start

This one is the opposite of the flex-end. You will see the item 4 is now aligned at the start of the cross axis.

.i4 {
    align-self: flex-start;
}

align-self: stretch

This property stretches the flex item to fill the entire container. You will see the height of item 4 is now the same as item 2 since it is the max height item – 200px.

.i4 {
    align-self: stretch;
}

order: <integer>

The order property decides the order of the flex items in the container. By default, all the items have 0 for the order value. In this example, I put -1 to item 4, and now it is the first one to be placed among all the items because -1 < 0 and flexbox always display the item based on the order (lowest order first).

.i4 {
    align-self: flex-end;
    order: -1;
}

What if you put -2 order value to item 3? Since -2 < -1, the item 3 will be placed before the item 4.

flex-grow: <integer>

The flex-grow property indicates the growth of each item. As you can see in the example below, setting flex-grow: 1 made all the items grow as much as possible. The space between the items is because of the margin property.

.item {
  /* skipped all the common properties since they are defined above */
  flex-grow: 1;
}

Note that the number is to indicate the relation compared to others. Just for the above example, it doesn’t matter which number you put because there is only one flex-grow in the item class. Then, what happens if we put flex-grow: 2 to item class such as i2?

.i2 {
  height: 200px;
  flex-grow: 2;
}

Do you see that the item 2 has double width of other items? it’s because the item2 has flex-grow: 2 which is twice of the other items – flex-grow: 1.

flex-basis: <% or px>

You can set a width of a flex item by using flex-basis property. When you deal with flex items, you usually use flex-basis instead of width property. In the example below, the item 2 now occupies 40% of the container.

.i2 {
  height: 200px;
  flex-basis: 40%;
}

flex-shrink: <integer>

Unlike flex-grow, flex-shrink tells the flexbox how the items should shrink when the viewport size change. I didn’t paste the example picture here as it was bit hard to capture the screenshot to indicate the viewport size. However, I still pasted the code example which you can try in the codepen.

.i2 {
  height: 200px;
  flex-basis: 300px;
  flex-shrink: 1;
}

The item 2 has now the fixed width in the container and flex-shrink is allowed (value 1). As you decrease the viewport width you will see the item shrinks. What happens if you disable the shrink? (flex-shrink: 0). Then, you will see that the item 2 will always keep the width of 300px.

flex: <grow> <shrink> <basis>

We have taken a look at the three flex item properties – grow, shrink, basis. However, it is actually more recommended to use flex property instead of others. It is the shorthand of all and very convenient to use. And using flex property instead of those three are is considered a best practice.

.i2 {
  height: 200px;
  flex: 0 0 300px;
}

.i4 {
  order: 2;
  flex: 1;
}

Item 2 doesn’t grow and shrink but has a fixed width of 300px. So the items 1,2,3,5 are rendered first. Then, item 4 has flex-grow enabled so it takes the remaining available space after 1,2,3,5. If you decrease the viewport width on your screen, you will see item 4 will shrink but not item 2. However, if you allow shrinking in item 2 (flex: 0 1 300px) then you will see item 4 shrink first because it has the largest space followed by item 2.

Conclusion

We have completed a long journey of taking a look at basics of flexbox. There are a ton of more stuff and will try to write in different posts.