Centre the items horizontally.
Acceptance criteria
- 1.Centre the items horizontally.
CSS Tutorial · CSS Flexbox
These 10 tasks go with the Justify Content chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “The justify-content property is used to control the horizontal alignment and spacing of flex items along the main axis of a flex container.” Read the chapter.
1.Centre along the main axisexercise · easy · 10 min
Centre the items horizontally.
Passes when: Centre the items horizontally.
2.Push items apartexercise · easy · 10 min · practice plan
Use space-between.
Passes when: Use space-between.
3.Even spacing aroundexercise · easy · 10 min · practice plan
Use space-around.
Passes when: Use space-around.
4.Align to the endexercise · easy · 10 min · practice plan
Push all items to the end of the row.
Passes when: Push all items to the end of the row.
5.Distribute evenlyexercise · medium · 10 min · practice plan
Use space-evenly so all gaps are equal.
Passes when: Use space-evenly so all gaps are equal.
6.Fix align-items used for the main axisbug fix · easy · 8 min
Horizontal alignment in a row uses justify-content.
Passes when: Horizontal alignment in a row uses justify-content.
7.Fix the misspelled valuebug fix · easy · 8 min · practice plan
The value is space-between, not space-beetwen.
Passes when: The value is space-between, not space-beetwen.
8.Fix the missing hyphenbug fix · easy · 8 min · practice plan
The value needs a hyphen: flex-end.
Passes when: The value needs a hyphen: flex-end.
9.Fix the property on the itemsbug fix · easy · 8 min · practice plan
justify-content belongs on the container.
Passes when: justify-content belongs on the container.
10.Fix the wrong property namebug fix · easy · 8 min · practice plan
The property is justify-content, not justify.
Passes when: The property is justify-content, not justify.
Between them these tasks cover Main-axis alignment, space-between and center.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.