Menu Search
Jump to the content X X
SmashingConf London Avatar

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. our upcoming SmashingConf London, dedicated to all things web performance.

Harnessing Flexbox For Today’s Web Apps

Although the syntax might be initially confounding, flexbox1 lives up to its name. It creates intelligent boxes that are stretchable, squeezable and capable of changing visual order. It provides simple solutions to layout paradigms that CSS has always struggled with: vertical centering and equal heights. Flex items are truly accommodating and a pleasure to work with.

Chris Coyier sums up flexbox2 nicely:

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow.

Flexbox truly shines with HTML5 web applications. Most web apps consist of a series of modular, reusable components. You can use flexbox for those bits of layout that induce headaches and that depend on brittle CSS hacks to work. Small modules work very well with flexbox, and you can use floats and other tools for broader sections of the layout.

Further Reading on SmashingMag: Link

I’m using flexbox in a big way for a web app that I’m currently working on, and I am very pleased with how it handles layout and box calculations intelligently. I’d like to share some demos and examples of this — any feedback would be appreciated.

This article presumes that you have working knowledge of flexbox. A wealth of information is available online. Keep in mind that the specification has undergone several changes over the years.

There are three versions of flexbox, largely differentiated by the syntax changes between 2009 and 2012:

  1. The new syntax is in sync with the current specification (e.g. display: flex).
  2. The tweener syntax is an unofficial syntax from 2012, adopted only by IE 10 (e.g. display: -ms-flexbox).
  3. The old syntax is from 2009 (e.g. display: box).

Browser Support Link

Let’s look in detail at which browsers support which syntax, courtesy of Can I Use7.

Browsers That Support the New Syntax Link


  • Unprefixed: Chrome 29+, Firefox 28+, IE 11+, Opera 17+
  • Prefixed: -webkit- prefix for Chrome 21+, Safari 6.1+, Opera 15+

Note: Old versions of Firefox (22 to 27) support the new syntax minus the flex-wrap and flex-flow properties. Opera (12.1+ and 17+) supports flexbox without vendor prefixes, but intermediate versions 15 and 16 require vendor prefixes.


  • Unprefixed: Android 4.4+, Opera mobile 12.1+, BlackBerry 10+, Chrome for Android 39+, Firefox for Android 33+, IE 11+ mobile
  • Prefixed: -webkit- prefix for iOS 7.1+

Almost all of the browsers mentioned above have old versions that support a prior variant of flexbox, minus some properties such as flex-wrap and flex-flow (the latter of which is a shorthand for the flex-direction and flex-wrap properties). By avoiding flex-wrap (and, therefore, using flexbox in multi-line layouts), we get amazing browser support, merging the old and current syntax.

Browsers That Support the Tweener Syntax Link

Desktop and touch: IE 10 (with -ms- vendor prefix)

Browsers That Support the Old Syntax Link

All of these desktop and touch browsers require the -webkit- vendor prefix (except for Firefox, which needs the -moz- prefix).

Desktop: Firefox 2 – 21, Chrome 4 – 20, Safari 3.1 – 6

Touch: Android 2.1 – 4.3, iOS 3.2 – 6.1, UC browser 9.9 on Android, BlackBerry 7

For modern browsers that auto-update (i.e. desktop Chrome, Firefox, IE and Opera), the new syntax works out of the box.

Browsers That Don’t Support Flexbox Link

Desktop: Old versions of IE (9) and Opera (12)

Touch: Opera Mini

If you’re getting intimidated by the number of vendor prefixes and changes in syntax, have a look at Chris Coyier’s recommendation8.

You can also use the following tools to get the best browser support via vendor prefixes:

  • Autoprefixer9
    With this general-purpose tool for vendor prefixing, you write the CSS or use a preprocessor, and it does what’s needed.
  • Sass flexbox mixins10
  • Less
    The LESS mixin comes in two flavors: with11 and without12 the tweener syntax for IE 10.

I would recommend Autoprefixer from among these. I haven’t experimented with the other preprocessor-specific solutions and welcome feedback if you have. Note that if you’re using a mixin with a helper library (such as Bourbon or Compass for Sass, Nib for Stylus or LESS Hat for LESS), it comes built in with vendor-prefix support for flexbox.

