Menu Search
Jump to the content X X
Smashing Conf New York

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.

Flexbox For Interfaces All The Way: Tracks Case Study

The days of floats and margin trickery are finally behind us, as CSS furnishes developers with new and improved properties perfect for those delicate layouts. Layout features such as vertical alignment, evenly distributed spacing, source-order control and other patterns such as “sticky” footers are quite effortless to achieve with flexbox1.

In this article, we’ll discuss layout patterns well suited to flexbox, using the interface from the Tracks2 application, which also takes advantage of atomic design principles. I’ll share how flexbox proved useful and note the pitfalls of pairing it with particular layout patterns. We’ll look at those patterns that caused concern, provide suggestions for fallbacks and share additional tactics to start using this CSS property immediately.

Flexy Atomic Components Link

The approach to Tracks’ interface started with each piece being investigated as an isolated case, using the principles outlined by Brad Frost3. There are also documented bits of development and integration on Dribbble4 for an insider’s view.

The philosophy of atomic design can be thought of as small LEGO-like pieces constructed together to form a larger distinctive part of an interface. Scientific terms such as organism, atom and molecule are used to enable developers to categorize pieces of the interface in order to gain a deeper understanding of each part of the whole. This type of categorization creates an opportunity for the identification of these patterns and prevents outside influences such as grids, colors, and spacing from disrupting the goal, which is to identify patterns. Building from a microscopic level allows for a wider distribution of these parts throughout the interface.

Figure 15Figure 1. These application cards used to display data were constructed using atomic design principles. Can you guess which parts use flexbox? (View large version6)

If you’d like to dive deeper into the theory of atomic design, read Brad’s post7, which discusses his philosophy in more detail. I also suggest checking out his book on the subject8.

Figure 29Figure 2. The primary interface of the Tracks application, which takes full advantage of flexbox and atomic design. (View large version10)

The interface designs were conveyed as a set of InVision11 comps, documenting the flow and UI. During the initial audit of the interface, I began determining regions where flexbox would be beneficial. I also elected to use flexbox for page layouts using patterns such as the well-known “sidebar to the left, main content to the right” pattern, which is most often implemented with floats.

One welcome aspect of the Tracks redesign was that the project’s scope required Internet Explorer (IE) 10+, Android 4.1+ and iOS 7+. This was good news because they have great support for flexbox12, with the appropriate prefixes. Even though support is far more stable these days, operating systems prior to, say, Android 4.1 require fallbacks. What would a fallback look like in a case where support doesn’t exist? Developers using Modernizr can target those browsers using the .no-flexbox class and serve a more stable supported layout system (alternatively you could use CSS feature queries with @supports13 which is well supported, too. —Ed.). For example:

<ul class="flexbox-target">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>
html.flexbox ul.flexbox-target,
html.no-js ul.flexbox-target {
  display: flex;
  flex-direction: row;
}

html.no-flexbox ul.flexbox-target li,
html.no-js ul.flexbox-target li {
  display: inline-block; /* Could also use a float-positioned-layout system instead */
}

Where flexbox support isn’t quite right, we’ll go ahead and use display: inline-block for the layout fallback. We’ll also add a no-js to the declaration should JavaScript fail. The cascading nature of CSS will be in place if flexbox isn’t supported, even with JavaScript off or loading failures. Flexbox can co-exist with float and display: table and relative positioning, and browsers supporting flexbox will prioritize flexbox over other definitions, while browsers not supporting flexbox will ignore flexbox properties and gracefully fall back to good ol’ CSS layout mechanisms.

As with everything, the tough choices will depend on the project’s scope, analytics and budget. My golden rule is to always make the choice that makes the most sense for the project.

Inline Patterns Link

Navigational components proved to be extremely valuable with flexbox, not only for easing implementation, but also for shortening development sessions. Inline patterns that were known to consume a great deal of developers’ time can now happen in minutes with flexbox. If you’ve had the pleasure of developing with this kind of pattern prior to IE 9, then you’ll know the frustration.

Figure 314Figure 3. This admin navigation uses an inline layout pattern, with navigational items centered vertically. (View large version15)

The markup pattern for the admin navigation consists of a nav tag wrapping a series of anchors. Here’s an example of this pattern in HTML:

