Designing CSS Layouts With Flexbox Is As Easy As Pie

Advertisement

This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. — Ed.

Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of the first CSS modules designed for actual layout (floats were really meant mostly for things such as wrapping text around images), it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements (both horizontally and vertically), the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities.

Flexbox has lived a storied existence. It started as a feature of Mozilla’s XUL, where it was used to lay out application UI, such as the toolbars in Firefox, and it has since been rewritten multiple times. The specification has only recently reached stability, and we have fairly complete support across the latest versions of the leading browsers.

There are, however, some caveats. The specification changed between the implementation in Internet Explorer (IE) and the release of IE 10, so you will need to use a slightly different syntax. Chrome currently still requires the -webkit- prefix, and Firefox and Safari are still on the much older syntax. Firefox has updated to the latest specification, but that implementation is currently behind a runtime flag until it is considered stable and bug-free enough to be turned on by default. Until then, Firefox still requires the old syntax.

When you specify that an element will use the flexbox model, its children are laid out along either the horizontal or vertical axis, depending on the direction specified. The widths of these children expand or contract to fill the available space, based on the flexible length they are assigned.

Example: Horizontal And Vertical Centering (Or The Holy Grail Of Web Design)

Being able to center an element on the page is perhaps the number one wish among Web designers — yes, probably even higher than gaining the highly prized parent selector or putting IE 6 out of its misery (OK, maybe a close second then). With flexbox, this is trivially easy. Let’s start with a basic HTML template, with a heading that we want to center. Eventually, once we’ve added all the styling, it will end up looking like this vertically and horizontally centered demo.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8"/>
   <title>Centering an Element on the Page</title>
</head>
<body>
   <h1>OMG, I’m centered</h1>
</body>
</html>

Nothing special here, not even a wrapper div. The magic all happens in the CSS:


html {
   height: 100%;
}

body {
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-box;      /* OLD: Firefox (buggy) */
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   -webkit-box-align: center; -moz-box-align: center; /* OLD… */
   -ms-flex-align: center; /* You know the drill now… */
   -webkit-align-items: center;
   align-items: center;

   -webkit-box-pack: center; -moz-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;

   margin: 0;
   height: 100%;
   width: 100% /* needed for Firefox */
}

h1 {
   display: -webkit-box; display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-box-align: center; -moz-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;

   height: 10rem;
}

I’ve included all of the different prefixed versions in the CSS above, from the very oldest, which is still needed, to the modern and hopefully final syntax. This might look confusing, but the different syntaxes map fairly well to each other, and I’ve included tables at the end of this article to show the exact mappings.

This is not exactly all of the CSS needed for our example, because I’ve stripped out the extra styling that you probably already know how to use in order to save space.

Let’s look at the CSS that is needed to center the heading on the page. First, we set the html and body elements to have 100% height and remove any margins. This will make the container of our h1 take up the full height of the browser’s window. Firefox also needs a width specified on the body to force it to behave. Now, we just need to center everything.

Enabling Flexbox

Because the body element contains the heading that we want to center, we will set its display value to flex:


body {
   display: flex;
}

This switches the body element to use the flexbox layout, rather than the regular block layout. All of its children in the flow of the document (i.e. not absolutely positioned elements) will now become flex items.

The syntax used by IE 10 is display: -ms-flexbox, while older Firefox and WebKit browsers use display: -prefix-box (where prefix is either moz or webkit). You can see the tables at the end of this article to see the mappings of the various versions.

What do we gain now that our elements have been to yoga class and become all flexible? They gain untold powers: they can flex their size and position relative to the available space; they can be laid out either horizontally or vertically; and they can even achieve source-order independence. (Two holy grails in one specification? We’re doing well.)

Centering Horizontally

Next, we want to horizontally center our h1 element. No big deal, you might say; but it is somewhat easier than playing around with auto margins. We just need to tell the flexbox to center its flex items. By default, flex items are laid out horizontally, so setting the justify-content property will align the items along the main axis:


body {
   display: flex;
   justify-content: center;
}

For IE 10, the property is called flex-pack, while for older browsers it is box-pack (again, with the appropriate prefixes). The other possible values are flex-start, flex-end, space-between and space-around. These are start, end, justify and distribute, respectively, in IE 10 and the old specification (distribute is, however, not supported in the old specification). The flex-start value aligns to the left (or to the right with right-to-left text), flex-end aligns to the right, space-between evenly distributes the elements along the axis, and space-around evenly distributes along the axis, with half-sized spaces at the start and end of the line.

