Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Timothy Acker
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Timothy 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
210,935 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.

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

Happy Coding!!!

Steven Parker
Steven Parker
210,935 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,127 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.