<header role="banner">
  <nav role="navigation">
    <a href="pipeline.html">Back to pipeline</a>
    <a href="account.html">Account</a>
    <a href="users.html">Users</a>
    <a href="export.html">Export</a>
  </nav>
</header>

And here are the related styles:

nav[role="navigation"] {
  display: flex;
  align-items: center; /* Center navigation items vertically */
}

nav[role="navigation"] a {
  display: inline-block; /* To avoid layout issues for inline elements with the order property in IE 10 */
}

nav[role="navigation"] a[href="pipeline.html"] {
  flex: 1;
}

The CSS required is just as minimal as the markup. Note the inline-block value given to anchors. This declaration solves any future headaches in IE 10 if you were to change the sequence of elements with the order property. It was also discovered that any padding or margin given to direct children of a flex container defined with the flex property causes layout issues in IE 10. A good idea is to ABC (always be checking) across browsers and platforms.

Figure 416Figure 4. This header navigation pattern with a centered logo is often seen on the web and is flexbox-approved. (View large version17)

The common inline pattern above is typically implemented with non-semantic markup. It no longer requires this kind of hackery now that flexbox is an option.

The layout consists of a collection of menu items to the left, a centrally positioned logo and additional items to the right. The markup for this pattern is as follows:

<header class="pipeline-header" role="banner">
  <a href="pipeline.html" class="pipeline-logo">… </a>

  <nav class="pipeline-nav" role="navigation">…</nav>

  <form class="pipeline-search" role="form">…</form>

  <a href="#menu">…</a>
</header>

Flexbox can alleviate the need for HTML hackery and can maintain semantics, as the markup demonstrates. Maintaining semantics is important because the HTML will have a higher chance of being reusable in the future, among many other reasons beyond the scope of this discussion.

Before flexbox existed, developers applied approaches such as display: inline-block and even float: left to achieve inline layouts. Now that flexbox is a viable option, developers are no longer forced to follow bad practices for the sake of aesthetics. The CSS required is not as brief as the admin navigation pattern in figure 3, but it’s still faster to implement than the methods mentioned earlier.

.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-header > a {
  display: inline-block; /* IE 10 doesn't recognize order, so we do this to avoid odd layouts there. */
}

.pipeline-logo {
  flex: 1;
  order: 2;
  text-align: center;
}

.pipeline-nav {
  flex: 1.25;
  order: 1;
}

.pipeline-search {
  flex: 1;
  order: 3;
}

a[href="#menu"] {
  order: 4;
}

When using flexbox with the pattern in figure 3, remember that the source’s sequence can be changed. If the header’s logo requires a shift in position, doing so is painless with the order property. Be mindful that source order is always important for accessibility and somewhat controversial when it comes to flexbox; especially with varying accessibility implementations18 across browsers. All browsers and screen readers use the source code’s order, not the visual order determined by CSS, for keyboard navigation.

Figure 519Figure 5. The normal written flow in the markup and rendered in the browser (left), and the sequence changed with flexbox without adjusting the markup (right). (View large version20)

The code below is for the layout above. The markup is never altered to change the order of appearance.

<div class="container">
  <header role="banner"></header>
  <main role="main"></main>
  <footer role="contentinfo"></footer>
</div>

Here is the CSS used to change the order for the diagram on the right in figure 5.

.container {
  display: flex;
  flex-direction: columns; /* row is the default value */
}

header {
  order: 2;
}

main {
  order: 3;
}

footer {
  order: 1;
}

This type of layout isn’t just for navigation either. You might have seen the pattern in footers as well.

Figure 621Figure 6. The same pattern we’ve seen used time and again for navigation is used here for the footer. (View large version22)

When using this pattern, consider how the content might fill the container and consume space. Should the content grow from the center out? What if the content pushed downward? How would that affect other items in the layout? Ask these questions in every project before proceeding with implementation. Consideration for keyboard navigation order, as mentioned, is just as important to end users.

Inline Form Inputs Link

Forms can be a nightmare for developers, especially when they’re tightly coupled to an intricate grid structure made in Photoshop. The “inline label” pattern, as I’ll refer to it, is as much a staple in our industry as the Fender Stratocaster is to rock music.

