Syllabus

On this page

Flexbox Introduction and Mental Model

Badar KhalilUpdated October 1, 2026 6 min read

CSS Flexbox: Introduction and the Mental Model

CSS Flexbox (the Flexible Box Layout Module) is a layout mode that arranges items in a single line, either horizontally or vertically, and decides how to share the available space between them. If you learn only one thing about Flexbox, learn the mental model in this topic. Every property you meet later (justify-content, align-items, flex-grow, flex-wrap) is just a way of controlling one of the three ideas below.

What You Will Learn

What Flexbox is and what makes it different from block and inline layout
The three-question mental model for any flex layout
How leftover (free) space is calculated and shared
The default behaviour you get from a single display: flex
Real use cases: navbars, centering, card rows, sticky footers
Browser support and the common beginner mistakes

What Is Flexbox?

Normal CSS layout has two main flows. Block elements stack vertically and take the full width. Inline elements flow sideways like words in a sentence. Neither gives you tools to say "put these three things in a row, push the last one to the far right, and make them all the same height". Flexbox is a third layout mode that does exactly that.

You switch it on by setting one property on the parent:

CSS

.container {
  display: flex;
}

That single declaration changes how the container's direct children are laid out. They stop behaving like normal blocks and become flex items.

The Flexbox Mental Model

Imagine a shelf holding books. The shelf is the flex container. The books are flex items. The books sit in a line along the shelf. If the books do not fill the shelf, the empty space left over is free space. Flexbox gives you tools to decide what happens with that free space.

Code

  Flex container (display: flex)
 +-----------------------------------------------------+
 |  [ Item 1 ]  [ Item 2 ]  [ Item 3 ]      free space |
 +-----------------------------------------------------+
   ------------- main axis (direction) -------------->

The Three Questions

Whenever you build or debug a flex layout, ask these in order:

Which direction do items flow? Controlled by flex-direction (row or column). This sets the main axis.
How is free space shared along that direction? Controlled by justify-content (on the container) and flex-grow, flex-shrink, flex-basis (on the items).
How are items aligned across the other direction? Controlled by align-items, align-self and align-content.

If a flex layout is not behaving, one of these three questions has the wrong answer.

Content-Out Thinking

Flexbox is content-first. Items start at their natural size (their content or their flex-basis) and the container then redistributes any extra or missing space. Compare this with older techniques, where you set fixed widths first and hoped the content fit. This is why Flexbox is so good for components whose content you cannot predict, such as buttons with translated labels or cards with user-written text.

What You Get by Default

The moment you write display: flex, these defaults apply even if you write nothing else:

Property	Default	Effect
`flex-direction`	`row`	Items sit side by side, left to right (in left-to-right languages)
`flex-wrap`	`nowrap`	Items stay on one line, even if they must shrink or overflow
`justify-content`	`normal` (acts like `flex-start`)	Items bunch at the start of the main axis
`align-items`	`normal` (acts like `stretch`)	Items stretch to the container's cross size, giving equal heights in a row
`flex-grow`	`0`	Items do not grow to fill extra space
`flex-shrink`	`1`	Items shrink if there is not enough room
`flex-basis`	`auto`	Starting size comes from `width` or content

Your First Flex Layout

Open the first live example. The three boxes are normal div elements. Remove display: flex from the container and watch them stack. Add it back and they line up in a row. That one property is the entire switch.

Where Flexbox Shines (Use Cases)

Navigation bars: logo on the left, links in the middle, buttons on the right.
Centering: perfect horizontal and vertical centering with two properties.
Card rows: equal-height cards that wrap on small screens.
Form rows: label, input and button aligned on one line.
Sticky footers: a footer that stays at the bottom of short pages.
Media objects: an avatar next to text, a very common UI pattern.
Toolbars and button groups: evenly spaced controls with gap.

Browser Support and Modern Status

Flexbox is supported in every current browser, with no vendor prefixes needed. The gap property for flex containers is also supported across modern browsers, so you no longer need margin tricks to space items. In 2026-era projects, Flexbox is the default tool for component-level layout, while CSS Grid handles page-level structure.

Common Beginner Mistakes

Putting display: flex on the item instead of the parent. The property goes on the container.
Expecting grandchildren to become flex items. Only direct children are affected.
Forgetting that nowrap is the default. Items may squash or overflow instead of wrapping to a new line.
Using Flexbox for two-dimensional layouts. Grid is usually cleaner there.
Memorising property values without the mental model. Always ask the three questions first.

Key Takeaways

