Flexbox Fundamentals Every Beginner Should Know: A Practical Guide to CSS Flexbox

Have you ever tried to put two buttons beside each other in CSS and somehow ended up adjusting margins five different times? 😭

Or perhaps you wanted to centre something on a webpage and thought:

“Why is centering this thing harder than it should be?”

Maybe you've created a row of cards, only to discover that they refuse to align properly.

If you've experienced any of these problems, you're not alone.

One of the most useful CSS tools for solving these layout problems is Flexbox.

Flexbox, short for Flexible Box Layout, gives you a powerful way to arrange, align, and distribute elements within a container.

And the good news?

You don't need to memorise dozens of CSS properties before you can start using it.

You need to understand a few important concepts first.

Let's break them down.

What Is Flexbox?

Flexbox is a CSS layout system designed to make it easier to arrange elements along one dimension.

That means you can arrange items primarily:

Horizontally → in a row

or

Vertically → in a column

For example, imagine you have three buttons:

Save
Cancel
Delete

Without a layout system, you might start experimenting with margins and other properties.

With Flexbox, you can simply write:

.buttons {
display: flex;
}

Now the buttons become flex items and can be arranged using Flexbox properties.

That's the basic idea.

But to really understand Flexbox, you need to understand the relationship between the flex container and its flex items.

The Flex Container and Flex Items

When you apply:

.container {
display: flex;
}

the .container becomes the flex container.

Its direct children become flex items.

For example:

One Two Three

Here:

.container → Flex container**

The three inner <div> elements → Flex items

This parent-child relationship is fundamental to understanding Flexbox.

Most of the layout properties you apply to the container control how its children are arranged.

1. display: flex

Let's start with the property that activates Flexbox:

.container {
display: flex;
}

That's it.

Your container is now using Flexbox.

By default, flex items are arranged in a row.

So:

[ One ] [ Two ] [ Three ]

instead of the typical vertical stacking you might see with block elements.

From here, you can start controlling their direction, alignment, spacing, and behaviour.

1. Understanding the Main Axis

This is one of the most important Flexbox concepts.

The main axis is the primary direction in which the flex items are laid out.

By default:

flex-direction: row;

So the main axis runs horizontally.

Think:

Main Axis
────────────────────────→

[ One ] [ Two ] [ Three ]

The items are arranged along that horizontal line.

But the main axis isn't always horizontal.

You can change the direction.

1. Understanding the Cross Axis

The cross axis runs perpendicular to the main axis.

If your main axis is horizontal:

Main Axis
──────────────→

Cross Axis
↓

So:

Main axis → Horizontal

Cross axis → Vertical

But if you change the flex direction to a column, the relationship changes.

That's why understanding the axes is more important than memorising statements like:

“justify-content means horizontal.”

That isn't always true.

The direction of the main axis depends on flex-direction.

This is one of the biggest concepts beginners should understand.

1. flex-direction

The flex-direction property determines the direction of the main axis and therefore how flex items are arranged.

The most common values are:

flex-direction: row;

flex-direction: column;

You also have:

flex-direction: row-reverse;

and:

flex-direction: column-reverse;

Let's look at the first two.

Row

.container {
display: flex;
flex-direction: row;
}

Result:

[ One ] [ Two ] [ Three ]

Column

.container {
display: flex;
flex-direction: column;
}

Result:

[ One ]

[ Two ]

[ Three ]

So remember:

flex-direction determines the direction of the main axis.

1. justify-content

Now we get to one of the properties beginners encounter very quickly:

justify-content

This property controls how flex items are distributed along the main axis.

For example:

.container {
display: flex;
justify-content: center;
}

This places the items in the centre of the main axis.

Other useful values include:

justify-content: flex-start;

justify-content: flex-end;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

For example, space-between distributes the items with space between them:

[One] [Two] [Three]

This can be extremely useful for navigation bars and other horizontal layouts.

1. align-items

If justify-content controls alignment along the main axis, what controls alignment along the cross axis?

That's where:

align-items

comes in.

For example:

.container {
display: flex;
align-items: center;
}

