# Flexbox

Line things up in a row or a column with flexbox: align and space them, share the leftover space, and let items wrap onto new lines. Nav bars, toolbars, card rows and "center this" all come from here.

Updated: November 10, 2026

## [Flexbox Basics](https://www.ask-codey.com/courses/css-in-depth/topics/css-flexbox-basics-topic)

1. [Flexbox: Lining Things Up in a Row or a Column](https://www.ask-codey.com/lessons/css-flexbox-basics) (Apprentice): One line of CSS, display: flex, lines up an element's children in a row, flex-direction turns the row into a column, and the main and cross axes name the two directions every other flexbox property works along.
2. [Flexbox Alignment: justify-content and align-items](https://www.ask-codey.com/lessons/css-flexbox-alignment) (Apprentice): justify-content spaces flex items along the main axis, align-items and align-self line them up across it, the two together center anything both ways, and an auto margin pushes one item to the far end.

## [Flexible Sizes and Wrapping](https://www.ask-codey.com/courses/css-in-depth/topics/css-flexbox-sizes-and-wrapping)

1. [Flexbox Sizing: flex-grow, flex-shrink and flex-basis](https://www.ask-codey.com/lessons/css-flexbox-sizing) (Journeyman): Each flex item starts from its flex-basis, flex-grow shares out the leftover space like splitting a bill, flex-shrink decides who gives up room when it's tight, flex: 1 sets all three at once, and min-width: 0 lets a long line of text shrink.
2. [Flexbox Wrapping and gap](https://www.ask-codey.com/lessons/css-flexbox-wrapping) (Journeyman): flex-wrap lets flex items move onto a new line when they run out of room, gap puts even space between them, align-content places the lines, flex: 1 1 15rem makes a card row that fits any screen, and order changes what the eye sees but not what the keyboard follows.

## [Exercise: The Festival Lineup](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-festival-lineup)

1. [Exercise: The Festival Lineup](https://www.ask-codey.com/lessons/exercise-css-festival-lineup) (Journeyman): Lay out the Summer Sound festival's home page with flexbox, a nav bar with the logo left and the links right, a welcome message centered both ways and a row of headliner cards that wraps to fit any screen, and let the tests check every part.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-flexbox