With a tool like Autoprefixer, you actually get great support across the board for flexbox, save for IE 9 and Opera Mini. Of course, you’ll need to thoroughly test your app across all browsers to make sure that the different syntaxes hold up.

Let’s look at a few good use cases for flexbox with web app modules.

1. Unknown Number Of Children Within A Parent Link

Use case: My app has search filters. The number of search filters depends on whether a user is signed in. Anonymous users see two filters (“Popular” and “Latest”), while signed-in users see four (“Starred” and “Favorites”, additionally).

Issue: I’d like the styling to accommodate both options, without any change to the CSS.

Discussion: You’d generally have an if statement in your template to handle the state for signed-in users. If you were using floats for the layout, you’d have to set a width of 50% for the filters for anonymous users and a width of 25% for the filters for signed-in users.

Solution: With flexbox, you can just make the parent a flex container by declaring display: flex and give the children the property of flex and a value of 1, which would make each of the children take up equal widths inside their parent. So, the CSS would remain the same no matter the view. Remember that the flex property is a shorthand for flex-grow, flex-shrink and flex-basis13.


See the Pen Flexbox: Parents with an unknown number of children1714 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Parents with an unknown number of children1714 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

2. Inputs With Icons Link

Use case: I wish to add meaningful icons to my form inputs.

Issue: I want an elegant, flexible solution that works without having to declare unnecessary heights and widths on the elements.

Discussion: This one’s a classic problem. Different front-end frameworks approach this differently, generally using display: table-cell or absolute positioning.

Solution: Here’s the flexbox way. All we need to do is wrap the input and the icon besides it in a parent with display: flex. Then, we apply flex: 1 to the input, so that it takes up the remaining space of the parent, minus the width of the icon.

Demo (using Font Awesome font icons via the CDN for convenience):

See the Pen Flexbox: Inputs with icons2320 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Inputs with icons2320 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

3. Visual Order Link

Flexbox can be used to change the visual order of a document, leaving speech order and navigation intact26 according to the document’s source order. Our job as developers is to responsibly use the immense power of flexbox’s ordering mechanisms.

In fact, we can structure our documents with a source order that is appropriate to assistive technologies such as screen readers (for example, putting the sidebar before the main content in the source order), and use flexbox to simply alter the visual order for those who enjoy the benefits of a graphical user interface (by placing the sidebar on the right of the main content via the order or flex-direction property). Let’s look at this in detail.

A. Visual Order Independence With Flex-Direction Link

Use case: I have a sidebar positioned to the right of the main content section. On small screens, I want the sidebar to be at the top of the main content, reversing the order.

Issue: I don’t want to use JavaScript or a CSS hack to change the visual order.

Discussion: Flexbox is agnostic about the order in a layout. This makes it a miraculous tool for responsive layouts. We can do this in two ways: using the flex-direction property or the order property. Let’s look at the first option here.

Solution: Let’s build the layout with the sidebar as the first section in our markup. This is logical for two reasons: It adheres to the principle of a mobile-first layout, and it is beneficial to screen readers because the sidebar links are first in the source order. Let’s declare flex-direction: column on the parent (because row is the default). In our media query for large screens, we’ll change flex-direction to row-reverse, which solves our issue.

As a bonus, we’ll throw in a fixed-width sidebar (which is always 180 pixels on large screens and full width on mobile).


See the Pen Flexbox: Sidebar with source order independence using flex-direction3027 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Sidebar with source order independence using flex-direction3027 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

B. Visual Order Independence With the Order Property Link

Our use case and issue are the same as in the example above.

Discussion: The order property provides more fine-grained control over the visual order than flex-direction.

Solution: We’ll declare flex-direction: column on the parent to stack both the columns on mobile. Then, on a min-width media query, we’ll change the flex-direction to row, which will show the sidebar on the left and the main content on the right. To reverse the order, we simply declare order: 1 on the main content and order: 2 on the sidebar!


See the Pen Flexbox: Sidebar with source order independence using order3633 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Sidebar with source order independence using order3633 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

C. Toggling Ascending and Descending Order Link

Use case: I want to show a list of the five highest-paid actors in Hollywood in 2013, allowing their order to be toggled.

Issue: I want to do this in pure CSS and I can’t explain why, but I’m not sure it’s even possible.

