I’m actually not very well versed with using Flex (I definitely should though of course), I really only use it when absolutely necessary – usually as a fall back plan or when I want to adjust a few elements on mobile. That’s what this post is really about – Flex and how it saved me numerous times on one (no, many) of those head scratcher projects.
Flex comes in handy when the elements you are working with are untouchable – meaning you can’t move markup around, heck you can’t even add a class to some target element. And, you’re looking to stay away from using any page specific scripts.
In my recent case, a client wanted to reverse the stacking order for the content and sidebar column on mobile screens. If you have been programming for a while you know that there’s more than one solution to solving something. But then you need to factor in the site’s overall architecture, templating system and other variables.
So with flex technology, I was able to knock this out using the three CSS properties provided below:
.blog .wrap {
display: flex;
flex-flow: wrap;
flex-direction: column-reverse;
}
Pretty sweet. The keyword here is that “column-reverse” value assigned to the flex-direction property. With this handy dandy CSS declaration, you can keep your coding to a minimum especially when wrapped in a media query.
@media all and (max-width:800px) {
blog .wrap {
display: flex;
flex-flow: wrap;
flex-direction: column-reverse;
}
}
No fall back needed here since you are targeting mobile devices, which in my experience handles a majority of modern CSS rules.