0Pricing
Frontend Academy · Lesson

Flexbox Deep Dive: alignment wrapping order

Master justify-content, align-items, align-self, flex-wrap, flex-grow, flex-shrink, flex-basis, and the order property.

Review: Flex Container and Items

Recap: display: flex on the container creates flex items from direct children. The main axis runs along flex-direction. The cross axis is perpendicular.

justify-content Values in Detail

All justify-content values on a row-direction container: flex-start (default), flex-end, center, space-between (gaps between only), space-around (equal margin around each), space-evenly (equal gaps everywhere).

.row { display: flex; }
.space-between { justify-content: space-between; }
.space-around   { justify-content: space-around; }
.space-evenly   { justify-content: space-evenly; }
.center         { justify-content: center; }

All lessons in this course

  1. Flexbox Deep Dive: alignment wrapping order
  2. CSS Grid: template-areas auto-fit minmax
  3. Combining Flexbox and Grid
  4. CSS Variables for Theming
← Back to Frontend Academy