This aligns flex items along the cross axis.

And here's an important point:

Don't memorize justify-content as “horizontal” and align-items as “vertical.”

That's not always correct.

Instead remember:

justify-content → main axis

align-items → cross axis

The direction of those axes depends on flex-direction.

Understanding this makes Flexbox much less confusing.

1. Centering Content With Flexbox

One reason Flexbox became so popular is how straightforward it makes centering in many common cases.

For example:

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

If the container has enough height and width, this can centre its flex items along both axes.

Imagine a box:

┌──────────────────────────┐
│ │
│ [ Button ] │
│ │
└──────────────────────────┘

Instead of using complicated positioning tricks or guessing with margins, Flexbox lets you express the layout intention directly.

Put the items in the centre of both axes.

That's powerful.

1. gap

Spacing between elements is another common layout problem.

Instead of doing this:

button {
margin-right: 10px;
}

you can often use:

.container {
display: flex;
gap: 20px;
}

This creates consistent space between the flex items.

For example:

[Button] 20px [Button] 20px [Button]

gap is especially useful for:

• Navigation links
• Button groups
• Cards
• Icons and text
• Form controls
• Component layouts

It can make your CSS easier to read and maintain.

1. flex-wrap

What happens if you have too many items to fit on one line?

Suppose you have several cards:

[Card] [Card] [Card] [Card] [Card]

But the container becomes too narrow.

By default, flex items generally try to remain on a single line, subject to the sizing rules in play.

You can allow them to wrap:

.container {
display: flex;
flex-wrap: wrap;
}

Now the items can move onto additional lines when necessary.

For example:

[Card] [Card] [Card]

[Card] [Card]

This is particularly useful when building layouts that need to adapt to different screen sizes.

1. flex-grow

Now let's look at how flex items respond when there is extra available space.

flex-grow determines how a flex item can grow relative to other flex items when extra space is available.

For example:

.item {
flex-grow: 1;
}

If multiple items have the same positive grow factor, they can share available extra space according to those factors.

For example:

.item {
flex-grow: 1;
}

If you have three items with the same grow factor, they can share the extra space.

You can also give one item a larger grow factor:

.item-one {
flex-grow: 2;
}

.item-two {
flex-grow: 1;
}

This tells the browser that the first item should receive twice the share of available extra space compared with the second, subject to the rest of the flex sizing rules.

You don't need to master the calculations immediately.

Start with the basic idea:

flex-grow controls how items can use extra available space.

1. flex-shrink

Now let's consider the opposite situation.

What happens when there isn't enough room?

That's where:

flex-shrink

comes in.

It determines how a flex item can shrink when the flex container doesn't have enough space.

For example:

.item {
flex-shrink: 1;
}

The default flex-shrink value for flex items is generally 1, meaning items are allowed to shrink when necessary, subject to their other sizing constraints.

Understanding flex-shrink becomes especially useful when you're building layouts that need to work across different screen sizes.

Flexbox in Real Websites

Now that we've covered the basic properties, let's look at where you might actually use Flexbox.

Because learning CSS properties without seeing their practical applications can make everything feel abstract.

Example 1: Navigation Bar

Imagine a website navigation:

Logo Home About Services Contact

You can create a flex container:

.navbar {
display: flex;
align-items: center;
justify-content: space-between;
}

Now the logo and navigation content can be distributed within the container.

Flexbox is a natural fit for this kind of layout.

Example 2: Button Group

Suppose you have:

Save Cancel

You can write:

.buttons {
display: flex;
gap: 10px;
}

Now the buttons sit beside each other with consistent spacing.

Simple.

Example 3: Cards

Imagine a collection of cards:

Card 1 Card 2 Card 3

You could use:

.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

Now the cards can be arranged in a row and wrap when the available space becomes smaller.

Example 4: Centering Content

Suppose you have a container with a message:

Welcome

You can use:

.hero {
display: flex;
justify-content: center;
align-items: center;
}

This gives you a straightforward way to centre the content along the two axes, assuming the container has the relevant dimensions.

The Most Important Flexbox Mental Model

