Learn CSS · lesson 7 of 8
Flexbox: items in a row
Make the ul a flex container with display: flex and a gap.
Learn
display: flex puts the children of an element side by side in a row. gap adds space between them, and justify-content decides how they spread out. Here the list is the container.
Your task
Make the ul a flex container with display: flex and a gap.
FAQ
Flexbox: items in a row: common questions
I am stuck. What can I do?
Press Hint for a nudge, read the message next to each goal, and compare your code with the lesson text. If you still need it, Show answer reveals a model solution. Try to type it yourself rather than copy it.
Does my work get saved?
Your ticks and XP are saved in this browser, and in your account if you log in. The code you type is not stored on a server.
Start a conversation
Enjoying coding? Meet a teacher.
Tell us the learner's age, country and what they would like to build, and we will suggest a class. A parent or guardian can make the enquiry.
- Tell us the learner’s age or grade and goals
- We’ll suggest a suitable class or learning path
- We’ll confirm format, timing and fees with a parent or guardian
Play it, don't just read it
Write some code right now
Free games that need no sign-up. Pick one and play for five minutes.
Pick a game
- Predict the OutputRead a short Python program and choose what it prints. Then watch it run…Play
- Code BuilderThe lines of a Python program are mixed up. Tap them into the right…Play
- Bug HunterA Python program prints the wrong answer. Find the one line with the…Play
- Code JungleWrite real Python to guide Miko the monkey to every banana. 24 levels:…Play