Menus, toolbars and rows of cards are everywhere on the web. Flexbox is the CSS tool that lines them up neatly with just a few lines.
flag
What you'll learn
How display: flex puts the children of a box in a row.
How to spread items out and line them up with justify-content and align-items.
How to switch to a column, let items wrap onto new lines, and add gaps.
waving_handLet's line things up
Flexbox is a way to lay out the children of one box. You add display: flex; to the parent, called the flex container. Its children, called flex items, line up in a row.
Then a few properties on the container decide how the items spread out and line up.
shelves
Think of books on a shelf. The shelf is the flex container, and the books are the items. They stand side by side in a row.
You can push them to one end or spread them across the shelf (justify-content). Tall and short books all stand on the shelf's bottom (align-items).
When one shelf is full, the next books go on the shelf below (flex-wrap).
A flex container has two directions. The main axis is the way the items line up: left to right in a row. The cross axis goes the other way: up and down. justify-content works along the main axis, and align-items works along the cross axis.
searchA closer look
justify-content: spreading items along the row
Each box below is a flex container with three items. Only justify-content changes.
flex-start
center
flex-end
space-between
space-around
space-evenly
align-items: lining items up and down
Here the three items have different heights. Only align-items changes.
stretch
flex-start
center
flex-end
Rows or columns: flex-direction
flex-direction: row; is the default. flex-direction: column; stacks the items from top to bottom instead. In a column, the main axis goes down, so justify-content moves items up and down, and align-items moves them left and right.
When items don't fit: flex-wrap
By default, all items stay on one line and shrink to fit. flex-wrap: wrap; lets them keep their size and move to a new line instead, like books going onto the next shelf.
When items wrap onto several lines inside a tall container, align-content moves those lines up or down, or spreads them out.
Space between items: gap
gap: 12px; on the container adds 12 pixels between the items, and between the lines when they wrap. Unlike margin, it adds no extra space at the outer edges.
constructionLet's build it
Let's lay out the Front Page Bytes top bar and a row of category cards. Each code box opens on the CSS tab with the new lines highlighted. Click HTML to see the page being styled.
Before this step, the logo and the links were on separate lines, because the links sit in a <div>. display: flex; on .topbar puts its two children, the logo and the links box, side by side.
A second flex container: .cards. Its five cards line up in a row, and gap adds 12 pixels between them.
Look closely: five cards don't fit in the mini browser, so they shrink to fit.
The bar is 80 pixels tall, and the plan was to center the items up and down. But in a row, justify-content works left to right, so the items move to the middle of the bar's width and stay at the top.
tips_and_updatesTip: In a row, use align-items: center; to center up and down.
gap sets the space between a container's items. A .card has no flex items of its own, so the gap does nothing and the cards touch each other.
tips_and_updatesTip: Put gap on the flex container: .cards { gap: 12px; }
quizTest your knowledge
Edit the CSS on the left. Open the HTML tab to see the class names you can use. The mini browser updates as you type, and each goal gets a check mark when it's done.
auto_awesomeNo clicking needed. Each goal gets a check mark by itself once your code does it.
Turn .menu into a flex container.not done yet
Spread the .menu links out with justify-content: space-between.not done yet
Put the .days boxes in a row.not done yet
Let the .days boxes wrap onto new lines.not done yet