Discussion: This is a simple no-JavaScript demo to show how powerful flexbox can be. Perhaps a bit impractical and crazy, but let’s see if there’s a way.

Solution: We’ll add a checkbox input with a label, which we’ll use to toggle the order from lowest to highest. Below this, we’ll add a list of the actors. Using the :checked CSS pseudo-class selector, we select the immediate ul sibling of the checkbox in order to reverse the direction of the unordered list’s items (by using flex-direction: column-reverse). It’s weird but it works perfectly, unless you’re using a screen reader or the keyboard for navigation. In the demo below, check the box and use the keyboard to navigate to see the implications of this. The specification mentions that the order property affects neither tabindex nor non-visual media such as speech.39 Therefore, I wouldn’t recommend this solution for a real-world project. Perhaps it would come in handy in a quick prototype.

Note: Firefox has a bug40 in its current version (version 34 on Ubuntu and Mac OS X, version 33 on Windows) that results in the tabindex complying with the flex order and not the source order. You can look at the test cases41 for the CSS Accessibility Community Group.


See the Pen Flexbox: Toggling a list’s order4542 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Toggling a list’s order4542 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

4. The Comment Module Link

Use case: I have a typical comment module, with an image to the left and content on the right. The image avatar is always the same width and height (i.e. it’s not responsive).

Issue: I’m using flexbox, but the content overlaps the image:


If you set max-width to 100% and height to auto on the image, you will end up with the following:


Discussion: This example is similar to the “Inputs with icons” demo. However, we can use it to discuss the flex-shrink property, which is very handy in some cases.

Solution: Apply display: flex to the parent wrapper. You will notice that the text overlays the avatar image (or that the avatar image is very small, as in the image above). To overcome this, you can declare flex-shrink: 0 on the image, which ensures that it will not shrink to accommodate the width of other flex items. The alternative is to apply the flex: 1 shorthand to the comment text. In this case, you wouldn’t need flex-shrink: 0 on the avatar. In general, the specification recommends the flex shorthand method48, but it’s good to know about the flex-shrink standalone property as well.


See the Pen Comments module with flexbox5249 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Comments module with flexbox5249 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

5. Complex Menus Link

Use case: My app has a menu that includes a search and sort widget. It’s a mix of buttons, inputs, icons and text.

Issue: I’m worried about the layout breaking across different screen sizes.

Discussion: This is a perfect use case for flexbox. We have some items with a fixed width (although we don’t need to declare these widths) and other items that need to fill up the rest of the screen’s width.

Solution: We can use flexbox to get vertical centering and a flexible search-and-sort module with relatively little code.

Demo (using Font Awesome via the CDN for convenience):

See the Pen Flexbox demo: Search and filter5855 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox demo: Search and filter5855 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

6. Cards Link

Use case: I’m creating a card module for my app, based on the card component in Google’s material design documentation61. The cards will stack on mobile.

Issue: On large screens, I want the cards to be inline. The height of cards in a line should be the same, although the markup won’t include rows that wrap sets of cards. The “See More” button should always be positioned at the bottom of the card.

Discussion: We can look at additional properties in the flexbox module, such as margin: auto to intelligently handle spacing.

Solution: Flexbox provides an incredible solution to a mammoth CSS issue: equal heights. In fact, flexbox is so flexible that it allows cards in a row to be of equal heights, even though there are no wrapper row divs around a set of cards. It also allows the “See More” buttons to appear as if they are absolutely positioned at the bottom of the card, using a nifty margin: auto trick.

Demo (using the flex-wrap property, which does not work in some older browsers):

See the Pen Flexbox: Card module6562 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

See the Pen Flexbox: Card module6562 by Karen Menezes (@imohkay66635956535046433734312824211815) on CodePen67646057545147443835322925221916.

Conclusion Link

Flexbox could be the perfect fit for a hybrid web app whose target audience is on smartphones with the latest browsers. In fact, some popular front-end frameworks use flexbox, including ZURB’s Foundation for Apps68 (see also GitHub page69) and Ionic70.

