CSS Flexbox

Flexbox is a layout tool built into CSS. One property, display: flex, turns a container into a flexible row. The items inside line up side by side, and you control their spacing, alignment, and size without floats or tricky hacks. It is the right tool for nav bars, button groups, toolbars, and any set of items that sits in one line.

Flexbox runs on two axes. The main axis follows flex-direction, which defaults to row, so it runs left to right. The cross axis runs top to bottom. justify-content places items along the main axis. align-items places them along the cross axis. Mix these up and your layout will refuse to do what you expect, so keep the axes straight.

A common beginner move is reaching for flexbox to build a whole page with several rows and columns. It can do that, but it gets awkward fast. For two-dimensional layouts, use CSS grid. Flexbox shines when the content is one line, wrapping or not, and you care mostly about spacing and alignment within that line.

Justify versus align

justify-content arranges items along the main axis. align-items arranges them along the cross axis. With the default flex-direction: row, that means justify places items left and right, and align places them up and down. The most common beginner mistake is using justify-content: center when they mean vertical centering, then watching nothing move. Check which axis you are on before you write the property.

.row {
  display: flex;
  justify-content: space-between; /* main axis: left to right */
  align-items: center;           /* cross axis: top to bottom */
  gap: 12px;
}

flex: 1 and shared space

flex is a shorthand for three numbers: grow, shrink, and basis. flex: 1 means grow at rate 1, shrink at rate 1, and start from a basis of 0. In practice, give every item flex: 1 and they all take an equal share of the row. Give one item flex: 2 and it takes twice the space of its neighbors. This is how equal-width columns and expanding search bars are made.

.item {
  flex: 1; /* every item shares the row equally */
}

.item.wide {
  flex: 2; /* this one takes twice the share */
}

Centering without pain

To center one thing inside a box, make the box a flex container and set justify-content: center and align-items: center. The box needs a height for vertical centering to be visible. Forgetting the height is the classic trap: the container hugs its content, so there is no extra space to center within, and nothing appears to move.

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px; /* height gives the centering room to work */
}

Syntax

.container {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.card{flex:1; min-width:0}