Figure 723Figure 7. Inline labels and inputs are another great place to use flexbox. But be careful with how the label text wraps or pushes according to the text’s length. (View large version24)

As mentioned in the previous section, decide how your content will flow and occupy the space of its container when the browser resizes or when dynamic content is inserted.

Figure 825Figure 8. Decide how the content will expand. On the left, a table display is vertically aligned to the middle. On the right, flexbox aligns items to the center. (View large version26)

These screenshots clearly indicate the faults flexbox can present with dynamic or lengthy content. The effect in the image on the right is what I call a “center push,” meaning the content pushes from the center outwards along the x and y axis.

Here’s the markup for the inline label pattern in figure 8.

<div class="form-group">
  <label>…</label>
  <select>…</select>
</div>

The solution to the problem in this case is to use a table display to better control long text. This allow content to flow downwards, instead of push from the center out.

.form-group {
  display: flex;
}

.form-group label {
  display: table;
  vertical-align: middle;
}

.form-group input {
  flex: 1;
}

Mixing and matching flexbox with table is a great technique and one that I encourage further exploration with. When mixing and matching, always check across testing environments to catch layout bugs early.

Figure 927Figure 9. With inline inputs with buttons, the equal heights of the inputs give balance to the design. (View large version28)

I’ve seen many search inputs with this type of pattern. It’s an extremely flexible pattern that can be reused across a plethora of templates. Of course, CSS that could interfere, such as context-specific properties unrelated to the overall pattern, would be kept separate.

The HTML required is typical and includes a surrounding div to define the flexbox structure.

Here is our HTML:

<div class="form-group">
  <input type="text" placeholder="Add a note…">
  <button>Add</button>
</div>

And the CSS:

.form-group {
  display: flex;
}

.form-group input {
  flex: 1;
}
Figure 1029Figure 10. The dropdown menu’s region is highlighted using some quick flexbox tactics for effortless positioning. (View large version30)

The dropdown menu’s layout consists of a column on the left, containing vertically centered items positioned inline, and a list of items on the right, where each list item lies on its own line.

Figure 1131Figure 11. The menu for this primary interface was built using only flexbox for the layout. (View large version32)

The markup for this navigation menu uses the following HTML as its structural foundation.

<nav class="menu">
  <div class="menu__options">
    <a href="export-data.html">Export</a>
    <a href="help.html">Get Help</a>
  </div>

  <div class="menu__items">
    <a href="account.html">Account</a>
    <a href="preferences.html">Preferences</a>
    <a href="users.html">Users</a>
    <a href="payment.html">Payments</a>
    <a href="logout.html">Logout</a>
  </div>
</nav>

The CSS required is lean and easy to read, too, just the way developers like it.

.menu {
  display: flex;
}

.menu__options {
  display: flex;
  align-items: center;
}

.menu__items {
  display: flex;
  flex-direction: column;
}

In just a few lines of code, layout bliss is achieved. Plus, it is decoupled from any grid structure, and the HTML and CSS are full of semantic meaning. It’s just another example of the power of flexbox to quickly avoid complicated positioning tactics and verbose markup.

Media Objects Link

Figure 1233Figure 12. In the media-object pattern, using flexbox, a fixed-width SVG sits to the left, with flex content sitting adjacent. (View large version34)

In this universal pattern, known to some as the “media object” pattern, an element such as an image or video floats to one side, with content sitting adjacent.

<div class="media-obj">
  <div class="media-obj__fig">…</div>
  <div class="media-obj__body">…</div>
</div>

Here is the CSS:

.medi-obj {
  display: flex;
  align-items: flex-start;
}

.media-obj__body {
  flex: 1;
}

Philip Walton shares a great approach on his website Solved by Flexbox35, which I encourage everyone to explore. Philip gives some helpful reminders and tips on using certain patterns with flexbox, and he maintains an up-to-date repository of all of the patterns he demonstrates.


Figure 13. In this extreme case of browser resizing, the image is set to a maximum width of 100% and the right side is given a flex value of 1. Be careful how you mix fixed-width and flexible children.

