← All tutorials

GoCareerGo Tutorials

CSS Tutorial

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

Flexbox Deep Dive

A one-dimensional layout model built for distributing space along a single axis — row or column.

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • main axis vs cross axis flips when you switch flex-direction
  • flex-grow, flex-shrink and flex-basis together control how items resize
  • order lets you visually reorder items without changing the HTML