Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Flexbox Layout Building a Layout with Flexbox Building a Navigation Bar with Flexbox

Tim Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points
Posted by Tim Acker
.a{fill-rule:evenodd;}techdegree seal-36
Tim Acker
Front End Web Development Techdegree Graduate 31,247 Points

A simpler solution?

I arrived at a slightly simpler solution. I would like to know if there are any issues with doing it this way.

@media (min-width: 769px) {

  .main-nav {
    display: flex;
    justify-content: center;
  }


}

@media (min-width: 1025px) {

  .main-header {
    display: flex;
    justify-content: space-between;
  }
}

4 Answers

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

To my surprise, it does indeed appear to perform as desired. But my initial confusion is evidence that the process might not be as clear as what is shown in the video. So the video solution may have an advantage in readability and maintainability.

There will be many times where a certain effect can be achieved in multiple ways. The choice will often be matter of balancing code efficiency (compactness) with readability/maintainability. And sometimes there may not be a single clearly superior choice.

nfs
nfs
35,526 Points
nfs
nfs
35,526 Points

The one shown in the video was simple enough...

Happy Coding!!!

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

I would not expect the same behavior from this code.

Did you try it across the breakpoints? I would not expect to see the single-row behavior with this code.

Also, the original code set both main-nav and main-header to be flex items at the smaller breakpoint, but this code only sets main-nav for those widths.

Note: You can make it possible for folks to try out your code if you make a snapshot of your workspace and post the link to it here.

Stefano Locati
Stefano Locati
8,715 Points
Stefano Locati
Stefano Locati
8,715 Points

That's exactly the same solution I came up with when I tried myself pausing the video before seeing the teacher's solution and it does indeed work in the same way across all breakpoints.