Basics of using CSS Flexbox — Part 2

Continuing with the basics of flexbox. The next thing to consider is how to handle this situation on mobile devices, because while 10 (or 12) columns might be fine on a desktop site, it’s probably not going to work on a mobile site.

Photo by Pankaj Patel on Unsplash

Let’s add a couple of media queries to the css to help handle that.

Let’s start this but switching our current css to a mobile first mentality. Mobile first means we design the css for mobile first and then use media queries to modify it for larger screens. The benefit of this is that this will make the pages load a little quicker on mobile devices.

So with that in mind, on a mobile device we want the flexbox to make each column be the full width.

.column { flex:1; min-width:100%; max-width:100%; }

24 columns designed for mobile first (100% width) with wrapping.

So that looks pretty much as though we weren’t using flexbox at all. We still are though. Now let’s add the media query for the larger screens to get our columns back.

@media only screen and (min-width: 768px) {
   .column { flex:1; min-width:10%; max-width:10%; }
}