Flexbox works great for this type of pattern, but be careful how content reacts to adjacent content, as shown above. In the GIF above, you can see how the graphic’s space seems to collapse while text pushes over the top. This might seem like a silly example because who would make their browser that narrow, right? The point, though, is that we need to understand how content relates to its surroundings before we use flexbox.

A suggestion for this pattern is to always set images to max-width: 100% when inline inside a flex parent or to define images with a fixed width and then use media queries to adjust as needed.

Flexy Calendar Link

Calendar36Calendar. (View large version37)

What kind of world would it be if we didn’t consider a context such as a calendar? You might ask here, “Why not use a table?” In this case, the calendar is being used as a date-picker, so I opted to go with buttons for the day, month and year calendar and to confine these buttons to rows (each row of the weekly calendar is wrapped in a div). Using this approach made for less markup and an easier layout. (Huge thanks to Shane Hudson38 for building the killer logic and providing insight.)

The markup is straightforward and even works well for the calendar’s pagination controls in the header.

<div class="datepicker">
  <header class="datepicker__header flex-container">
    <button>Left Arrow</button>
    <span>2015</span>
    <button>Right Arrow</button>
  </header>

  <div class="datepicker__view flex-container">
    <button>Jan</button>
    <button>Feb</button>
  </div>
</div>

The CSS couldn’t be any shorter. It’s meaningful to anyone reading the code and brief enough to write.

.flex-container {
  display: flex;
}

.datepicker__header {
  justify-content: space-between;
}

.datepicker__view {
  align-items: center;
  justify-content: flex-start;
}
Figure 1439Figure 14. For this calendar month-picker, justify-content: space-between is used on the left, and justify-content: flex-start on the right. Both wrap content very differently. (View large version40)

These two examples clearly show why one must plan ahead. How will the content wrap? How will it react as the viewport is resized? Does the content need to be wrapped? These are important questions to ask to arrive at the right strategy for the context.

Layout Link

Flexbox is ideal for interface elements, but it also plays well with certain layout patterns. A typical pattern is a primary container (typically for the main content) floating entirely to one side and a complementary container floating to the other.

Figure 1541
Figure 15. Sidebar to the left and primary content to the right — this is a perfect scenario for flexbox. It also reminds me of the faux columns42 technique. (View large version43)

The code required for this pattern is heavenly to implement, and the extra required for a fallback is minimal.

The markup for the admin layout uses a series of divs to wrap each container, as seen above.

<div class="admin-ui">
  <div class="admin-ui__nav">…</div>

  <div class="admin-ui__body">
    <nav>…</nav>
    <main>…</main>
  </div>
</div>
.admin-ui__body {
  display: flex;
}

.admin-ui__body nav {
  flex: 30%;
}

.admin-ui__body main {
  flex: 70%;
}

Here’s a great fallback for the layout pattern discussed in figure 14. The pattern doesn’t involve a complicated grid structure. Plus, our old friend display: table is ready to provide a hand when needed.

See the Pen Display: table-cell44 by Dennis Gaebel (@dennisgaebel5145) on CodePen5246.

The display: table-cell is a powerhouse CSS declaration that dates back to CSS 247 and is a perfectly reliable fallback for this context. The value causes the element to behave like a table element, which is exactly the kind of behavior we need in order to replicate the flexbox version. You could also swap the order using some table trickery, with such declarations as display: table-header-group and display: table-footer-group.

Sticky Footers Link

Sticky footers are one of those rites of passage for aspiring web developers, where the footer is positioned at the bottom of the viewport. If content is added, it will push the footer down, but the footer would appear at the bottom of the viewport in any other case.

Figure 1648Figure 16. Sticky footer in the right sidebar. (View large version49)

Here is the markup for the right sidebar:

<div class="admin-edit">
  <button class="admin-edit__save">Save Deal</button>

  <div class="admin-edit__footer">
      <p>…</p>
      <button>Copy</button>
      <button>Delete</button>
  </div>
</div>

And here is the CSS:

.admin-edit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Here’s a great fallback for flexbox sticky footers that also maintains the layout all the way back to IE 6.

See the Pen Sticky footer on steroids50 by Dennis Gaebel (@dennisgaebel5145) on CodePen5246.

Figure 17. Flexbox Sticky Footer w/Table Display Fallback. Works in every browser going back to IE6!

