If you’re in web development, you’ve likely learned responsive design. This means learning that some responsive grids can be complex and frustrating beyond belief. Hopefully you also later learned of flexbox, which can make responsive design much, much easier. If not, you will soon.
Explaining flexbox is too big a task for this measly humble blog, so I recommend reading this or this instead. Plus Smashing Magazine’s most recent book has an excellent chapter on how great flexbox is, which I really recommend. The short version is flexbox automatically sizes elements based on a few simple parameters, which automatically change for screen sizes.
If you clicked the above links, you likely noticed how much info is crammed into them. Flexbox does have a high learning curve. That’s why this post is mainly the big reasons why flexbox is worth learning. Once you pick it up, all the time spent learning will be made up by all the time saved using flexbox for responsive grids.
- Flexbox is much simpler. Every time I changed a responsive grid I made with Neat to a flexbox one, there was at least half as much code. Flexbox is made so the media queries and breakpoints write themselves based on a few options. You set up some parameters and watch the flexbox magic happen for all screens.
- Flexbox handles unique grids better. This is best explained with an example. I had an idea for a photo gallery that highlighted some photos with a border and larger size. But keeping this effect organized and consistent across screen sizes was really complicated at first. How do you make some photos bigger than others without messing up the grid? Then I wrote some flexbox CSS and finished in ten minutes. See it now and try resizing the result!
See the Pen A Better Responsive Image Gallery With Flexbox by Maxwell Antonucci (@max1128) on CodePen.
- Flexbox has lots of layout options. The surprisingly long list includes alignment, space between items, width, and order. It offers these without making things too complicated or adding lots of code back on.
- Flexbox automatically includes margins. This is small, but anything that avoids an extra line of Sass changing the box-sizing property is welcome. It also makes controlling the layout more straightforward.
There you have the biggest benefits of flexbox! If you’re not convinced, check out the other awesome examples and get back to me. Even if it seems confusing at the start, trust me that it’s worth the effort. In my view, flexbox will only get more popular and isn’t going away.
~ Cheers, Max A