To explicitly set the axis that the element is aligned along, you can do this with the flex-flow property. The default is row, which will give us the same result that we’ve just achieved. To align along the vertical axis, we can use flex-flow: column. If we add this to our example, you will notice that the element is vertically centered but loses the horizontal centering. Reversing the order by appending -reverse to the row or column values is also possible (flex-flow: row-reverse or flex-flow: column-reverse), but that won’t do much in our example because we have only one item.

There are some differences here in the various versions of the specification, which are highlighted at the end of this article. Another caveat to bear in mind is that flex-flow directions are writing-mode sensitive. That is, when using writing-mode: vertical-rl to switch to vertical text layout (as used traditionally in China, Japan and Korea), flex-flow: row will align the items vertically, and column will align them horizontally.

Centering Vertically

Centering vertically is as easy as centering horizontally. We just need to use the appropriate property to align along the “cross-axis.” The what? The cross-axis is basically the axis perpendicular to the main one. So, if flex items are aligned horizontally, then the cross-axis would be vertical, and vice versa. We set this with the align-items property (flex-align in IE 10, and box-align for older browsers):


body {
   /* Remember to use the other versions for IE 10 and older browsers! */
   display: flex;
   justify-content: center;
   align-items: center;
}

This is all there is to centering elements with flexbox! We can also use the flex-start (start) and flex-end (end) values, as well as baseline and stretch. Let’s have another look at the finished example:

figure1.1_mini
Simple horizontal and vertical centering using flexbox. Larger view.

You might notice that the text is also center-aligned vertically inside the h1 element. This could have been done with margins or a line height, but we used flexbox again to show that it works with anonymous boxes (in this case, the line of text inside the h1 element). No matter how high the h1 element gets, the text will always be in the center:


h1 {
   /* Remember to use the other versions for IE 10 and older browsers! */
   display: flex;
   align-items: center;
   height: 10rem;
}

Flexible Sizes

If centering elements was all flexbox could do, it’d be pretty darn cool. But there is more. Let’s see how flex items can expand and contract to fit the available space within a flexbox element. Point your browser to this next example.

figure1.2_mini
An interactive slideshow built using flexbox. Larger view.

The HTML and CSS for this example are similar to the previous one’s. We’re enabling flexbox and centering the elements on the page in the same way. In addition, we want to make the title (inside the header element) remain consistent in size, while the five boxes (the section elements) adjust in size to fill the width of the window. To do this, we use the new flex property:


section {
   /* removed other styles to save space */
   -prefix-box-flex: 1; /* old spec webkit, moz */
   flex: 1;
   height: 250px;
}

What we’ve just done here is to make each section element take up 1 flex unit. Because we haven’t set any explicit width, each of the five boxes will be the same width. The header element will take up a set width (277 pixels) because it is not flexible. We divide the remaining width inside the body element by 5 to calculate the width of each of the section elements. Now, if we resize the browser window, the section elements will grow or shrink.

In this example, we’ve set a consistent height, but this could be set to be flexible, too, in exactly the same way. We probably wouldn’t always want all elements to be the same size, so let’s make one bigger. On hover, we’ve set the element to take up 2 flex units:


section:hover {
   -prefix-box-flex: 2;
   flex: 2;
   cursor: pointer;
}

Now the available space is divided by 6 rather than 5, and the hovered element gets twice the base amount. Note that an element with 2 flex units does not necessarily become twice as wide as one with 1 unit. It just gets twice the share of the available space added to its “preferred width.” In our examples, the “preferred width” is 0 (the default).

Source-Order Independence

For our last party trick, we’ll study how to achieve source-order independence in our layouts. When clicking on a box, we will tell that element to move to the left of all the other boxes, directly after the title. All we have to do is set the order with the order property. By default, all flex items are in the 0 position. Because they’re in the same position, they follow the source order. Click on your favorite person in the updated example to see their order change.

figure1.3_mini
An interactive slideshow with flex-order. Larger view.

To make our chosen element move to the first position, we just have to set a lower number. I chose -1. We also need to set the header to -1 so that the selected section element doesn’t get moved before it:


header {
   -prefix-box-ordinal-group: 1; /* old spec; must be positive */
   -ms-flex-order: -1; /* IE 10 syntax */
   order: -1; /* new syntax */
}

