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

Daniel Kip
Daniel Kip
5,922 Points

display: flex just once is enough?

Well, regarding this video something caught my attention. Once the display is declared as flex in the first media query (769px), shouldn't I "tell it" again to my browser when it reaches 1025px?

3 Answers

William Hurst
William Hurst
23,338 Points

When you add CSS rules earlier on in the CSS document (adding the base rules such as font, colours etc.) these "base" rules are still applied within the media queries due to the "cascade". So when you set the display to flex at 769px the same display value will still be used in the media query at 1025px, just like how the base rules that have been set are still being applied when using media queries (unless you change them). The only thing you need to change is the flex properties such as flex-direction as the display is still flex.

This is my first Answer to a Question, so I'm hoping you understand my explanation.

Joseph Dalton
Joseph Dalton
12,489 Points

Hey Daniel,

I'll agree with William's answer for the most part. But I think he forgot to point out that it depends on how the media query was declared. In this case is was probably a @media (min-width: 769px), which applies the styles to everything above the 769px size, unless they are overwritten by another style in a different media query. So in a mobile-first approach, styles tend to be declared, then adjusted as the screens get larger, building and altering each other as needed. So maybe think of media queries more as alterations or edits to the initial styles, and not resets of them.

But, if the media query was something more like @media (min-width: 769px) and (max-width: 1024px), then you would be right, and over 1025px, the style would need to be re-declared, but that probably wouldn't be the best code organization if you still needed the style.

Hope that helps!

Daniel Kip
Daniel Kip
5,922 Points

I appreciate your answers William Hurst and Joseph Dalton . Just to check if I got it right, it basically means is this other example i will give you: declaring display: flex on @media (min-width: 769px) will affect all resolutions above it, therefore, no need to declare it again on greater resolutions. If it was declared ONLY @media (min-width: 1024px) lower resolutions would not be flex.

Thanks again for your time.

William Hurst
William Hurst
23,338 Points

Yes that is correct. Regarding the @media (min-width: 1024px) - If you only had @media (min-width: 769px) and not @media (min-width: 1024px) then display:flex will only work at 769px and above and remain the same at greater widths (meaning you don't have to declare it again at greater resolutions) but not be applied below 769px, the same goes for 1024px - display:flex will only be applied at 1024px and not below 1024px. However, if you declared display:flex at 769px and again at 1024px then display flex will still be applied below 1024px until the width goes below 769px as display:flex has been declared at 769px too.

Daniel Kip
Daniel Kip
5,922 Points

William Hurst, thanks a lot for confirming!