If your app requires only modern browser support, welcome aboard! Using a tool like Autoprefixer eases the transition into the world of flexbox, with its multiple versions and syntax soup. While flexbox pairs well with floats, it can also replace it and do things that no other layouting model currently can, including inline blocks, table displays and absolute positioning. The “CSS Grid Layout Module71” is intended to replace workarounds and hacks such as floats, but it’s at a nascent stage, with poor browser support72. Some day in the future, I dare to dream that CSS grids and flexbox will be all we use to build intuitive user interfaces, because they play well together.

It takes a while to have your “Aha!” moment with flexbox, because it involves unlearning what you already know about CSS layouting. Once you speak the flexbox language fluently, your process of designing responsive apps will become effortless and your style sheets will get leaner.

  • Flexbox73,” Sara Soueidan, Codrops
    This useful CSS reference guide includes a comprehensive documentation on all things flexbox.
  • Designing CSS Layouts With Flexbox Is as Easy as Pie74,” David Storey, Smashing Magazine
    This in-depth article provides great solutions using flexbox for real-world CSS problems. It includes tables that map the differences between the old and new specifications.
  • A Complete Guide to Flexbox75,” Chris Coyier
    This valuable article on CSS-Tricks lists the properties related to flex containers (i.e. parents) and flex items (i.e. children) side by side. It’s one of the best references for working on a layout that incorporates flexbox.
  • Flexbox Adventures76,” Chris Wright
    This thorough article analyzes the flex-grow and flex-shrink properties, information that is hard to find online. Chris Wright provides helpful examples and has a cautionary view of flexbox, suggesting progressive enhancement for small UI components.
  • Are We Ready to Use Flexbox?77,” Nick Salloum, SitePoint
    This beginner’s introduction to flexbox also covers possible solutions to the profusion of vendor prefixes for all versions of the syntax.
  • Flexy Boxes78
    This “flexbox playground and code generator” covers all of the flexbox properties, with all versions of the syntax.
  • Flexbox Nav Bar With Fixed, Variable, and Take-Up-The-Rest Elements79,” Chris Coyier
    This entire article is devoted to the traditional fixed-plus-fluid CSS layouting nightmare — in this case, for a navigation bar. It reiterates how flexbox trumps all other layouting methods.
  • Solved by flexbox80,” Philip Walton
    Philip Walton makes a compelling case for using flexbox, with demos for grids, sticky footers, the media object and more.
  • Flexbugs81,” Philip Walton
    Github repo by Philip Walton for cross browser flexbox bugs and workarounds
  • Using CSS Flexible Boxes82,” Mozilla Developer Network
    This dives into the details while covering the edge cases and quirks of flexbox. You’ll find the so-called Holy Grail layout done in flexbox.
  • The Ultimate Flexbox Cheat Sheet83
    Highly recommended, and written for humans.
  • A Visual Guide to CSS3 Flexbox Properties84,” Dimitar Stojanov
    As the name indicates, this flexbox guide provides a quick visual reference, eliminating the need for lengthy explanations. Equally useful for beginners as well as advanced users, who need a handy resource while building flexbox intensive layouts.

(ds, il, al)

Front page image credits: “Introducing Flexbox Fridays85” by Joni Trythall.

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
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85

↑ Back to top Tweet itShare on Facebook

