Flexbox vs Media Queries

[UpstateLeafPeeper]

Do people still use media queries?

From what I have read so far, it was my impression that Flexbox is supposed to solve the problem of needing media queries.

Is that true or not?

[Gandalf]

Not.

[SamA74]

It can reduce the number of queries you need, but will not necessarily remove the need entirely.
Its purpose is not to eradicate queries, it’s just another tool in the box that may or may not work alongside queries.

[UpstateLeafPeeper]

So for responsive websites you should be using both Flexbox and media queries?

Could you just use media queries with no Flexbox?

[SamA74]

Use whatever tool suits the design.

[RyanReese]

@UpstateLeafPeeper

just use media queries with no Flexbox?

They are not mutually exclusive.

Media queries should probably be on all sites. Flexbox is a layout tool, basically. You have that, CSS tables, float, grid, etc. You lay out your page depending on what’s best (e.g. flexbox) and media queries to help it flow naturally as you resize the page smaller.

[UpstateLeafPeeper]

@RyanReese

They are not mutually exclusive.

Media queries should probably be on all sites. Flexbox is a layout tool, basically. You have that, CSS tables, float, grid, etc. You lay out your page depending on what’s best (e.g. flexbox) and media queries to help it flow naturally as you resize the page smaller.

Would you say that Flexbox is more for aligning items?

I saw in the MDN guides how using Flexbox, “Flex-items” will wrap and so that sorta seemed like it made things responsive.

i guess media queries are purely for handling different sized screens, right?

[RyanReese]

@UpstateLeafPeeper

Would you say that Flexbox is more for aligning items?

I saw in the MDN guides how using Flexbox, “Flex-items” will wrap and so that sorta seemed like it made things responsive.

Flexbox makes it easy to align elements, whereas something like “floating”, does not. It just depends on what specific design you have to code, and what’s the best way to achieve that design. Flexbox is very versatile so you could do almost everything with flexbox, but it’s not suitable for every situation. It’s a tool in your toolbox.

Can you build a house with a hammer only? Maybe; but a screwdriver might work just as well for some areas.

@UpstateLeafPeeper

i guess media queries are purely for handling different sized screens, right?

If you want to get technical, media queries can do more than target different screen sizes, but for this narrowly-scoped question, yes, you can think of it like that. When you have a more firm grasp on media queries, you can explore what else media queries can handle (like print).

[UpstateLeafPeeper]

@RyanReese,

So if I want to get into responsive design, should I focus more on mastering media queries?

I did read all of the guides in MDN for Flexbox, and most of it made sense, but like most things in life, it’s hard to just read theory and then successfully apply it.

I’m just trying to get ready for “phase 2” where I make my website responsive - even though I have a long ways to go yet on “phase 1”!

[RyanReese]

@UpstateLeafPeeper

So if I want to get into responsive design, should I focus more on mastering media queries?

There’s not much to “master”. All you need to know is how to write media queries for what you want (e.g. at 800px and up, I need to do xyz). It’s not complicated enough to even bother “mastering”. Learn how a media query is set up, and try to write your own in codepen. Resize your browser and see if what you did works. Media queries is probably one of the more simplistic aspects of CSS (not to be confused with responsive design!)

[UpstateLeafPeeper]

@RyanReese

There’s not much to “master”. All you need to know is how to write media queries for what you want (e.g. at 800px and up, I need to do xyz). It’s not complicated enough to even bother “mastering”. Learn how a media query is set up, and try to write your own in codepen. Resize your browser and see if what you did works.

Yeah, but you’re an expert and I’m not!

@RyanReese

Media queries is probably one of the more simplistic aspects of CSS (not to be confused with responsive design!)

So what other aspects are there to responsive design?

I thought media queries basic were responsive design?

[RyanReese]

@UpstateLeafPeeper

So what other aspects are there to responsive design?

I thought media queries basic were responsive design?

I just didn’t want you thinking that media queries ONLY === ALL of responsive design. You’re starting to overthink this .

[DaveMaxwell]

If you want some good css/design tutorials, check out this guys youtube channel: https://www.youtube.com/kevinpowell

He spends quite a bit on responsive design, flexbox and other topics.

[John_Betong]

@UpstateLeafPeeper

So for responsive websites you should be using both Flexbox and media queries?

Could you just use media queries with no Flexbox?

As mentioned for responsive web sites both, neither or none of Flexbox or Media Queries should be used.

I would be tempted to use none and make the site modular (so it can be easily changed later). After the site is up, running and making money then experiment with different tools.

AMP is a Google sponsored, cutting edge and responsive tool (that uses neither Flex or Media Queries). Validated mobile sites are given preference in SEO and they even throw in a free CDN.

Options and goal posts are moving on a daily basis but they all use basic HTML and CSS.

[TechnoBear]

Off Topic:

@John_Betong

Validated mobile sites are given preference in SEO

Just to clarify that:

Q: What is the impact of AMP on ranking?

AMP itself is not a ranking signal. Google Search is using mobile speed as a ranking factor, but sites can be fast by using a variety of techniques, including AMP. That is, Google Search applies the same standard to all pages, regardless of the technology used to build the page.

https://support.google.com/webmasters/thread/2097038?hl=en