section[aria-pressed="true"] {
   /* Set order lower than 0 so it moves before other section elements,
      except old spec, where it must be positive.
 */
   -prefix-box-ordinal-group: 1;
   -ms-flex-order: -1;
   order: -1;

   -prefix-box-flex: 3;
   flex: 3;
   max-width: 370px; /* Stops it from getting too wide. */
}

In the old specification, the property for setting the order (box-ordinal-group) accepts only a positive integer. Therefore, I’ve set the order to 2 for each section element (code not shown) and updated it to 1 for the active element. If you are wondering what aria-pressed="true" means in the example above, it is a WAI-ARIA attribute/value that I add via JavaScript when the user clicks on one of the sections.

This relays accessibility hints to the underlying system and to assistive technology to tell the user that that element is pressed and, thus, active. If you’d like more information on WAI-ARIA, check out “Introduction to WAI-ARIA” by Gez Lemon. Because I’m adding the attribute after the user clicks, this example requires a simple JavaScript file in order to work, but flexbox itself doesn’t require it; it’s just there to handle the user interaction.

Hopefully, this has given you some inspiration and enough introductory knowledge of flexbox to enable you to experiment with your own designs.

Syntax Changes

As you will have noticed throughout this article, the syntax has changed a number of times since it was first implemented. To aid backward- and forward-porting between the different versions, we’ve included tables below, which map the changes between the specifications.

Specification versions
Speci-
fication
IE Opera Firefox Chrome Safari
Standard 11 12.10+ * 22 29+,
21–28 (-webkit-)
Mid 10 (-ms-)
Old 3–21 (-moz-) <21 (-webkit-) 3–6 (-webkit-)

* When Opera switched to Blink in version 15 it required the -webkit- prefix. The prefix was dropped in Opera 16.

Enabling flexbox: setting an element to be a flex container
Speci-
fication
Property name Block-level flex Inline-level flex
Standard display flex inline-flex
Mid display flexbox inline-flexbox
Old display box inline-box
Axis alignment: specifying alignment of items along the main flexbox axis
Speci-
fication
Property name start center end justify distribute
Standard justify-content flex-start center flex-end space-between space-around
Mid flex-pack start center end justify distribute
Old box-pack start center end justify N/A
Cross-axis alignment: specifying alignment of items along the cross-axis
Speci-
fication
Property name start center end baseline stretch
Standard align-items flex-start center flex-end baseline stretch
Mid flex-align start center end baseline stretch
Old box-align start center end baseline stretch
Individual cross-axis alignment: override to align individual items along the cross-axis
Speci-
fication
Property name auto start center end baseline stretch
Standard align-self auto flex-start center flex-end baseline stretch
Mid flex-item-align auto start center end baseline stretch
Old N/A
Flex line alignment: specifying alignment of flex lines along the cross-axis
Speci-
fication
Property name start center end justify distribute stretch
Standard align-content flex-start center flex-end space-between space-around stretch
Mid flex-line-pack start center end justify distribute stretch
Old N/A

This takes effect only when there are multiple flex lines, which is the case when flex items are allowed to wrap using the flex-wrap property and there isn’t enough space for all flex items to display on one line. This will align each line, rather than each item.

Display order: specifying the order of flex items
Speci-
fication
Property name Value
Standard order <number>
Mid flex-order <number>
Old box-ordinal-group <integer>
Flexibility: specifying how the size of items flex
Speci-
fication
Property name Value
Standard flex none | [ <flex-grow> <flex-shrink>? || <flex-basis>]
Mid flex none | [ [ <pos-flex> <neg-flex>? ] || <preferred-size> ]
Old box-flex <number>

The flex property is more or less unchanged between the new standard and the draft supported by Microsoft. The main difference is that it has been converted to a shorthand in the new version, with separate properties: flex-grow, flex-shrink and flex-basis. The values may be used in the same way in the shorthand. However, the default value for flex-shrink (previously called negative flex) is now 1. This means that items do not shrink by default. Previously, negative free space would be distributed using the flex-shrink ratio, but now it is distributed in proportion to flex-basis multiplied by the flex-shrink ratio.

Direction: specifying the direction of the main flexbox axis
Speci-
fication
Property name Horizontal Reversed horizontal Vertical Reversed vertical
Standard flex-direction row row-reverse column column-reverse
Mid flex-direction row row-reverse column column-reverse
Old box-orient
box-direction
horizontal
normal
horizontal
reverse
vertical
normal
vertical
reverse

