Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Quick Tips The Flexbox Reading List: Techniques And Tools

Flexbox gives us a new kind of control over our layouts1, making coding challenges that were hard or impossible to solve with CSS alone straightforward and intuitive. It provides us with the means to build grids that are flexible and aware of dynamic content152, and thus, give us the freedom to focus on the creation process instead of hacking our way towards a layout.

To give you a head start into Flexbox and provide you with ideas on how to use it to master common coding challenges, we have collected tips, tricks, and tools that help you get the most out of its power already today. The list is by no means complete but includes the resources which we found helpful and useful.

Latest readings on Smashing: Link

Getting Started Link

Using Flexbox Today Link

A great primer on the power of Flexbox and how to make use of it, is Chris Wright’s article “Using Flexbox Today8.” As Chris points out, there is a distinct gap between what we build today and how we’ll approach tomorrow. So to get more people to use Flexbox today, he outlines a strategy for adding its value to your projects and provides examples of how to enhance current layouts with Flexbox, among them card layouts, split screen layouts, pinned layouts, newspaper and ad units, multi-column layouts as well as dashboards.

Flexbox in use on The Guardian’s site
Flexbox out in the wild on the Guardian’s newspaper and ad units. One of the examples in Chris Wright’s post about Flexbox9. (Image credit: Chris Wright10)

Learn Flexbox The Fun Way Link

Honestly, despite (or because of?) its grand potential, Flexbox can be quite daunting if you are just about to get started. A fun way to grasp its properties and elements is Flexbox Froggy11, a browser game that teaches you the Flexbox basics by using it to guide a little frog to its lilypad.

Practical Tips And Tricks Link

You’ve wrapped your head around the Flexbox basics 12and are ready to dive deeper? The following resources provide practical solutions for common coding challenges.

Solved By Flexbox Link

Think of all those things that CSS hackers have tried to solve for years: the Holy Grail Layout, full-width fluid input pairs, media objects that get by without any overflow, clearfixing or block formatting hacks, footers that stick to the bottom even of sparsely contented pages, vertical centering 13— well, Flexbox solves all of these, for good and without any hacks. Philipp Walton has compiled a showcase of these challenges and their Flexbox solutions14. Great to keep on hand for your next project.

Creating Finessed Grids Link

At the heart of Flexbox is its ability to produce wrappable grids that are tolerant of dynamic content152. You can use basic wrapping techniques to distribute children automatically in a grid16, and thus, cater for a decent layout no matter the number of children. Element queries17 help make your grids entirely responsive with children expanding to hit a minimal width18, and the possibility to reshuffle the elements in the grid guarantees that a grid never ends with a single element row19.

Flexbox And Quantity Queries Link

Aaron Gustafson experimented with Flexbox and quantity queries20 to come up with a flexible grid layout with visual enhancements21. In Aaron’s case, the grid layout flexes to highlight one to two of his upcoming speaking appearances and allows others to flow in at the default grid size. Also a nice idea for a portfolio page or recent blog posts, for example.

Aaron Gustafson’s flexible grid layout22
Aaron Gustafson’s flexible grid layout in action. View the large version23.

Alignment Shifting Wrapping Link

Imagine the following problem: You have a main title and a subtitle sitting on the same line. You want the main title to be left-, the subtitle right-aligned, and the subtitle should wrap under the main title when there is not enough space.

Alignment Shifting Wrapping24
More often than not, alignment issues are easy to solve with Flexbox. View the large version25.

That’s the situation Chris Coyier ran into. His alignment shifting wrapping technique26 solves the problem by giving the title a flex-container with display:flex; and the title itself flex-grow: 1;, so the subtitle is pushed to the right. And since flex-containers can wrap, it only takes a flex-wrap: wrap; to make the subtitle behave as intended on small screens. One of those moments where Flexbox excels at making something hard incredibly simple. Also applicable to other responsive design challenges.

Overriding justify-content Link

One of Flexbox’s best-kept secrets is probably how to override justify-content to position a flex-item independently along the main axis. The solution: auto margins27! They aren’t new to CSS, of course, but in combination with Flexbox they unveil an entirely new power. When applied to a flex item, the item will automatically extend its specified margin to occupy the extra space in the flex container depending on the direction in which the auto-margin is applied.

Re-Imagining UI Patterns With Flexbox Link

That the power of Flexbox goes beyond common layouting tasks, shows an experiment by Zell Liew28. He used Flexbox to re-imagine a UI pattern which you’ll find everywhere: the star rating element. His Flexbox version gets by with only 50 lines of code and five stars in SVG and was brought to life using a combination of the sibling selector ~, the flex-flow property and row-reverse. Nifty!

Flexbox Patterns29 by CJ Cenizal also shows ways of using the power of Flexbox to build UI components. It provides interactive examples and the source code you’ll need to get started with stepper inputs, tabs, form footers, centered prompts, sidebars and more.

Tools And Further Resources Link

Calculating The Width of Flex Items Link

If calculating the width of flex items gives you headaches, then Flexbox Tester30 is for you. Just enter values for flex-grow, flex-shrink and flex-basis for three flex items to see how they behave.

Dealing With Bugs And Workarounds Link

Like any technique, Flexbox isn’t free of bugs, of course. For those moments when you run into one, Flexbugs31 is bound to cater for a fix. The community-curated list of Flexbox issues is regularly updated to provide solutions and browser workarounds. If you discover a bug that’s not listed yet, you can report it via GitHub. Speaking of browser workarounds: The Flexibility polyfill32 provides a fix for older versions of Internet Explorer that don’t support Flexbox. It detects flex-affected elements on the page and restyles them accordingly in IE 8 and 9.

You have something to add to the list? Let us know about your favorite Flexbox resources in the comments section below.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Cosima is editor at Smashing since 2013. When not writing articles for the Smashing Newsletter or the ‘Quick Tips’ series, she’s probably working on a new Smashing eBook.

  1. 1

    We put out an interactive flexbox guide with practical design examples a few weeks ago: (it’s a free)

    The more we use it, the more we like it!

  2. 2

    Great article… Had fun learning with Flexbox Froggy and Flexbox tester… :)

  3. 3

    Adrian Eufracio

    February 24, 2016 11:28 pm

    I highly recommend Wes Bos’s Video Series on Flexbox.
    Makes it super easy to understand and it comes with files so you can code along.

    I also wrote a blog post on Flexbox on my blog

    • 4

      Yeap, Wes Bos course on flexbox is free, easy to understand the new concepts and complete. Best resource out there, IMHO. He didnt mention margin auto, though (I think). but using margins auto feels a bit of hack, why not to use flex shrink/grow instead?

  4. 5

    Kumar Nitesh

    March 1, 2016 7:38 pm

    Great Information Really like Felxbox Froggy


↑ Back to top