Another part of the layout where I took a chance with flexbox was the main application view, or what was termed the “pipeline” of the application. Each card has a defined width and takes advantage of the flex property. This gives each card a consistent and defined proportion.

Pipeline Card53Pipeline. (View large version54)

Flexbox helps to position the content of each card beautifully. The entire application is one big layout version of the movie Inception, where flexbox contains flexbox, which contains even tinier atoms and molecules using flexbox. It’s mind-boggling when you consider how hard developers used to fight to center an item, but today we accomplish this in only a few lines of code.

Be Careful Link

During browser testing, we discovered that combining the flex55 property with other spacing properties, such as margin and padding, resulted in a broken layout when viewed in IE 10 (see figure 18).

.parent {
  display: flex;
}
.parent .child {
  flex: 1;
  padding: 20px; /* Breaks layout in IE 10 */
}

When a module’s parent wrapper, defined with display: flex, has children that use the flex property along with padding or margin, the layout breaks in IE 10.

The feature query @supports (display: flex) {} is supposed to be something like Modernizr56 but implemented with native CSS. Unfortunately, support for @supports57 is very poor at this time and should be avoided. Instead, here are some tips for fallback solutions:

  • Use Modernizr’s no-flexbox class to detect features.
  • Use transforms or a table display for centering.
  • Use a table display.
  • Control the order with table-display tactics, such as table-caption, table-header-group and table-footer-group.
  • Use floats as a fallback for entire layout structures.
  • Use inline or inline-block as a display fallback for inline patterns.
  • Use conditional comments for IE 9 and below to deliver non-flexbox styling.

Ian Devlin has a great article explaining stacking techniques58. He gives a great overview of how to control stacking order using table-caption, table-header-group and table-footer-group.

Conclusion Link

Flexbox today is very, very real. After many years of development, the specification has become much more stable, making it easier to achieve those CSS layout dreams. I also suggest going through Wes Bos’ What the Flexbox?!59 The simple 20-video crash course will help you master flexbox, all for free! The first 13 videos cover the fundamentals of flexbox; the last 7 are code-alongs in which Wes builds everything from navigation to a mobile app layout, entirely with flexbox! There is truly no time like the present to start using it in your work.

(ds, ml, al, jb)

