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.<\/p>\r\n\r\n\r\n\r\n
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.<\/p> \r\n\r\n
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.<\/p>\r\n\r\n
So with flex technology, I was able to knock this out using the three CSS properties provided below:<\/p>\r\n\r\n
\r\n\r\n.blog .wrap {\r\n display: flex;\r\n flex-flow: wrap;\r\n flex-direction: column-reverse;\r\n}\r\n\r\n<\/pre>\r\n\r\nPretty 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. \r\n\r\n\r\n\r\n@media all and (max-width:800px) {\r\n\r\n blog .wrap {\r\n display: flex;\r\n flex-flow: wrap;\r\n flex-direction: column-reverse;\r\n }\r\n\r\n}\r\n\r\n<\/pre>\r\n\r\nNo fall back needed here since you are targeting mobile devices, which in my experience handles a majority of modern CSS rules.<\/p>\r\n\r\n\r\n\r\n
<\/p>\r\n","protected":false},"excerpt":{"rendered":"
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 … <\/p>\n