Karen Menezes works towards an open, adaptive web that is accessible to all. She has an inexplicable love for CSS and responsive user interfaces. In her downtime, she loves urban gardening, dancing, cooking and filing CSS browser bugs. You can connect with her here.

  1. 1

    bob marteal

    March 2, 2015 5:42 pm

    Super discussion of browser support, and (some) real-world use cases. Thanks for the thorough write-up. Hoping to incorporate some flexbox into new projects, especially menus.

  2. 2

    Jeremy Keith

    March 2, 2015 5:46 pm

    This is a wonderful article, Karen! Those demos are terrific.

  3. 3

    Greg Whitworth

    March 2, 2015 5:57 pm

    There are numerous interop issues with flexbox, so if you hit one – make sure to check this github repo for workarounds and if you don’t find one – make sure to file a new one

    • 4

      Karen Menezes

      March 4, 2015 5:23 am

      Thanks Greg. Philip Walton’s repo has been linked to, in the helpful resources section at the bottom of the article. Because of weird edge cases with flexbox and quirks with different browsers, this one can be a life-saver!

  4. 5

    Really great article!! I’ve been using Flexbox when project allows me, hopefully I will be using a lot more in the future.

    May I add this to the list of useful resources, from the beautiful CSS reference by Codrops:

    • 6

      Karen Menezes

      March 6, 2015 2:55 am

      Thanks Mirko! That incredibly helpful link has been added to the list of resources at the end of the article :)

  5. 7

    Waiting for a long time for such an article. Thanks a lot for sharing!

  6. 8

    Semantic markup would have made this article a recommendation for future developers. This way, I hope everyone takes the codepens with a grain of salt or two.

    Still: thanks for this walkthrough, Karen!

    • 9

      Karen Menezes

      March 5, 2015 6:03 am

      Hey Skythe! Do you feel that semantic tags are missing in the codepens? If you could elaborate, I would be happy to update them with the relevant tags or missing semantic information.

  7. 10

    Kevin Lorenz

    March 3, 2015 6:28 pm

    Thanks for this huge amount of “real life” examples. It gives a nice idea about when to use flex box wisely. As we did the new switching the order of boxes (on the main page) between small and larger viewports was the first “yeah this is perfect for Flexbox” moment for myself ;)

    • 11

      Karen Menezes

      March 5, 2015 6:12 am

      Hey Kevin, seems to have a vibrant community around it. I’m going to look into it more this week :)
      One thing I noticed on the site: for a couple of the sections with flexbox, you could have alternatively used flex: 2 and flex: 1, to get containers that are 2/3rds and 1/3rd of the width of the parent containers (instead of declaring widths in percentages). But I presume you were using the values of the existing grid on the site. It’s great to see flexbox creeping into real world applications and sites!

  8. 12

    Great Article, just one thing:

    In Section 3c you have a “ul class=list-ordered”

    You know, there´s an element for that, called ol ;)
    ol ist not just for “numbered lists” but for every list that has a meaningful order, which is the case in your example

    • 13

      Karen Menezes

      March 5, 2015 5:56 am

      Thanks Thomas! Good catch. I’ve updated the CodePen to reflect to the change :)

  9. 14

    Could you please clarify the reasoning behind the statement “it is beneficial to screen readers because the sidebar links are first in the source order”?

    From what I understand, screen readers would be better served by putting content higher in the source order I’m not aware of anyone who visits a page for the express purpose of reading sidebar links (which are designed to take visitors away from the content they browsed to) at the expense of the primary content – I assume people who use screen readers visit pages for content, not for sidebars as well.

  10. 15

    Flexbox is great and I use it on all my pages. Just a note: Flexbox does work in IE 11 but if you nest flex boxes prepare to be disappointed since this behavior breaks IE 11. Here is a lengthy discussion over it

  11. 16

    Great article & nice work.

  12. 17

    Alex Coleman

    March 11, 2015 4:52 pm

    I can’t wait for this to be universally adopted. I was *just* thinking that one of the few things I still have to hack together design-wise — using JS instead of just native CSS — is height auto-fills.

    CSS has come a long way, in terms of being able to control layouts. It’ll be so nice when Flexbox is ubiquitous, as I think will wrap up most of the remaining shortcomings of CSS (i.e. design implementations that still need some JS in order to function properly, as of right now).

    • 18

      Karen Menezes

      March 11, 2015 5:57 pm

      Hey Alex… Yes the equal height column issue has always been one of the pain points of CSS. I still see Flexbox as a welcome addition to the CSS layout toolkit, although not necessarily replacing other methods for broader layout chunks. My motto is to use Flexbox when pure CSS fails and one has to incorporate JS for styling. Fingers crossed for the grid layout module!

  13. 19

    Typically poor article for this site.
    Takes ages to get to the point, and when it does, it’s full of false premise and weak code samples.
    Another fine day in the land of ignorance.

  14. 20


    March 30, 2015 5:57 am

    Opera Mini supports Flexbox now. :)

  15. 21

    Nice article Karen.
    I wrote a visual guide about flexbox myself. I think it would be handy to include it in your helpful links and resources section. Here’s the article

    • 22

      Karen Menezes

      June 8, 2015 6:22 am

      Hey Dimitar, I had actually come across your article a few weeks ago, and it’s very thorough and will benefit many flexbox users. I’ve added it as the last item in the list of resources :)


↑ Back to top