Flexbox Fundamentals

Master the one-dimensional layout model that finally made centering elements and distributing space easy.

CSS6 min readConcept 19 of 43

What it is

The Flexible Box Layout Module (Flexbox) is a layout model designed for laying out items in a single dimension—either in a row (horizontally) or in a column (vertically).

By simply adding display: flex to a parent container, it immediately takes control of its direct children, transforming them from normal block or inline elements into 'flex items'.

Why it matters

Before Flexbox, developers spent years hacking layouts together using floats, tables, and negative margins just to center a button vertically or distribute three columns evenly. Flexbox made all of those hacks obsolete overnight.

How it works

Flexbox fundamentally relies on the relationship between a **Parent Container** and its **Direct Children**.

1. **display: flex**: Turns the container into a flex context. Children instantly sit side-by-side in a row.

2. **flex-direction**: Determines the primary axis. row (default) goes left-to-right. column goes top-to-bottom.

3. **flex-wrap**: By default, flex items will squish themselves to fit on a single line. Setting flex-wrap: wrap allows them to break onto a new line if they run out of space.

4. **gap**: The modern, clean way to insert exact spacing between the items without messing with child margins.

Try it

Toggle the flex-direction and flex-wrap properties on the parent container. Notice how changing the direction completely alters the layout, and how gap creates perfect spacing between the colored blocks.

The Flexbox Inspector

Direction

Wrap

Gap

16px
/* 1. The Parent Container */
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
}
.flex-container
1
2
3
4
5
6
iWhen flex-wrap is set to nowrap, the items ignore their ideal 80px size and ruthlessly squish together to fit inside the parent container.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If you want to change the flow of items from a horizontal row to a vertical column, which element do you apply `flex-direction: column` to?
  2. 2What is the primary architectural difference between Flexbox and CSS Grid?
  3. 3Which property is the modern, cleanest way to add consistent space between flex items?

Remember this

  • Flexbox solves 1-dimensional layouts (rows or columns).
  • flex-direction, flex-wrap, and gap must be applied to the Parent Container.
  • display: flex immediately turns children into flex items.
  • Always use gap instead of child margins for spacing.

Done with this concept?

Mark it complete to track your progress. No login needed.