Footnotes Link

  1. 1 http://caniuse.com/#feat=flexbox
  2. 2 http://buildtracks.com
  3. 3 http://bradfrost.com
  4. 4 https://dribbble.com/grayghostvisuals/projects/270025-Tracks
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01-atomic-parts-opt.png
  6. 6 https://www.smashingmagazine.com/wp-content/uploads/2016/03/01-atomic-parts-opt.png
  7. 7 http://bradfrost.com/blog/post/atomic-web-design
  8. 8 http://atomicdesign.bradfrost.com
  9. 9 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02-tracks-app-opt.png
  10. 10 https://www.smashingmagazine.com/wp-content/uploads/2016/03/02-tracks-app-opt.png
  11. 11 http://www.invisionapp.com
  12. 12 http://caniuse.com/#search=flexbox
  13. 13 http://davidwalsh.name/css-supports
  14. 14 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03-admin-nav-opt.png
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2016/03/03-admin-nav-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04-primary-nav-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2016/03/04-primary-nav-opt.png
  18. 18 http://sprungmarker.de/wp-content/uploads/css-a11y-group/css-a11y-flexbox.html#newspec
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05-flexbox-order-chart-opt.png
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2016/03/05-flexbox-order-chart-opt.png
  21. 21 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06-flex-footer-opt.png
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2016/03/06-flex-footer-opt.png
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07-inline-label-opt.png
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2016/03/07-inline-label-opt.png
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08-inline-input-wrap-opt.png
  26. 26 https://www.smashingmagazine.com/wp-content/uploads/2016/03/08-inline-input-wrap-opt.png
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2016/03/09-inline-input-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2016/03/09-inline-input-opt.png
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2016/03/10-primary-menu-opt.png
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2016/03/10-primary-menu-opt.png
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2016/03/11-tracks-menu-opt.gif
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2016/03/11-tracks-menu-opt.gif
  33. 33 https://www.smashingmagazine.com/wp-content/uploads/2016/03/12-media-obj-opt.png
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2016/03/12-media-obj-opt.png
  35. 35 http://philipwalton.github.io/solved-by-flexbox/demos/media-object
  36. 36 https://www.smashingmagazine.com/wp-content/uploads/2016/03/13-calendar-opt.png
  37. 37 https://www.smashingmagazine.com/wp-content/uploads/2016/03/13-calendar-opt.png
  38. 38 https://twitter.com/shanehudson
  39. 39 https://www.smashingmagazine.com/wp-content/uploads/2016/03/14-calendar-layout-opt.png
  40. 40 https://www.smashingmagazine.com/wp-content/uploads/2016/03/14-calendar-layout-opt.png
  41. 41 https://www.smashingmagazine.com/wp-content/uploads/2016/03/15-admin-layout-opt.png
  42. 42 http://alistapart.com/article/fauxcolumns
  43. 43 https://www.smashingmagazine.com/wp-content/uploads/2016/03/15-admin-layout-opt.png
  44. 44 'http://codepen.io/dennisgaebel/pen/mJgvBp/'
  45. 45 'http://codepen.io/dennisgaebel'
  46. 46 'http://codepen.io'
  47. 47 http://caniuse.com/#search=table
  48. 48 https://www.smashingmagazine.com/wp-content/uploads/2016/03/16-admin-sidebar-stickyfooter-opt.png
  49. 49 https://www.smashingmagazine.com/wp-content/uploads/2016/03/16-admin-sidebar-stickyfooter-opt.png
  50. 50 'http://codepen.io/dennisgaebel/pen/LVvqOx/'
  51. 51 'http://codepen.io/dennisgaebel'
  52. 52 'http://codepen.io'
  53. 53 https://www.smashingmagazine.com/wp-content/uploads/2016/03/17-pipeline-card-opt.png
  54. 54 https://www.smashingmagazine.com/wp-content/uploads/2016/03/17-pipeline-card-opt.png
  55. 55 https://developer.mozilla.org/en-US/docs/Web/CSS/flex
  56. 56 http://modernizr.com
  57. 57 https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
  58. 58 http://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table
  59. 59 http://flexbox.io
