CSS Flexbox

Before Flexbox, laying boxes out in a row was a headache. People used floats, inline-blocks, and fixed widths, and the boxes kept breaking, dropping to the next line, or refusing to line up vertically. Flexbox was made to end that struggle. With one line — display: flex — a container takes control of its children and lines them up neatly, in a row or a column.

Diagram — see how it fits together

Flexbox is a one-dimensional layout method: it arranges items along one line at a time, either across (a row) or down (a column). That is exactly what most page parts need — a row of cards, a row of buttons, a menu, or a set of boxes that should share the space evenly.

The flex container and its items

Flexbox has two roles. The container is the parent box with display: flex. The items are its direct children. Properties written on the container control the whole row; properties written on an item control just that item. The most important container properties are flex-direction, justify-content, align-items, flex-wrap, and gap.

Syntax — a row of three cards

.cards {
  display: flex;
  gap: 20px;
}
.card {
  flex: 1;
  padding: 20px;
  border: 1px solid #ccc;
}

Here flex: 1 on each card means "take an equal share of the space". Three cards with flex: 1 each get one third of the row, and gap: 20px puts an even 20px space between them.

Direction, alignment, and wrapping

flex-direction chooses the direction: row (left to right, the default) or column (top to bottom). justify-content lines items up along that direction — flex-start, center, space-between, or space-around. align-items lines them up across the direction — for a row, that means top to bottom, so align-items: center centres each card vertically. If there are too many items for one line, flex-wrap: wrap lets them flow onto the next line instead of squeezing.

Common mistakes

• Setting display: flex on the items instead of the container — nothing happens, because flex only works from the parent.
• Forgetting flex-wrap: wrap — on a narrow phone screen the items squeeze into one row instead of dropping to the next line.
• Mixing up justify-content and align-items — remember, justify follows the direction you set with flex-direction.
• Using fixed widths on flex items — the items cannot shrink or grow, so the row overflows on small screens. Use flex: 1 or flex-basis instead.
• Adding margins to every item for spacing — use gap on the container, which is cleaner and never adds space at the edges.

Remember

• Flexbox is one-dimensional: one row or one column at a time.
• The container gets display: flex; the children are the items.
• flex-direction sets row or column; justify-content aligns along it; align-items aligns across it.
• flex: 1 makes items share the space equally.
• flex-wrap: wrap lets items move to the next line; gap spaces them evenly.

Example explained

• .cards { display: flex; } — the container becomes a flex container, so the three student cards line up in a row instead of stacking.
• justify-content: space-between — the first card touches the left edge, the last card touches the right edge, and the leftover space is shared evenly between them.
• align-items: center — the cards are lined up in the middle vertically, so they look level even if one card has more text than the others.
• .card { flex: 1; } — each card takes an equal share of the row, so all three end up the same width.
• gap: 20px — a clean 20px space sits between the cards, with no extra space at the outer edges.
• flex-wrap: wrap — on a narrow phone screen the cards drop onto the next line instead of squeezing into one row.