GoCareerGo Tutorials

CSS Tutorial

Selectors, box model, Flexbox, Grid, animation and responsive design.

justify-content and align-items

The two properties that align Flexbox/Grid children along the main axis and cross axis.

.container {
  display: flex;
  justify-content: space-between; /* main axis: start, center, end, space-between, space-around */
  align-items: center;             /* cross axis: start, center, end, stretch */
}

Tip

Remember: justify-content works along the MAIN axis (row by default), align-items along the CROSS axis.