Flex Container

Flexbox Container

A Flexbox layout starts by making a container a flex container. Set display: flex (or display: inline-flex) on a parent element. The direct children become flex items.

.container {
  display: flex;
}

inline-flex makes the container behave like an inline element (it only takes as much width as needed):

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

Common container properties you will use a lot:

• flex-direction – row / column direction
• flex-wrap – wrap items to multiple lines
• gap – spacing between items
• justify-content – align on the main axis
• align-items – align on the cross axis

Direction and wrapping:

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

Tip: flex-direction changes the main axis. That also changes how justify-content and align-items behave.

Flexbox Justify Content

justify-content aligns items along the main axis (row by default).

Common values:

• flex-start – pack items at the start
• center – center items
• flex-end – pack items at the end
• space-between – first at start, last at end, space between
• space-around – equal space around items
• space-evenly – equal space between items (and edges)

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

If you switch to flex-direction: column, justify-content aligns vertically:

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering now */
}

Flexbox Align Items

align-items aligns items along the cross axis (vertical by default in a row).

Common values:

• stretch – stretch items to fill the cross axis (default)
• flex-start – align to the start
• center – align to the center
• flex-end – align to the end
• baseline – align text baselines

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

Baseline example (useful for mixed font sizes):

.row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

Tip: For multi-line flex layouts (with wrapping), use align-content to control how lines are spaced. align-items aligns items within each line.

Summary

• Make a flex container with display: flex or inline-flex.
• justify-content aligns items on the main axis.
• align-items aligns items on the cross axis.
• Main axis changes when you switch flex-direction.