Problem: “Space-Between” + Centering Three Items
Problem description
A .toolbar contains three child icons: left, center, and right. The task is to position the first icon flush left, the last icon flush right, and the middle icon exactly at the horizontal midpoint, all within a single Flex container.
Goal
Distribute the icons at 0%, 50%, and 100% across the toolbar’s width without using multiple containers.
Constraints
Only CSS modifications to existing elements are allowed; you may not add HTML or JavaScript.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: “Space-Between” + Centering Three Items
Problem description
A .toolbar contains three child icons: left, center, and right. The task is to position the first icon flush left, the last icon flush right, and the middle icon exactly at the horizontal midpoint, all within a single Flex container.
Goal
Distribute the icons at 0%, 50%, and 100% across the toolbar’s width without using multiple containers.
Constraints
Only CSS modifications to existing elements are allowed; you may not add HTML or JavaScript.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.