SmashingConf New York

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

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design.

  1. 1

    Wow this is a HUGE article.
    Will have to read it a few times and bookmark it.
    Thanks a lot!

    Using modernizr to detect flexbox functinallity is a good idea too – but the question remains:
    What is the current state of the cross-browser support for flexbox ?
    Going to caniuse.com , it’s looking VERY promising ( http://caniuse.com/#search=flexbox ).

    Guess it’s time to realign the designs ;]

    4
    • 2

      The problem with CanIUse is it really doesn’t take into account an individual site, demographics, etc.

      If it’s a redesign, I’d look at analytics and see what your visitors are browsing with. If you see a lot of old IE, you might want to rethink Flexbox. I still have corporate clients with visitors on IE 8 and scattering on IE 7. While I gave up 7 years ago, IE 8 and especially 9 is still prevalent. Giving up those users can mean thousands of dollars in revenue lost, depending on the site.

      On a brand new site, you got some more leeway. Getting something out there and fixing it for older browsers—only if you start seeing a large swatch of old IE—is probably better than spending a ton of time worrying about older browsers that may or may not be around in a year… assuming the new site is still around in a year, too. Worst case, the site is visible and you end up redesigning anyway.

      0
      • 3

        Dennis Gaebel

        November 5, 2015 3:59 pm

        The good news is that you can fallback flexbox very safely for IE9 and below. My sticky footer example uses flexbox and even works all the way back to IE6. Table displays are your friends IMO.

        0
  2. 4

    Jens Grochtdreis

    November 3, 2015 1:03 pm

    Unfortunately not all browsers use the source order for keyboard navigation. Firefox uses the visual order, Chrome and IE11 the source order. You can test it with my Codepen: http://codepen.io/jensgro/full/pjZaqy/

    2
    • 5

      Dennis Gaebel

      November 4, 2015 4:07 pm

      Yes for sure. Definitely a big reason why changing source order can be dangerous in some cases. Thanks for the awesome demo. Cheers.

      0
  3. 6

    This is a great read and one that I am going to be bookmarking to come back to. I’m glad that we can finally start using Flex more and more and I hope there will come a time when it will be the standard and we won’t have to worry about quirky super old browsers (probably never right?).

    3
  4. 7

    This is a great article and I use flexbox for my current projects, but IMHO there is the disadvantage of fallback time spending (if you are lucky in all devices/browsers, I saw a broken layout in an IPAD 2. It’s a 2011 product FFS!) and we must find a more elegant way of using nested flexbox. :)

    1
  5. 9

    I’ve been using flex boxes for prototyping and internal tools for awhile, but the most recent chrome update broke all of my layouts that weren’t explicitly setting a height to the parent of the flex.

    0
  6. 11

    The well-known “sidebar to the left, main content to the right” pattern is flawed in my UX opinion. Why would the primary content go to a secondary slot? It’s may be well-known that way, but table for fluid layouts have been that for some time also… main things first, and most important content should be most prominent – on the left side that’s read first and all the time in the F-shaped reading pattern by the users. Sidebar content also merely changes, main content does. So the excitement of the new should be the driving factor here.

    0
    • 12

      Dennis Gaebel

      November 4, 2015 4:04 pm

      Hi Otto. I’m not discussing the experience of the pattern on the user as it’s just a way I chose to describe the layout that was implemented with the assistance of flexbox. Unfortunately, whether or not you have valid concerns is beyond the scope of discussion here, but appreciate the response nonetheless.

      1
      • 13

        My comment is just worth the 2 cents as a comment to a specific detail of a very nice article. I don’t want to argue the use of flexbox here, just that a generally accepted pattern should be rethought perhaps. But that has nothing to do with flexbox itself, I agree.

        0
  7. 14

    Adam Richings

    November 4, 2015 7:43 am

    Great article – I’ve started using Flexbox recently and really love it.

    It actually makes me feel like I’m doing something wrong. With so few lines of code you can build lovely layouts. I keep waiting for there to be a catch.

    One question I have though is about grids. I used to custom build my own grid layouts, but since using flexbox I feel the need to never use them again. Has Flexbox replaced grids? Is it perfectly acceptable to use Flexbox for everything I build now, because I want to :)

    1
    • 15

      Dennis Gaebel

      November 4, 2015 3:59 pm

      I don’t see flexbox replacing anything. It’s just a tool to be used where it feels right IMO. I also agree with you that the ability to keep code brief is super awesome. Cheers

      0
    • 16

      Flexbox doesn’t replace grids given that grids never existed as a concept in CSS other than for the purpose of tables.

      Flexbox can adhere to a ‘grid’ in the same manner as floats or inline-blocks can be used to create a layout adhering to a grid pattern. You just need to do your sums correctly so the elements in the flexbox layout are sized consistently.

      I haven’t attempted it yet, but from the syntax I would imagine that flexbox provides the simplest way to create a grid layout.

      -1
  8. 17

    Karen Menezes

    November 4, 2015 8:06 pm

    Hey Dennis, great article!
    Flexbox is pretty amazing, once you get past the quirks and test thoroughly. I’ve been using it a lot over the last year.
    With flexbox, I simply use the unprefixed current syntax (and optionally the webkit prefix with current syntax) and fall back to inline-block (or something else) for non-supporting browsers. My rule simply includes inline-block, followed by flex properties, and browsers that don’t support flexbox will automatically default to inline-block. I don’t add the tweener IE syntax or the older webkit syntax. By doing this, I’ve managed to avoid plenty of the issues with the older syntax, flex-wrap not supported, etc.
    And there’s no need for Modernizr too!
    I’d love to know your thoughts on this, if you have a minute to spare :)

    1
    • 18

      Dennis Gaebel

      November 5, 2015 3:54 pm

      Hi Karen,

      I think your thoughts are right on, but in my experience when setting spacing such as padding or margin you might want to use Modernizr class. I’ve seen some weird things happen across browsers (even IE10) where spacing on flex children didn’t adhere properly to what was declared in the CSS. I prefer table display, but inline-block is also a winner although it all depends on how the content will react which is how I make the decisions I do. Thanks again for the thoughtful comment and reading! Cheers.

      0
      • 19

        Karen Menezes

        November 6, 2015 7:51 am

        Hey Dennis,
        Thanks for responding :) Just to clarify, I don’t add the older IE tweener syntax at all, so any version below IE 11 does not use flexbox with the ms prefix + syntax, but falls back to display table, inline-block, etc.
        Flexbox is awesome though! It really feels intuitive after a while :D

        0
  9. 20

    Fernando Montoya

    November 4, 2015 8:08 pm

    Great article! Do you know if is possible to animate the order property? You may thing why we need such thing? Here is: http://codepen.io/montogeek/pen/MYroRv

    0
  10. 23

    Poul H. Hansen

    November 4, 2015 10:07 pm

    Very interesting article.

    I´ve been using flexbox for parts of our new product at work. And i must say tangling with some of the problems became so easy i forgot why they were hard in the first place.

    I use flexbox in tandem with other layout types, such as grids, as parts of our system still uses it.
    I do have the luxury of not having to worry about anything below IE10 and a few other things.

    All in all, good read, worth a bookmark

    1
  11. 25

    I still have a mental difficulty grasping flex-basis and width, how should I use them, should I even use them? maybe go flexible only with flex-grow and flex-shrink, I’m confused with those the dimension properties. Also how to apply padding and margin to flex items to create the gutters in layout, maybe nest a div inside the flex item and add those to them, cause I’ve seen weird thing happen to flex items when adding them, also how box-sizing affect flex items? Any light on this would be helpful.

    0
    • 26

      Hi Jhon: I would suggest checking across IE10 to make sure when adding white spacing to flex children as I’ve seen some oddities in that respect. If required, you may have to add extra markup and to use white spacing on the containers children instead of the direct children of a flex parent.

      I definitely encourage you to watch the series by Wes Bos that will explain all your concerns in depth. Thanks for the comments and stopping by.

      0
  12. 27

    Daniel Hruška

    November 8, 2015 2:47 pm

    Great article, Dennis!

    I’m a newbie in HTML/CSS world. I’ve started doing UX design in 2014 and very quickly ot was apparent that I need to learn some CSS stuff to be more productive. A company I work for is developing HTML5 based framework for business solutions . For styling we use LESS and all framework components are based on flexbox. We could do this, because last IE we support is IE11 (IE10 was supported in early project stages, though). We even considering dropping IE with Edge being released.

    So here I was – barely touched by HTML nor CSS . And when I think about it, I’m still untouched by pure CSS. I always use LESS, even for my personal stuff. It’s cleaner, saves time and can do cool stuff – mixins, variables (mostly for color themes), functions (again – I use them mostly for colors) and so on.

    Mixins are vere useful with flexbox and its syntax. For example instead of typing “display: flex;” i type “.flexDisplay();” which is defined as:

    .flexDisplay() {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    }

    Or i can type “.flexDisplay(column, wrap);” which is defined as:

    .flexDisplay(@direction, @wrap) {
    .flexDisplay(@direction); //this calls previous mixin
    .flexWrap(@wrap); //this calls other mixin
    }

    Or “.justifyContent(space-around);” which is defined as:

    .justifyContent(@value) {
    justify-content: @value;
    -webkit-justify-content: @value;
    -ms-flex-pack: @value;
    }

    And so on… I’m glad you’ve written this article because everytime I see CSS files created by “IT veterans” – in 2015 – full of “float: left”, “float: right”, full of redundant code, I really thought I was doing something wrong. I’m the freshman here, right? Now I know I don’t. With just few lines of code with flexbox I’m able to create responsive layout within few minutes.

    0
    • 28

      Thanks for the thoughts Daniel. You can actually compile your LESS through auto-prefixer and remove the use of those mixins

      0
  13. 29

    Thanks for the article. Flexbox is one of those things I have just pushed to the side while concentrating on other things, mainly due to support and the various quirks. But the time has probably come to start giving it more serious thought now.

    0
  14. 30

    Great article, very useful! I think the CSS code (selectors) of the admin-ui layout example is wrong, should be like that:

    .admin-ui {
      display: flex;
    }
    .admin-ui__nav {
      flex: 30%;
    }
    .admin-ui__body {
      flex: 70%;
    }
    0

↑ Back to top