In the old version of the specification, the box-direction property needs to be set to reverse to get the same behavior as row-reverse or column-reverse in the later version of the specification. This can be omitted if you want the same behavior as row or column because normal is the initial value.

When setting the direction to reverse, the main flexbox axis is flipped. This means that when using a left-to-right writing system, the items will display from right to left when row-reverse is specified. Similarly, column-reverse will lay out flex items from bottom to top, instead of top to bottom.

The old version of the specification also has writing mode-independent values for box-orient. When using a left-to-write writing system, horizontal may be substituted for inline-axis, and vertical may be substituted for block-axis. If you are using a top-to-bottom writing system, such as those traditional in East Asia, then these values would be flipped.

Wrapping: specifying whether and how flex items wrap along the cross-axis
Speci-
fication
Property name No wrapping Wrapping Reversed wrap
Standard flex-wrap nowrap wrap wrap-reverse
Mid flex-wrap nowrap wrap wrap-reverse
Old box-lines single multiple N/A

The wrap-reverse value flips the start and end of the cross-axis, so that if flex items are laid out horizontally, instead of items wrapping onto a new line below, they will wrap onto a new line above.

At the time of writing, Firefox does not support the flex-wrap or older box-lines property. It also doesn’t support the shorthand.

The current specification has a flex-flow shorthand, which controls both wrapping and direction. The behavior is the same as the one in the version of the specification implemented by IE 10. It is also currently not supported by Firefox, so I would recommend to avoid using it when specifying only the flex-direction value.

Conclusion

Well, that’s a (flex-)wrap. In this article, I’ve introduced some of the myriad of possibilities afforded by flexbox. Be it source-order independence, flexible sizing or just the humble centering of elements, I’m sure you can find ways to employ flexbox in your websites and applications. The syntax has settled down (finally!), and implementations are here. All major browsers now support flexbox in at least their latest versions.

While older versions of browser use different syntaxes, all the latest versions of the major browsers now support Flexbox in its final form. These browsers also no longer require prefixes, except (at the time of writing) Safari 6.1 and above. For the time being, to support all browsers, use the tables above to map the various syntaxes, and get your flex on.

Layout in CSS is only getting more powerful, and flexbox is one of the first steps out of the quagmire we’ve found ourselves in over the years, first with table-based layouts, then float-based layouts. IE 10 already supports an early draft of the Grid layout specification, which is great for page layout, and Regions and Exclusions will revolutionize how we handle content flow and layout.

Flexbox can be used today if you only need to support relatively modern browsers or can provide a fallback, and in the not too distant future, all sorts of options will be available, so that we can use the best tool for the job. Flexbox is shaping up to be a mighty fine tool.

Further Reading

(al)

↑ Back to top

