CSS Flexbox - Align Elements Using the justify-content Property

CSS Flexbox - Align Elements Using the justify-content Property
0.0 0


This is just a suggestion… I know part of learning is looking at the code to understand what we are seeing in the viewport but sometimes the initial impression is what the viewport displays. For example, in this challenge (title reference) the challenge opens and we see 3 color rectangles: blue, orange, and gray. My initial thought when seeing the display and not looking at the code, was that the final gray box had stretched to fill the rest of the space.

We are dealing with justify-content and how to deal with the space between. I thought what was going to happen was the gray box would go to the size of the others and we’d get white space (I started with space-around to see). The result was the gray “box” being split into 3rds. I was like “huh?”. Now, of course, as soon as I really looked at the code I realized that there were only 2 boxes and the gray was the background color of the container.

So, while it was a good reminder to make sure we are looking at the code, maybe it would just make more sense to keep stuff like this with a white background. Main reason, the gray is annoying. Its much more pleasant to see white when understanding this flex justify-content.

Just a thought. Love the site.

PS - the thought that the gray box was an item was reinforced with the link to the graphic that shows 2 items and one being stretched.

PPS - In the next similar challenge, I see how the gray background might be more useful (align-items) but we could achieve the same understanding with a border for the container. But now Im just being picky and should just delete this entire post.