If you remember only one thing from this article, remember this:

Flexbox is about the relationship between a container and its children.

The parent becomes the flex container:

.container {
display: flex;
}

The children become flex items.

Then you control how those children behave using properties such as:

flex-direction
justify-content
align-items
flex-wrap
gap

And you can influence how individual items respond to available space with:

flex-grow
flex-shrink

Once you understand that relationship, Flexbox becomes much easier to reason about.

A Common Flexbox Mistake

One of the most common beginner mistakes is using the wrong axis.

For example, someone might write:

justify-content: center;

and expect an item to move vertically.

But whether that happens depends on the direction of the main axis.

If:

flex-direction: row;

the main axis is horizontal.

If:

```css id="m4q8s1"
flex-direction: column;

the main axis is vertical.

So instead of memorising:

justify = horizontal

remember:

justify-content = main axis

And:

align-items = cross axis

This small change in how you think about Flexbox can prevent a lot of confusion.


Flexbox Isn't About Memorizing Everything

When you're learning Flexbox, it can be tempting to create a list of properties and try to memorise them.

But memorisation isn't the real goal.

You want to understand what problem each property solves.

For example:

Need to activate Flexbox?

→ display: flex

Need to change the direction?

→ flex-direction

Need to distribute items along the main axis?

→ justify-content

Need to align items on the cross axis?

→ align-items

Need consistent spacing?

→ gap

Need items to move onto multiple lines?

→ flex-wrap

Need items to use extra space?

→ flex-grow

Need items to shrink when space is limited?

→ flex-shrink

That's a much more useful way to learn.


 A Simple Flexbox Learning Exercise

Want to practise?

Create a container with three boxes:


<div class="container">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>


Then experiment.

Start with:


.container {
  display: flex;
}


Then try:


flex-direction: column;


Change it back to:


flex-direction: row;


Try:


justify-content: center;


Then:


align-items: center;


Add:


gap: 20px;


Then try:


flex-wrap: wrap;


Don't just copy the code.

Change the values and observe what happens.

That's how you start building intuition.


 Flexbox and Responsive Design

Flexbox is particularly useful when creating layouts that need to adapt to different screen sizes.

For example, a row of cards might fit comfortably on a desktop:


[Card] [Card] [Card] [Card]


But on a smaller screen, you may want:


[Card] [Card]

[Card] [Card]


Using:


flex-wrap: wrap;


can allow the items to move onto additional lines.

You can combine Flexbox with media queries and other responsive techniques to create layouts that adapt to available space.

That's one reason Flexbox is such an important skill for frontend developers.


 What Should You Learn After Flexbox?

Once you become comfortable with the fundamentals, you can explore:

* Flex shorthand
* flex-basis
* align-content
* align-self
* order
* Nested flex containers
* Responsive Flexbox layouts
* Flexbox combined with media queries

You can also move into CSS Grid, which is another powerful layout system designed for two-dimensional layouts.

But don't rush.

Master the fundamentals first.


 Final Thoughts

Flexbox can feel confusing at first.

You see properties like:

justify-content

align-items

flex-grow

flex-shrink

and wonder how all these pieces fit together.

But once you understand the basic mental model, it becomes much simpler.

Start here:

display: flex → Activate Flexbox

Main axis → Primary direction

Cross axis → Perpendicular direction

flex-direction → Choose the direction

justify-content → Distribute along the main axis

align-items → Align along the cross axis

flex-wrap → Allow items to wrap

gap → Create consistent spacing

flex-grow → Allow items to grow

flex-shrink → Allow items to shrink

Then practise.

Build a navigation bar.

Create a button group.

Arrange some cards.

Centre content.

Make a responsive layout.

Break something.

Fix it.

Repeat.

That's how Flexbox becomes a practical skill instead of just another list of CSS properties to memorise.

And remember:

Good CSS isn't about fighting the browser until your layout looks right. It's about understanding the layout system and telling the browser how your elements should behave. 💻

 Which Flexbox concept are you currently learning or struggling with: the main/cross axis, justify-content, align-items, flex-grow, or flex-shrink?