All-rounder with a passion for the Open Web. W3C CSS WG member. Previously at Motorola and Opera. Ex-CERN, ex-Opera, ex-CSS3.info.

  1. 1

    Cool article, I really enjoy the new flexbox, but it’s not easy to put in the wild. Hopefully this polyfill discussion (for the new spec) here will help: https://github.com/doctyper/flexie/issues/34

    0
  2. 2

    So if I set an element to display:flex (body, in your case), do I need to reset the child elements (the “wrapper” for example) back to display:block? That seems like it could get pretty messy if you start alternating with block and flex (in a menu for example)

    0
    • 3

      Depends what you’re trying to do. The children will be flex items, but their contents will still be using their native display values. So if I had three articles containing paragraphs, and set the parent to use flexbox, the paragraphs inside the article will still be laid out regularly as block level items.

      0
  3. 4

    My mind is blown. Vertical centering?! *faints*

    How many years till it’s standardized though?

    0
    • 5

      It’s standardized and supported (with vendor prefixes) in current versions of all major browsers, both desktop and mobile. For IE9 and under, you’ll have to use the Flexie polyfill.

      0
      • 6

        Supported, maybe… but standardized with vendor prefixes kind of defeats the purpose of the word “standardized”. Even IE10 has two different implementations of it… typical IE.

        0
      • 7

        You may run into issues considering that Google Chrome, Opera (same engine as Chrome in most recent builds), and some nightly builds of Firefox as of date are the only browsers that support the new Flexbox syntax. The implementation of IE10 from what I understand says it does but that’s not necessarily true, making it a pain to support via Modernizr for example.

        Many polyfills are for the OLD Flexbox syntax, which can make it very, very confusing to those that don’t have time or don’t know how to see the differences easily enough to not potentially waste their time.

        Things are picking up for that to change, particularly some of the recent articles on Opera’s dev site alluding to that being a moot point soon.

        1
  4. 8

    I’d hate to be the person who replaces the person who implemented this.

    0
    • 9

      Why, exactly? Are you sure it’s not just because it isn’t what you’re used to?

      If you’re using any sort of CSS preprocessing, throw in a polyfill and you might be able to start using this stuff today, without mucking around with browser prefixes.

      It’s not worse. It’s just different, and actually better.

      0
    • 10

      Create a mixin in LESS and it’s really only an issue the first time round. Sure it’s a lot of outputted code, but if you write good reusable CSS it shouldn’t bloat the file size too much.

      0
  5. 11

    Flexbox proves to be a promising tool in the years to come. But for the average developer, using flexbox won’t be a possibility simply because of the practical lack of browser support.

    For now, most of this can be accomplished using the display: table and associated properties. Also, the spec for display: table is solid across browsers back to IE8. If we weren’t so averse to the word ‘table’ we would have all been vertically centering semantic markup for years already (and some have).

    0
    • 12

      Right on Rob, agree completely, I thought the article at first was going to discuss display:table for centering which is completely achievable and backwards compatible to IE7 I believe. Great for future reference but hard to integrate right now as it is with most things for UI right now.

      0
      • 13

        display: table is supported from IE8, not 7. You could use display: table, but it isn’t as flexible as flexbox, and this article was about the capabilities of the latter. It would also only work for centring elements, and not other things, such as flexible sizing and source order independence.

        0
    • 14

      Actually the reason I’m looking for an alternative to display: table; is that it doesn’t support max-width property inside a display: table; and that’s a huge problem with fluid images in non-webkit browsers. It’s better to have something that is harder to implement than nothing at all.

      0
  6. 15

    Every once in a while Smashing Magazine prints an article that actually contains information and is useful. David, thanks for writing this article; you and articles like this are the reason I still subscribe to Smashing Magazine.

    0
  7. 16

    Great write up, but the fact that there is no standard that all modern browsers can or do adhere to yet shows me that flexbox is still to hacky to use. Once things stabilize then this will be awesome. Until then, this is still too raw to use.

    0
    • 17

      The syntax is stable at this point, and has been adopted by Opera and Chrome (with prefix). The leaked builds of IE11 also include it (sans-prefix). Firefox is also coming soon with the modern syntax turned on by default. That would only leave Safari. So it is now pretty stable, ignoring older browsers.

      0
      • 18

        I wish “ignoring older browsers” was always an option :]

        0
        • 19

          At my current employer we have a number of projects and about 50% of all traffic (mostly Australian government clients) is on IE8 / IE7. Flexbox and the like are practically space age

          0
    • 20

      Adrian Eufracio

      May 22, 2013 10:48 am

      Bob is right, too hacky but we should use it on our side projects so that browers will know they should push support for it.

      0
      • 21

        All browsers are in the process of updating to the latest spec (except perhaps Safari, but they will inherit from WebKit). It is just old browsers we need to worry about. I have started to develop sites with a base style sheet for all browsers, and advanced styles behind a media query. With this approach only IE9 is an issue (and perhaps Opera 12, but that has largely been replaced by 12.10), as 10 has flexbox and 8 and below don’t support media queries. I then just give very basic layout and styling to the basic non-media-queried styles.

        0
  8. 22

    I’ve just gotten into CSS and HTML (I know enough to be able to grab a fairly simple website and build it with little issue) and my mind is blown by this. As a newbie, I’m unsure about how long it takes for the syntax to settle on a consistent phrase though. Also, is this something that a professional would consider using so early on, or is this something that most will experiment with and wait for more stability and support?

    Also, with this vastly different (albeit awesome) method of laying out a website, how will older browsers even render the page moving forward if this method was used instead of the conventional methods?

    0
    • 23

      The syntax is settled, we’re just waiting for it to propagate to all browsers and old browsers to die out. IE8 is probably the one that will hang around for a while, as IE9 is being replaced with IE10 through automatic updates.

      Without any fallbacks, non-flexbox browsers will potentially look pretty bad. There are numerous ways to give fallbacks though, but it depends what you’re doing with flexbox.

      0
      • 24

        Just a comment about upgrading clients. I’m not a professional web developer of any sort, I work for a local council in the UK. We still use Microsoft XP, IE6 (maybe 7, will have to check) and Office 2003.

        Why? Security. My little desk PC has no valuable data on it. But it connects to our LAN. And somewhere in our LAN is a connection to a higher government network, and on and on eventually I suppose to the nukes. Our IT claim to have well developed policies and knowledge about these systems, but if they implement something newer they are using stuff they have little to no experience with and could miss a vulnerability.

        YES, don’t shout, I know more modern OS’s and program suites should be more secure. IF you know how to make it so. There has been rumor of some PC’s being replaced with Win7 and Office 2010. We’ll see.

        This sort of thinking as well as people who think that change is wrong; such as the old f***s in my local scouts group who are all about 70+, people like my wife who won’t use Chrome or Firefox because it’s UI is different than the one she has learnt, or my sister who has an old laptop that can only run XP, and so on, is why web developers will have to cope with older systems for the foreseeable future. Unfortunately.

        Mike.

        0
  9. 25

    Thank you for sharing this! I have to agree with the other users as this is great but since there is no standard on all browsers I see a lot of issues using this. Excited to hear more about this!

    0
  10. 26

    Thank you for this article. I agree that is too raw to use at this moment, but it’s great to know all this information on the near future.

    Sergi from Catalonia.

    0
  11. 27

    Thank you for a great article. This is very cool – as I did the deep-dive into the information, though, I wished there was a unified CSS sheet showing how to specify the features discussed for modern browsers + ie10, and a separate style sheet showing how to specify the older browsers. The charts are useful, but translating them into a style sheet is going to be painful.

    0
  12. 28

    Geert van de Heide

    May 23, 2013 1:59 am

    As much as I’d like to leave the float mechanism and its limitations behind (it’s really not an effective layout mechanism), I won’t be relying on flexbox any time soon. Just looking at this prefix-ridden implementation makes me shudder and if we’d add all the fallbacks and polyfills to add support for IE8/9, things would look even worse. I like progressive enhancement as much as the next guy, but I’m not willing to sacrifice this much in terms of code simplicity / readability / maintainability.

    Still, the potential for flexbox is huge and I can’t wait for the day this becomes mainstream. Articles like this one do well in introducing developers to the new way beforehand. I’m confident flexbox will become the standard in a few years, and the web will be all the better for it.

    0
  13. 29

    I liked your article and good to learn something new. Is any website currently using flex box property? Or it has yet to come..

    0
    • 30

      To my knowledge, bunch of WebKit specific mobile sites have used it (the old WebKit syntax), and Windows 8 HTML/JS apps often use it, along with CSS Grid. If you’re targeting old-IE then it is likely a no-go (unless you’re willing to polyfill), but if you’re making a hybrid or downloadable app, or mobile specific site, then it is likely that you can rely on it. Old versions of IE are the only browsers still in use that don’t support Flexbox on desktop. Opera 12 too, but Opera users upgrade fast, so Opera 12.10 has likely surpassed it by now.

      0
  14. 31

    Very cool! Thanks:)

    0
  15. 32

    I hope this gets standardized soon. Lack of support makes me weary. Eh, guess it depends on situations.

    0
  16. 33

    Soooo it’s not actually easy with that many vendor prefixes and differing wordings and versions and building fallback support for ie8.

    If say Sass bourbon gets a new mixin or other tools emerge maybe it will be ready enough.

    0
    • 34

      I’m working on a pull request to Bourbon that will allow easy use of all of these fallbacks, except for the `flex` and `order` properties, which will need handwritten fallbacks for the ‘mid’ and ‘old’ versions of flexbox given that there’s no compatability between them. Keep an eye out! I’m not sure if Thoughtbot are still paying much attention to it, given the stack of PRs and issues , but if not, Chris Eppstein (the lead dev of Compass) will be able to resume work on Compass soon, so I’ll try submit to that as well.

      0
      • 35

        Huh did not know thoughtbot was having issues. Will have to research. Thank you for the progress I hope you can get it into bourbon as its much cleaner to just get running and less intense on compiling etc.
        That said compass will do if that’s what it takes. Thank you for the update.

        0
  17. 36

    It seems like a step toward awesomeness, but the Financial Times web app article that follows this one (http://coding.smashingmagazine.com/2013/05/23/building-the-new-financial-times-web-app/) mentions performance being so bad that they had to abandon it. Do you think it is going to be usable on large applications before the performance is addressed?

    0
    • 37

      I think it really depends on how you use it, and the implementation. If it is slow in one browser (I think they used the old implementation in WebKit) doesn’t necessarily mean it will be slow in a more modern implementation in another browser. If you are using it for very complex layouts and manipulating with JS, it is likely going to be slower than doing something simple like centring an element or just changing the source order.

      0
  18. 38

    I’ve never heard of Flexbox. Of all the years I’ve spend using margins and text aligns. Makes life so much easier, thanks!

    0
  19. 39

    IE 11 supports standad flexbox (http://caniuse.com/flexbox).

    0
  20. 40

    Did some digging and found .less and .scss repos that should make using this pretty straightforward.

    Less: https://github.com/ProLoser/Flexbox.less
    Sass: https://github.com/mastastealth/sass-flex-mixin

    0
  21. 41

    OMG. I’m just now trying to learn CSS, any CSS. I’ve never heard of “thoughtbot”, Sass Bourbon???, isn’t that for happy hour???

    Can one of you brilliantly advanced coders tell me what NOT to read, so I can just get a site built without tables? Uhhh! I’m so intimidated now.

    0
    • 42

      Thoughtbots is an outstanding company that specializes in the art of providing high-quality, scalable, testable, and well-thought-out web applications, primarily through the use of Backbone, Rails, and frameworks (as well as tools) they created to achieve such things easier that many have adopted for their own projects such as Bourbon, Neat Bourbon [an extension of Bourbon to make CSS layouts easy with a lightweight amount of mixins (functions of reusuable code)] , Paperclip, FactoryGirl, and more.

      When it comes to SASS, it makes CSS fun again to be simple; I highly recommend looking into it over at http://sass-lang.com/ as soon as you’re confident with your understanding how CSS generally works. It’ll save you a lot of time writing CSS that would otherwise be repetitive really fast.

      From there you can use Compass or Bourbon (or both both via a Ruby gem (plug-in you install via a Ruby console I forgot from the top of my head; I think it’s called neat-compass) that adds on to the functionality of SASS to have an easier time supporting a variety of browsers without having to memorize the syntax differences between browser x & y, helper functions to do things like inline-images easier, and in the case of Compass, it generates sprites for you. This has given people “Oh @#$@$” moments the past few years.

      0
  22. 43

    Anyone else have problems accessing the linked demos? I get a 403 error “The website declined to show this webpage” for all of the dropbox addressed examples.

    0
    • 44

      Dropbox was down for a while. It may have been when you tried to access them. Are they working for you now?

      0
  23. 45

    Hi, I’m extremely new to creating websites and I was just wondering how can I get a footer to work with this? I’ve tried several codes but nothing has worked yet. All I have is a one line header in the body and centered in the middle of the webpage.

    P.S. Love the article! I had spent three days googling and trying to center something and this is the only magically way that has worked so far. Thank you!

    0
  24. 46

    Ok this is just genius, its amazing the direction in which web development is going. I have just found my new toy Flexbox!

    0
  25. 47

    Love how you put Tab Atkins within the flexible athletes slideshow

    0
  26. 48

    Just noticed that on Firefox 22.0 the H1 elements in the last two examples are positioned on the right and take up 100% of the vertical space.
    To fix this, add margin-top: auto; width: 100%; to the H1 elements.

    0
  27. 49

    Lastly… Thought it will never be found a way. Centering is a MUST and this should have been available long time ago. Thank god… Nice article :)

    0
  28. 50

    I really, really like flexbox. It’s finally a step in the right direction for CSS layouts rather than hijacking floats and (god forbid) tables.

    However, browser compatibility combined with the old/new syntax AND prefixing makes it hard to use in the wild. Still great to experiment with, and certainly worth learning but for real world projects I’m not likely to adopt it just yet.

    0
  29. 51

    Newbie question here… on a full size screen, I want to have 4 equally sized spaced horizontally across the page (that’s easy to do). Below 600 pixels, I’d like to have two rows of two equally sized articles… I was hoping that they’d simply wrap if I set a min-width but that didn’t work.

    I can’t seem to find a way to force a ‘line-break’… have I missed something?

    TIA

    Al

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top