Flexbox Layout

A New display Value, A New Way to Think

display: flex turns an element into a flex container, and every direct child inside it becomes a flex item. From that moment, a whole new set of properties becomes available — properties that describe how those items should be arranged as a group, not just how each one looks on its own.

• ✓Flexbox works along one direction at a time — a row or a column — called the main axis.
• ✓Container properties (on the parent) control alignment and spacing; item properties (on the children) control individual behavior.
• ✓Flexbox replaced most of the float and inline-block hacks used for layout before it existed.

display: flex & flex-direction

Setting display: flex on a parent is step one. flex-direction then decides whether items line up left-to-right (row, the default) or top-to-bottom (column).

.row {
  display: flex;
  flex-direction: row;   /* default — left to right */
}

.column {
  display: flex;
  flex-direction: column;   /* top to bottom */
}

Spacing Items Along the Main Axis

justify-content controls how items are spaced along the main axis — the direction set by flex-direction.

Aligning Items on the Cross Axis

While justify-content works along the main axis, align-items works along the perpendicular cross axis — for a row, that means vertical alignment.

.row {
  display: flex;
  align-items: center;   /* vertically centers items */
  height: 90px;
}

flex-grow, flex-shrink & flex-basis

Flex items can grow to fill extra space or shrink to fit a tight container. The shorthand flex combines all three: flex-grow, flex-shrink, and flex-basis in one declaration.

.sidebar {
  flex: 0 0 220px;   /* fixed width, doesn't grow or shrink */
}

.content {
  flex: 1;   /* grows to fill remaining space */
}

Spacing Between Items, No Margins Needed

The gap property adds space between flex items without the extra-margin-on-every-item-except-the-last trick developers used to rely on.

.card-row {
  display: flex;
  gap: 16px;
}

Flexbox Is One-Dimensional

Tomorrow's lesson covers CSS Grid, which handles true two-dimensional layouts — the two work well together rather than competing.

Breaking Down What You Just Learned

Try It Yourself

Build a Flexbox Card Row

Recap

Key Takeaways