CSS - Brief Guide on Flexbox Layout - Part 2

It's time for Flexbox part 2, today we will cover the properties of the Flex Items and how we can use it to manipulate the children of the Flex Container. If you are new to Flexbox, I recommend you read Part 1 first, as it will cover the Flex Container properties and other information about Flexbox.

Flex Item Properties

Lets recall that the direct children of a Flex Container we call Flex Items. Flex Items also have properties of their own that you can use, these properties are flex-basis, flex-shrink, flex-grow, order and align-self. (You can also use flex as a shorthand property for grow, shrink and basis.)

As usual, start with the basic set up:

.flex-container {
  width: 400px;
  height: 400px;
  outline: 1px solid black;
  display: flex;
}

.flex-item {
  min-width: 60px;
  min-height: 50px;
  outline: 1px solid black;
}

Note: I have highlighted the Flex Container using the DevTool, that's why you can see the diagonal dashed lines, this represents the remaining space in the Flex Container. We only used display: flex but you can see some default properties have been applied, such as align-items: stretch which is why the items are stretch along the cross axis.

Let's look at the Flex Item's properties one by one:

• flex-basis is a property that allow us to set the default size of the Flex Item this property declared on. You can use the standard CSS length as value or keywords. By default this is set to "auto" which means it will just take the dimensions defined by the Flex Item's width and height properties. It's good to know that flex-basis still obey the min-width and max-width properties of the Flex Item, but it takes precedent over width property.

Example 1 - flex-basis- Here, flex-basis is set to "22%" so each item will be 22% of the main axis width. (Reminder: if flex-direction is column, then the main axis is the vertical direction so you would be setting the "height" of the Flex Item)

Example 2 - flex-basis- Here, flex-basis is set to "150px" - Notice something weird below? Our Flex Container is only 400px wide, so why does it look like each Flex Item fits perfect inside, shouldn't it overflow? The answer is the default flex-shrink property, which we will cover next.

• flex-shrink is a property that allow you to control if the Flex Item should shrink or not. The value is a number or keyword which represents the factor of the shrinking. The default value is 1 and negative values are not allowed.

Example - flex-shrink - Here, I have set various shrink value on each Flex Items to showcase how the number affect the shrink ratio. You can see that all have a flex-basis of 150px, with shrink set to 0, item D take up 150px and the remaining space is used to calculate the widths of the others with various shrinking value.

• flex-grow is a property that allow you to control how much a Flex Item should grow. Similar to flex-shrink it takes a number value to determine the growth rate. The default is 0 and the number cannot be negative. This property will take the available space then grow the Flex Item proportional to the number value.

Example - flex-grow - Here, I have set the growth values to be different for each Flex Item so you can see how this effect them. Judging by eye, you can see that C is roughly twice as big as B and D is roughly 4 times as big as B. Fortunately, you don't need to know the calculations behind the scene to use the property 😅.

• align-self is a property that allow you to set cross alignment of the Flex Item and ignore the Flex Container property align-items.

Example - align-self - Here, you can see how Flex Item align-self place the item on the cross axis.

• order is an easy property to use, it allows you to move the order of the Flex Item around. If multiple Flex Items have the same order, then it will appear in the same order as written in the source/markup. If possible try to avoid using order, as this only changes what appears on the screen so it is not that great for accessibility. But it does have it's uses. You can check out the use cases at MDN.

Example - order - Here, I changed the flex-direction to column just for the fun of it. You can see that Flex Items in order: 1 appears before order: 2 items, and the items in the same order are laid out as per the source.

Summary

We have now covered Flexbox! Now you know how to set up a Flex Container, define the flow direction and can align the items. You can also manipulate the size of the Flex Item individually using flex: <flex-grow> <flex-shrink> <flex-basis>; as shorthand notation or just set the properties individually, and you can change the Flex Items cross alignment and appearance order using align-self and order, respectively.

I would like to share with you also this handy Flexbox cheatsheet to help remind you of the properties. It is quite concise and I used this a lot when I started out (and sometimes even now when I forget things 😄).

Other resources:

• W3School
• MDN Docs
• Flexbox Froggy, if you like games.
• Traversy Media, if you like learning through video.

If you made it this far, thank you for reading, I hope that was easy to understand. As always, if you have any feedback or suggest feel free to leave a comment.