Recently, here at WDS, we started incorporating Flexbox into our projects. I wanted to share some great resources I’ve come across to get going with Flexbox and highlight some of the early first impressions and some of the struggles you might encounter along the way.
And, if you want to see just a few examples of some of the types of stuff we’ve been creating with Flexbox, be sure to check out our WebDevStudios Codepen page.
Getting Started
First, if you’re new to Flexbox, I can not recommend a better starting place than Wes Bos’ flexbox.io video tutorials. These are really great, quick videos that can easily get you up and running pretty solidly in less than a couple hours (if you watch them all). The only downfall is trying to go back and reference something is a little tricky with video. Not to worry–CSS-Tricks has you covered with this great guide to check back with when getting the lay of the land.
One of the trickiest and most difficult parts of implementing a new way of doing things is that there’s definitely going to be a bit of a learning curve. Learning while doing is the absolute best way to force yourself to learn something new, however along with that comes the “struggle bus” at times, and that’s ok–it’s common. Theoretical practice is nice, but real implementation is, well, REAL, and can be tricky sometimes.
Flexbox Hightlights
Let’s start by reviewing some of the benefits and positives to using Flexbox.
Flexbox has the ability to create a variety of different layouts and ways to order items on a page to best fill the available space. This was previously much more complicated especially when changing screen sizes and orientation.
It’s important to note that Flexbox is a module and not a single property. Some of the basic terminology can be found here from CSS-Tricks.com. This is a really good primer when you’re first trying to get started. Basically, there is a parent item, and it’s referred to as the flex-container. Then, the children of the parent container are referred to as flex-item (or items). This isn’t all that different than using Bourbon and Neat in terms of parent/child relationships, which I touched on some time ago.
Once you have a handle on that, you’re ready to start creating and laying out items–and you’ll find it easier than you have in the past! As I mentioned earlier, one of the best features is the ability to re-order flex items within a particular container, at least from my first impressions, I found this to be super easy and really helpful.
Have you ever tried to do this with previous methods, grids, or even using Bourbon’s Neat? It’s been possible, but at times more difficult than needed to make it happen, and it’s always felt, at least to me, a little unstable when previously re-ordering items (particularly within breakpoints)…that is, prior to using Flexbox. They worked, but the way it’s handled by Flexbox is much nicer and feels much more intuitive.
Flexbox Ordering
This is a super simple example, but here you can see rather than display these blocks in numerical order, we’ve put block #3 into the first position by using the order property.
Have you ever gotten mockup where perhaps the desktop view had four columns across in the footer section of a site and then when you look at the mobile version they’re completely re-ordered? This makes that a much easier task now by simply adding the order property. The lower the number, the higher priority on the item.
Flexbox Shorthand
For parent containers, the flex direction and flex wrap properties can be written our individually, or you can use the shorthand version, which is flex flow:
Flex grow, flex shrink, and flex basis (additional flex item properties) can be written out individually or simply combine all three items in the flex property on child items to make it a little more succinct.
Also, it’s good to note here: The float, clear, and vertical-align properties have no effect on flex items.
// Flex-flow combines flex-direction and flex-wrap properties // Default values are: flex-flow: row nowrap; // Flex combines flex-grow, flex-shrink, and flex-basis // Default values are: flex: 0 1 auto; // *important to note for older browser support you'll // want to add a unit value to the flex basis portion //** https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
Flexbox Vertical Centering
Vertical centering text has always been a bit of pain point for front-end developers. It seems like every time the amount of variables that can vary make the solution vary, and sadly, vertical-align middle doesn’t always seem to work as intended. With Flexbox, you can wipe away the tears from vertical centering not working out just as you intended because the solution has been simplified.
This is a great example from Philip Walton’s Solved by Flexbox site; with just a couple lines of CSS, the magic happens within the parent container (flex-container).
Flexbox Troubleshooting
This is just a little overview and highlighting some of the positives that come along with Flexbox (and there are certainly more), but along with all the positives, there are definitely some hurdles at times, common issues and things to keep in mind.
The first resource I want to point out is also from Philip Walton; it’s a good list of notes, bugs, and workarounds. If you find yourself struggling to get something working as expected (or how you thought it would when checking your work while cross browser testing), this is a community curated list that should be pretty up to date, and will help you figure out what you need to do next.
Flexbox Tips
While browser support has come along way, I don’t recommend using Flexbox without autoprefixer. This will handle vendor prefixing and support legacy browsers you may have to support. To my knowledge, it doesn’t hurt to have this in place generally speaking, with or without Flexbox in use, so if you’re not using it, definitely check it out.
In addition to using autoprefixer and referencing the flexbugs Github page, one thing to keep in mind if you don’t want to be constantly referring back to other places that I found helpful was often related to the flex-basis property. Whether on it’s own or part of the shorthand form when issues arise in older version of IE(10/11), I found adjusting this was the most commonly fix on the flex item.
Although this last point may seem obvious given the name “Flexbox,” it’s important to note that while pixel perfect layouts are certainly doable with Flexbox, it can be a bit of a challenge at times at least when getting started–especially if you have very specific layouts to work from a mobile up to desktop view. Once you get the hang of things, it’s actually not too bad, but it’s something to keep in mind again when getting started.
Additional Resources
Below is a collection of additional resources not already highlighted in this post if you want to dig in deeper. Some of the games are good if this is your first foray with Flexbox. Practice a little! I highly recommend taking a look at some of these resources for additional notes and tips:
- Sketching with CSS
- Simple Flexbox Layouts
- FleboxFroggy!
- Flexbox Defense
- Flexbox in 5
- Visual Guide to Flexbox
- More Resources
Now and Down the Road
This article is a good resource to checkout and highlights some things to think about both now and moving ahead. As with most Front-End Developer technologies, things are always changing and evolving as the web moves forward.
Have any tips you’d like to share?
Are you currently working with Flexbox? Do you have any tips, tricks, or speed bumps you’ve run into that you found helpful when working with Flexbox? If so, we’d love to hear them in the comments! If you have any recommendation or things you’d like to see in the next Flexbox post, let us know and we’ll try and cover that too.
Comments