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
- Designing Layouts with Flexbox3
- Horizontal And Vertical Centering with CSS and Flexbox4
- Quantity Queries wit CSS and Flexbox5
- User Interface Modules (Dropdowns, Sticky Footers etc.)6
- Flexbox Modules for Web Apps7
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.
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
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.
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.
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.
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
flex-flow property and
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
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.
- 1 https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/
- 2 https://www.smashingmagazine.com/2016/02/design-mock-ups-need-dynamic-content-tools-plugins/
- 3 https://www.smashingmagazine.com/2015/08/flexible-future-for-web-design-with-flexbox/
- 4 https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
- 5 https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/
- 6 https://www.smashingmagazine.com/2015/11/flexbox-interfaces-tracks-case-study/
- 7 https://www.smashingmagazine.com/2015/03/harnessing-flexbox-for-todays-web-apps/
- 8 http://chriswrightdesign.com/experiments/using-flexbox-today/
- 9 https://chriswrightdesign.com/experiments/using-flexbox-today/
- 10 https://chriswrightdesign.com/experiments/using-flexbox-today/
- 11 http://flexboxfroggy.com/
- 12 https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/
- 13 https://www.smashingmagazine.com/2013/05/centering-elements-with-flexbox/#example-horizontal-and-vertical-centering-or-the-holy-grail-of-web-design
- 14 https://philipwalton.github.io/solved-by-flexbox/
- 15 https://www.smashingmagazine.com/2016/02/design-mock-ups-need-dynamic-content-tools-plugins/
- 16 http://www.heydonworks.com/article/flexbox-grid-finesse#basic-wrapping
- 17 https://www.smashingmagazine.com/2013/06/media-queries-are-not-the-answer-element-query-polyfill/#the-element-query
- 18 http://www.heydonworks.com/article/flexbox-grid-finesse#element-queries
- 19 http://www.heydonworks.com/article/flexbox-grid-finesse#dealing-with-remainders-of-1
- 20 https://www.smashingmagazine.com/2015/07/quantity-ordering-with-css/#quantity-queries
- 21 https://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries/
- 22 https://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries/
- 23 https://www.smashingmagazine.com/wp-content/uploads/2016/02/grids-opt.png
- 24 https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/
- 25 https://www.smashingmagazine.com/wp-content/uploads/2016/02/wrapping-opt.png
- 26 https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/
- 27 https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.byxqvyhah
- 28 http://www.zell-weekeat.com/star-rating
- 29 http://www.flexboxpatterns.com/home
- 30 http://madebymike.com.au/demos/flexbox-tester/
- 31 https://github.com/philipwalton/flexbugs
- 32 https://github.com/10up/flexibility
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.