Flexbox is a one-dimensional layout mode switched on with display: flex on the parent.
Think: container, items, direction, free space, alignment.
Direction first, then space distribution, then cross-axis alignment.
Defaults (row, nowrap, stretch, shrink) explain most "why is it doing that" moments.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; background: #ecf0f1; padding: 10px; gap: 10px; }
  .item { background: #3498db; color: #fff; padding: 20px 30px; border-radius: 6px; }
</style>
<div class='container'>
  <div class='item'>One</div>
  <div class='item'>Two</div>
  <div class='item'>Three</div>
</div>
<p>Delete <code>display: flex;</code> from the CSS and compare.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .container { display: flex; justify-content: space-between; background: #ecf0f1; padding: 10px; border: 2px dashed #7f8c8d; }
  .item { background: #e67e22; color: #fff; padding: 20px; border-radius: 6px; }
</style>
<div class='container'>
  <div class='item'>A</div>
  <div class='item'>B</div>
  <div class='item'>C</div>
</div>
<p>Change justify-content to: flex-start, center, flex-end, space-around, space-evenly.</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: sans-serif; }
  .hero { display: flex; justify-content: center; align-items: center; height: 220px; background: #2c3e50; }
  .box { background: #1abc9c; color: #fff; padding: 20px 30px; border-radius: 8px; }
</style>
<div class='hero'>
  <div class='box'>Perfectly centered</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { margin: 0; font-family: sans-serif; }
  .nav { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: #2c3e50; color: #fff; }
  .logo { font-weight: bold; font-size: 1.2rem; margin-right: auto; }
  .nav a { color: #ecf0f1; text-decoration: none; }
  .btn { background: #e74c3c; padding: 8px 16px; border-radius: 6px; }
</style>
<nav class='nav'>
  <div class='logo'>MyBrand</div>
  <a href='#'>Home</a>
  <a href='#'>Courses</a>
  <a href='#'>Blog</a>
  <a class='btn' href='#'>Sign up</a>
</nav>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  * { box-sizing: border-box; }
  body { margin: 0; font-family: sans-serif; }
  .page { display: flex; flex-direction: column; min-height: 100vh; }
  .header, .footer { background: #2c3e50; color: #fff; padding: 16px; text-align: center; }
  .content { flex: 1; padding: 16px; background: #f7f9fa; }
</style>
<div class='page'>
  <div class='header'>Header</div>
  <div class='content'>Short content. The footer still sits at the bottom of the screen because .content has flex: 1.</div>
  <div class='footer'>Footer</div>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: sans-serif; }
  .cards { display: flex; flex-wrap: wrap; gap: 12px; }
  .card { flex: 1 1 160px; background: #9b59b6; color: #fff; padding: 20px; border-radius: 8px; }
</style>
<div class='cards'>
  <div class='card'>Card 1</div>
  <div class='card'>Card 2</div>
  <div class='card'>Card 3</div>
  <div class='card'>Card 4</div>
  <div class='card'>Card 5</div>
</div>
<p>Resize the preview. Cards wrap when there is not enough room.</p>

Output

Press Run to execute.

Exercise: Center a Box with FlexboxHTML

Make the .stage container a flex container and center .box both horizontally and vertically inside it. Do not use position, margin tricks or transforms.

Try it Yourself HTML

<style>
  .stage { height: 240px; background: #ecf0f1; }
  .box { width: 120px; height: 80px; background: #3498db; color: #fff; text-align: center; line-height: 80px; }
</style>
<div class='stage'>
  <div class='box'>Center me</div>
</div>

Output

Press Run to execute.

Show expected output

The blue box appears exactly in the middle of the grey stage, horizontally and vertically.

This is a self-check — compare your result with the expected output above.

Exercise: Build a Simple Flex NavbarHTML

Turn .nav into a flex container. Put the logo on the far left and push the three links to the far right. Vertically center everything and add a 20px gap between the links.

Try it Yourself HTML

<style>
  .nav { background: #2c3e50; color: #fff; padding: 14px 20px; font-family: sans-serif; }
  .nav a { color: #fff; text-decoration: none; }
</style>
<nav class='nav'>
  <div class='logo'>Logo</div>
  <a href='#'>Home</a>
  <a href='#'>About</a>
  <a href='#'>Contact</a>
</nav>

Output

Press Run to execute.

Show expected output

Logo on the left, three links grouped on the right, all vertically centered, 20px between the links.

This is a self-check — compare your result with the expected output above.

Was this page helpful?