Should we use flex-grow and flex-shrink instead of media queries?

Question

Should we use flex-grow and flex-shrink instead of media queries?

Answer

When using flexbox for a component(s) on a web page/web app, we should definitely try to make use of these flexbox properties instead of using media queries! Flexbox is responsive by default and flex-grow/flex-shrink may be better to use as there are usually less lines of code to write, specifically when using flex-grow/flex-shrink/flex-basis - as we can use the shorthand flex property in place of these three properties. Unless we need a more specific behavior when our screens are a different width, we should try to use the properties built into flexbox.

5 Likes

I’m not sure if there is even a distinction between Flexbox and media queries. They are not the same in respect of how and why they are used. Media queries can change the behaviour of a website, including its appearence. Flexbox is a one dimensional Layout framework that you can use to align items and distribute space between and/or around them. You can use media queries and change the behavior flexbox works in a particular breakpoint but I don’t think you need to choose one over the other because they are not they are not doing the same thing.

27 Likes

What is a media query??Have we been introduced to them in the course yet?

7 Likes

Yes, some lessons back

yes, brother.
media queries are used to change the layout of
website based on different breakpoints or screen sizes,
for example, the website layout will be different based on the
viewing devices.

2 Likes

i can’t find that chapter. Can you link it?

Hi, I have linked the Media Queries chapter below:

https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-making-a-website-responsive/modules/fecp-learn-responsive-design/lessons/media-queries

4 Likes

Thank you very much. It was not in the individual lesson on CSS.

4 Likes

Both flexboxes and media queries are elements of responsive web design. So, I don’t think these concepts should be viewed as opposing concepts.

From what I’ve seen in practice, media queries are defined for breakpoints and those are where a device’s screen size usually demands a different visual appearance of the website in order to keep delivering an adequate ux. If a flexbox design lives up to those demands because all visual elements grow, shrink and wrap accordingly, so be it. But I wouldn’t rule out the use of media queries because of it as you might want to replace a navbar with a hamburger menu as the screen size shrinks etc.

18 Likes

I found your comment to be quite insightful. It should be the featured answer!

media queries is 3 lessons ahead of flex shrink on the full stack career path. I knew I haven’t seen this come up yet… but looking forward to learning about it.

7 Likes

I was confused too and started to think I was crazy :stuck_out_tongue: . Then when I skipped to the media queries lesson from the link above, in this thread, Codecademy automatically through me into the Front-End Developer path, even though I’ve been in the Full-Stack up to now.

I’m actually showing in both now on my home page. Anyway, we’re not crazy… lol

btw - hope you enjoyed the course… I’ve only just started a couple weeks ago. Great so far.

Cheers!

1 Like

Depending on the lesson plan you are on, no, it has not been shown yet.

“But I wouldn’t rule out the use of media queries because of it as you might want to replace a navbar with a hamburger menu as the screen size shrinks etc.”

Best answer.

Both flexboxes and media queries are elements of responsive web design. So, I don’t think these concepts should be viewed as opposing concepts.

1 Like