6 Essential CSS Flexbox Properties

Published: 5/11/2025

Many beginners think that flexbox is a big thing and is complicated. To me, flexbox is a hack to avoid learning to use other properties like margins and grid properly.

I have been using flexbox maybe a couple of thousand times. These 3 properties cover 90% of the use case:

• justify-content
• align-items
• flex-direction

And these 3 cover another 9.9%:

• flex-grow
• flex-shrink
• flex-basis

They are used much less, however, you need to understand all of them to understand why flexbox behaves the way it does.

In this article, we will go through exactly what they do and how you can apply them to building real-world components.

flex-direction

The purpose of flexbox is to align HTML elements.

Here are three boxes and a container.

Here’s what they look like on a webpage:

Let’s set the container to display flex.

Two things changed:

One, the items are stacked horizontally. This happens because by default, the flex-direction is set to row (flex-direction: row). Setting it to column will make it exactly like before.

Second, the items take the whole height of their container. This happens because align-items is set to stretch by default. You will learn what that means soon.

justify-content

Right now, the items are placed at the start of the container. Use justify-content to control the placement of the items.

You can center them (now you can finally center a div), move them to the end, or distribute them evenly, etc. There are multiple more properties. But the idea is you can use justify content to control how the items are aligned horizontally.

align-items

To control how they are aligned vertically, use align items. By default, it’s set to stretch, which will take all the vertical space of its container.

justify-content and align-items work independently, so you can combine both.

Exercise: Navbar:

Apply what you just learnt to recreate the navbar of this random website.

Flex items

Now let’s talk about children. Not that type of children, we are talking about flex items.

Let’s go through the three most important properties.

flex-basis

First of all, flex basis. Use it to set the default size of the items. For example, setting the flex-basis of the items to 100 pixels will set their default size to 100 pixels.

flex-grow

Second, flex grow. Use it to allocate the remaining space of the container. The default value is zero. The elements take as little space as possible. Setting the values to any non-zero number makes the items grow and take up the remaining space of the container. You can adjust the value of each item to make it take more or less space.

flex-shrink

Third, flex shrink. Kind of like the reverse of flex grow. It specifies what happens when the item is bigger than the container. Any non-zero numbers mean that the items will shrink with the container. If we set it to zero, the items will overflow.

Usually, you won’t use the property separately, instead, it’s easier to use the flex shorthand, which combines flex-grow, flex-shrink, and flex-basis.