A Complete Guide to Flexbox
Background
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.
Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility (no pun intended) to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).
Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
Basics & Terminology
Since flexbox is a whole module and not a single property, it involves a lot of things including its whole set of properties. Some of them are meant to be set on the container (parent element, known as "flex container") whereas the others are meant to be set on the children (said "flex items").
If regular layout is based on both block and inline flow directions, the flex layout is based on "flex-flow directions". Please have a look at this figure from the specification, explaining the main idea behind the flex layout.
Basically, items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).
- main axis - The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the
flex-directionproperty (see below). - main-start | main-end - The flex items are placed within the container starting from main-start and going to main-end.
- main size - A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.
- cross axis - The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
- cross-start | cross-end - Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
- cross size - The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.
Properties for the Parent
(flex container)
display
This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.
.container {
display: flex; /* or inline-flex */
}Note that CSS columns have no effect on a flex container.
flex-direction
This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}row(default): left to right inltr; right to left inrtlrow-reverse: right to left inltr; left to right inrtlcolumn: same asrowbut top to bottomcolumn-reverse: same asrow-reversebut bottom to top
flex-wrap
By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. Direction also plays a role here, determining the direction new lines are stacked in.
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}nowrap(default): single-line / left to right inltr; right to left inrtlwrap: multi-line / left to right inltr; right to left inrtlwrap-reverse: multi-line / right to left inltr; left to right inrtl
flex-flow (Applies to: parent flex container element)
This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>justify-content
This defines the alignment along the main axis. It helps distribute extra free space left over when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
.container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}flex-start(default): items are packed toward the start lineflex-end: items are packed toward to end linecenter: items are centered along the linespace-between: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren't equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.
align-items
This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}flex-start: cross-start margin edge of the items is placed on the cross-start lineflex-end: cross-end margin edge of the items is placed on the cross-end linecenter: items are centered in the cross-axisbaseline: items are aligned such as their baselines alignstretch(default): stretch to fill the container (still respect min-width/max-width)
align-content
This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
Note: this property has no effect when there is only one line of flex items.
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}flex-start: lines packed to the start of the containerflex-end: lines packed to the end of the containercenter: lines packed to the center of the containerspace-between: lines evenly distributed; the first line is at the start of the container while the last one is at the endspace-around: lines evenly distributed with equal space around each linestretch(default): lines stretch to take up the remaining space
Properties for the Children
(flex items)
order
By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.
.item {
order: <integer>;
}flex-grow
This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).
.item {
flex-grow: <number>; /* default 0 */
}Negative numbers are invalid.
flex-shrink
This defines the ability for a flex item to shrink if necessary.
.item {
flex-shrink: <number>; /* default 1 */
}Negative numbers are invalid.
flex-basis
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what it's brethren max-content, min-content, and fit-content do.
.item {
flex-basis: <length> | auto; /* default auto */
}If set to 0, the extra space around content isn't factored in. If set to auto, the extra space is distributed based on its flex-grow value. See this graphic.
flex
This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}It is recommended that you use this shorthand property rather than set the individual properties. The short hand sets the other values intelligently.
align-self
This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.
Please see the align-items explanation to understand the available values.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}Note that float, clear and vertical-align have no effect on a flex item.
Examples
Let's start with a very very simple example, solving an almost daily problem: perfect centering. It couldn't be any simpler if you use flexbox.
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever */
height: 100px; /* Or whatever */
margin: auto; /* Magic! */
}This relies on the fact a margin set to `auto` in a flex container absorb extra space. So setting a vertical margin of auto will make the item perfectly centered in both axis.
Now let's use some more properties. Consider a list of 6 items, all with a fixed dimensions in a matter of aesthetics but they could be auto-sized. We want them to be evenly and nicely distributed on the horizontal axis so that when we resize the browser, everything is fine (without media queries!).
.flex-container {
/* We first create a flex layout context */
display: flex;
/* Then we define the flow direction and if we allow the items to wrap
* Remember this is the same as:
* flex-direction: row;
* flex-wrap: wrap;
*/
flex-flow: row wrap;
/* Then we define how is distributed the remaining space */
justify-content: space-around;
}Done. Everything else is just some styling concern. Below is a pen featuring this example. Be sure to go to CodePen and try resizing your windows to see what happens.
Let's try something else. Imagine we have a right-aligned navigation on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.
/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
/* This aligns items to the end line on main-axis */
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
/* When on medium sized screens, we center it by evenly distributing empty space around items */
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
/* On small screens, we are no longer using row direction but column */
flex-direction: column;
}
}Let's try something even better by playing with flex items flexibility! What about a mobile-first 3-columns layout with full-width header and footer. And independent from source order.
.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach
* in this case:
* 1. header
* 2. nav
* 3. main
* 4. aside
* 5. footer
*/
/* Medium screens */
@media all and (min-width: 600px) {
/* We tell both sidebars to share a row */
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
/* We invert order of first sidebar and main
* And tell the main element to take twice as much width as the other two sidebars
*/
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}Prefixing Flexbox
Flexbox requires some vendor prefixing to support the most browsers possible. It doesn't just include prepending properties with the vendor prefix, but there are actually entirely different property and value names. This is because the Flexbox spec has changed over time, creating an "old", "tweener", and "new" versions.
Perhaps the best way to handle this is to write in the new (and final) syntax and run your CSS through Autoprefixer, which handles the fallbacks very well.
Alternatively, here's a Sass @mixin to help with some of the prefixing, which also gives you an idea of what kind of things need to be done:
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
.wrapper {
@include flexbox();
}
.item {
@include flex(1 200px);
@include order(2);
}Related Properties
Other Resources
Bugs
Flexbox is certainly not without its bugs. The best collection of them I've seen is Philip Walton and Greg Whitworth's Flexbugs. It's an open source place to track all of them, so I think it's best to just link to that.
Browser Support
Broken up by "version" of flexbox:
- (new) means the recent syntax from the specification (e.g.
display: flex;) - (tweener) means an odd unofficial syntax from 2011 (e.g.
display: flexbox;) - (old) means the old syntax from 2009 (e.g.
display: box;)
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (old) 21+ (new) |
3.1+ (old) 6.1+ (new) |
2-21 (old) 22+ (new) |
12.1+ (new) | 10 (tweener) 11+ (new) |
2.1+ (old) 4.4+ (new) |
3.2+ (old) 7.1+ (new) |
Blackberry browser 10+ supports the new syntax.
For more informations about how to mix syntaxes in order to get the best browser support, please refer to this article (CSS-Tricks) or this article (DevOpera).
Yay. Less javascript and more CSS. What’s not to like? Great info, as always!
Flexbox its fine, but It is still not valid for a simple perfect “product grid” with no margins at first and last elements in row, and left aligned. Otherwise: could you build this layout using flexbox? http://i.snag.gy/VHJsV.jpg thanks
@Alex Yes, you can. In the same manner that you do so with non-flex grids, apply a negative margin-left to the grid wrapper, and apply that same value as padding left to all grid columns.
Look at http://inuitcss.com for how it’s done with inline-block elements, which allows you to apply vertical alignment to columns, too.
@Alex @Lawrence That has little do with flexbox itself.
.el:not(:last-of-type)and similar exclusion selectors. Negative margins are rubbish.@mystrdat You’re correct, it has nothing to do with flexbox. Using :not selectors, however, will be unscalable, and you will lose IE8 support (less of an issue now).
If I have a grid with 8 items, each occupying 25% of the width, that technique fails, since the 4th item will not sit flush with the container edges.
If I have a grid with 4 items, 25% width on desktop, and then 50% width on mobile, that technique fails again, for the above reason. How about managing 3rds, 5ths, 6ths, 12fths, etc., and when columns change to use different widths across viewports?
I wouldn’t call negative margins rubbish. Perhaps not ideal, but they solve a complex problem elegantly. http://tympanus.net/codrops/2013/02/04/creating-nestable-dynamic-grids/
@Alex .. actually, it’s alot simpler. Just use
More here
Thanks for the info.
The CSS Working Group has a document online of “…Mistakes in the Design of CSS”, one of them is this:
“Flexbox should have been less crazy about flex-basis vs width/height. Perhaps: if width/height is auto, use flex-basis; otherwise, stick with width/height as an inflexible size. (This also makes min/max width/height behavior fall out of the generic definition.)”
Can you talk about what they mean by this?
Ahojj
Jsem vadnej co s tym?
Asy butu breczet
For your final example, how would you make the content (center row) take up all available space, so that at minimum, the footer is pinned to the bottom of the window – but if the content area has more content, the footer will push below, allowing scrolling. This can be accomplished by setting a min-height on the content row: calc(100% – header-height – footer-height) but it requires hard-coding or JS to accomplish AFAIK.
@Lawrence at the point of using flex does IE8 not become a problem already? I think the grid solution could be solved with nth-child. Then using media queries to make appropriate adjustments based on the users screen.
Perfect Product Flexbox Layout (using justify-content: space-between and filler products):
See the Pen Aligned Row Wrap Flexbox by Andy Maleh (@AndyMaleh) on CodePen.
Though to be honest, I don’t like that I had to use fillers for the Flexbox implementation to ensure the last row is spaced evenly.
It would be mighty nice if they offer Flexbox row selectors for multi-row wrap flows.
Here is an alternative implementation with display inline-block:
See the Pen Aligned Row Wrap Inline-Block Layout by Andy Maleh (@AndyMaleh) on CodePen.
Not working on iPad, iPhone, desktop safari also. Any solution?
Your last example only works with no content. If you put some text in Aside1 the 3 column Layout is gone.
@Hubert: Yes the 3 col layout needs this added.
I mentioned it a while ago in an earlier post and assumed someone would update the demo.;)
@Josh McCullough its pretty simple to achieve that, better and easier then ever before. Just use the flex property and set it to 1, for e.g:
flex is a very powerful property and can be used in the shorthand of flex: 1 1 auto; (grow, shrink and basis) – using just flex: 1 tells it to take all the remaining space thus making the footer stick at the bottom. Look an eye out for grid to make a proper entry into the browsers and we would be having magic on our plates in terms of layouts.
See it live in action:
Well, it’s bad on many levels. Too verbose, hard to manage, it already creates “frameworks” around it, just to make it manageable. 25 years ago we already had tools, WYSIWIG IDE’s and ways to define UI and “responsive” views… For geeze sake, can we come back to roots and come up with simple and effective markup language with UI tools and plain resizing rules for view elements!?
Hey Chris,
Thank you so much for the comprehensive write up.
I just updated Firefox to v20 on a mac and now all of the flex-box demos aren’t working. Everything still looks great in Chrome.
Anyone else having this problem?
Issues with Ch 34.0.1847 on OSX 10.9.2
Thanks for the writeup Chris!
FF 2-21 (old) – (old) means the old syntax from 2009 (e.g. display: box;)
The demos are using the new flexbox specs which requires FF 22+
Not working for me on ubuntu 14.04 with firefox 29
The only thing I don’t understand is why the use of prefixes is needed if the syntax doesn’t differ from the recommendation.
I think what would be enough is (using the above example):
At the moment this is not supported, but I think it should be because everything that was left out here had the recommended syntax. The prefixes still should be available if needed, but it shouldn’t be necessary.
Good explanation of the need for multiple vendor prefixed rules here:
http://css-tricks.com/using-flexbox/
See code examples with comments…
Vendor prefixes aren’t just about syntax differences. They (arguably much more importantly) separate out implementation differences. What would happen if we just had one unprefixed word for a feature, and the syntax of its attributes was consistent across browsers, but the rendering behavior was different? Then you’d have to do ugly browser sniffing and serve different files to the client conditionally, like we did back in the dark ages of IE6.
Once everyone has a correct implementation, then the prefixes can be dropped. Otherwise, the most popular browser’s implementation of the feature becomes the de facto standard even if it’s the most broken (again, IE6)
Regarding the example with the 6 items of fixed dimensions to be evenly distributed – using the
justify-content: space-around; rule:
I’d really like to use this, however it’s not doing exactly what I want. Let’s say there’s only room for 4 of the items on the first row, the remaining 2 will be evenly spaced on the second row. (ughh)
Is there any way for items on the last row to be placed/aligned underneath the elements from the previous row (left->right)??
This is something that can be done with the grid layout module, but it is not supported by the browsers yet.
You could always use tables and calc()
@Coolcat007 You mention that this can be done with tables and calc() – is this so – even if you have a dynamic number of items?? If it is – any chance of a fiddle / codepen?
Thanks!
@Daniel
Sorry, I misunderstood your question. For a dynamic number of items, this won’t work without JS or php.
This is indeed a thing that could be added.
Something like align-items:main-axis /cross-axis could be a great addition.
I think the browser support table is missing a cell, the one with Opera’s version 12.1+.
The table, as it is now, shows “Any” for IE. It’s funny! :)
Fixed, thanks!
Works beautifully in Chrome and Safari, but I’m on FireFox (v21) and it’s not working well at all. It doesn’t allow the paragraphs to break. It’s like it’s treating the display:flex as display:inline-flex. The only way I’ve been able to get around this is to change the about:config of Firefox to multiline, but visitors won’t have that set by default.
Has anyone had any luck with this? Currently I’m using flexbox for webkit and equalize.js for other browsers.
I think that’s because flexbox isn’t fully supported by firefox until v22. That’s why I’m running the v22 beta at the moment. You can always use the display:box untill ff22 is released.
Am I crazy enough if I use this in production? I have a really awkward situation and I can’t use display: table. It messes up with the fluidity of the images.
You can use flexbox in production pretty well as long as you’re using a sound way to detect less-than-ideal support for flex-wrap w/ modernizer and use a ratio-based grid system like Singularitygs as a fallback.
An example: http://sassmeister.com/gist/9781525 (toggle the flexbox and .noflex option.
It’s a sound strategy to the extent you can use flexbox first towards planning for the layout and quickly create the fallback with a ratio-based grid system.
As long as you’re considerate enough to have a style guide that documents documenting how a particular component ought to look if it in facts differs from both, you should be fine.
Flexbox is now unprefixed in Firefox (22).
I found a compass compatible mixins
In your second Codepen example (with the blue navigation bar), I couldn’t figure out why the flow-direction: column doesn’t seem to kick in at the smallest screen width. I played around with a few values and found that explicitly adding some height to the ul.navigation made the li’s stack vertically. Is there a better way around this without requiring a hard-coded height?
That’s because the code for max 600 width is missing a flex-flow: column wrap; if you are using firefox. It only contains one for web-kit. Once I added that in, it does it nicely in my FF.
Thanks for the post. I found it highly insightful.
Something weird is going on in the first example’s pen (http://codepen.io/HugoGiraudel/pen/LklCv). I tried recreating it on CodePen and noticed it wasn’t working, even when I copied and pasted! Then I tried recreating it locally, copied and pasted, and again it didn’t work. So then I took to the Chrome DevTools to take a look at what was going on and it looks like even though the pen uses the rule
justify-content: space-around;, what is actually rendered on the page is-webkit-justify-content: space-around;. Turns out prefix-free was turned on in the CodePen config for the Scss panel.Even if this was CodePen’s prefix-free doing the work for me, mixing vendor prefixed rules and non-prefixed rules that the preprocessor transforms should be a no-no.
Thanl you for the mixin’ Chris
Nice post Chris. I like how thorough and detailed you are. Too bad we don’t use SASS, we rely almost solely on LESS. We would love to use Flexbox for clients, but it doesn’t seem to play nicely cross browser. I checked this page in FF22 and IE10 and it was a mess.
Do you, or anyone else, know of any good JS polyfills or plugins or solutions to get this to play cross-browser nicely? Otherwise, how long (in your opinion) until we can ‘realistically’ use this without a lot of cross browser headaches?
Great post Chris. I think that flexbox capability to order items will be usefull in RWD.
I’ve got only a question. When you define main-axis you say that its direction depends on the justify-content property, but isn’t the flex-direction property that defines if flex items are layed out as a row or as a column? Am I misunderstanding something?
You’re correct, that was wrong in the article and is fixed now.
Hey, anybody knows real site that using flexbox?
I know that SM try to use it some time ago, but returns to floats.
Hey ZippZipp,
I tried to build my personal/portfolio site with flexbox a few months ago, but got super frustrated with the syntax. I just found this Sass helper https://raw.github.com/timhettler/compass-flexbox/master/extensions/compass-flexbox/stylesheets/_flexbox.scss, which is working really well so far. I’m hoping to launch my new site in the next 2 weeks using flexbox for everything except IE 8/9.
I would like to find one too, but older browsers just make it a big pain… I’d rather use floats to keep the headache away and less code.
Just yesterday I was checking my browsers support and I saw that flex is now un-prefixed in these versions, but unfortunately not everybody has updated browser versions.
IE11
Mozilla Firefox 27.0.1
Chrome 32.0.1700
Opera 19.0
Safari still uses the rule: “display: -webkit-box;”
Safari 5.1.7
I did a school project using flexbox (with help from Autoprefixer): edensg.github.io/ASM2O
I think you mean flex-direction.
I think in column-reverse you mean but bottom to up
Thanks very thorough explanation
Firefox 22+ has unprefixed Flexbox, but, unfortunately, it still doesn’t support flex-wrap property (and hence flex-flow shorthand). So the wonderful example with 3-column layout reducing to 1 column on narrow screen in Firefox looks really messy. But it’s possible to create its simplified analog that works in both Chromium-based browsers and Firefox 23+: http://codepen.io/anon/pen/pEIKu
Wow, its really the one the best post i ever read on this topic. The steps which you have mentioned are really perfect.
Hey, Cris! Looks like “flex-wrap” incorrectly works in Firefox and Opera! Both tomato blocks and very last demoes do not work!
Is there some workaround already?
And thank you so much for your website! ;)
Yes, only latest Chromium-based browsers like Chrome, Opera 16+ etc. seem to support multi-line flexboxes currently. As a workaround, you can use nested flexboxes in combination with media queries, as in my comment above (it’s not so flexible as true multi-line flexboxes, but still better than nothing) or use graceful degradation to old techniques like inline-blocks.
I’ve found that, in Chrome 29,
<input />and<label>do not respectorder. Anyone else observed this, or have an idea as to why?Flexbox is what CSS has been sorely lacking since its inception – an easy way to create flexible web page layouts without the need for floats, clears, margin: 0 auto and JS hacks. I look forward to the day when flexbox is supported by a big enough share of the browser market to put into this all of our production sites.
Thanks for the awesome tutorial, just managed to use the knowledge to make a sweet way to build tournament brackets! You can check out the codepen at http://cdpn.io/qliuj
I find myself doing a Mr. Burns “excellent”, as I’m pretty excited about
align-items: stretchI am trying to make my video rich website “FLEX”. The site scales ok but the Vimeo iframe videos do not.
I was trying to use the FitVids.js script to make this work but I am not sure how to make that work with my Weebly template. (YES I am not a website professional, I know nothing about CSS or HTML) But I have been tasked with this job and I need to make it work properly. Any help would be appreciated. Using Firebug plug in the Firefox browser I saw this code about Flex Box… How do I modify this to make the videos Flex?
column-reverse: same as row-reverse but top to bottomDon’t you mean bottom to top?
Correct, I’ll fix that in the article.
I really like this post. It got me started with my project.
i had a problem with firefox like other users here but came over it by wrapping the columns/rows in more container like a user suggested.
I have another problem though. This time it’s with IE11. If you look at your example of the menu, you will see that on the smallest width the menus are not shown in columns and stays as rows.
On my side I had a different problem with IE: the columns were showing but the items in them had no height! So everything collapses for no reason. Of course it’s fine in Chrome and Firefox (25)
There is a typo with the portion on flex grow. It doesn’t inhibit understanding the content, but it would be nice if you fix it.
The W3C needs to get off their a** and push this through. A consistent browser implementation will make life so much easier for creating layouts.
Am I the only one that thinks this ‘article’ should be in the “article” section?
Chris, I couldn’t vertically align some content in print media, do you know where I could find more information about this kind of support?
My test looks something like this,
CSS:
HTML:
Not all browsers support paged media, does the paged media example work without the flexbox?
What does 22+ (new), in the Firefox support table means?
Meaning version 22 of Firefox which is the newest version at the time the article was written.
And the + means “and up”
One of the best article I have ever read. Thanks!
Nice tutorial. Has anything changed this this tutorial was published?
Also it doesn’t work for me in IE10.
IE 10 has the tweener syntax, so make sure you’re prefixing for that. Autoprefixer does a great job of writing in the latest syntax and handling the fallbacks.
Great article. I found it helpful to see what is coming along the horizon. The company I contract for right now uses IE8 so I have to wait until they move to newer version of IE. I have always wondered why a good layout system has been missing from CSS. Better late than never I guess. I look forward to using this on touch devices with webkit.
Nice work man!!!
Having trouble with 2 flexboxes aligned horizontally when one is set in column flow and the other in column-reverse flow.
See pen: Flexbox Alignment Sample
How do I fix this? Thanks!
See the Pen Flexbox column-reverse Next Element Alignment by Brad Spencer (@bradomail) on CodePen.
Simple fix I think. You need to set the container(#window) to flex so that your 2
<ul>s are flex children.
Wow, that was simple!
Thanks Justin.
Chris, your embedded Codepen demo is broken, perhaps because of the new rendering engine update on Codepen? Just my assumption :p. Anyways great article, it helps me a lot! Thanks…
This is the error on the embedded codepen
{"success":false,"errors":{"error":["Load on secure subdomain."]},"status":200}Temporary thing, sorry about that!
Hy,
in your first example, the child element has been centered by (magic!) margin: auto;
This solution does not work in IE11 if the child element has no defined height, for example, if the height is determined by the content.
All other browsers behave as expected.
.parent {
display: flex;
height: 300px; /* Or whatever */
}
.child {
width: 100px; /* Or whatever /
height: 100px; / Or whatever / —- Doesn’t work in IE11, if the height is determined by the content —-
margin: auto; / Magic! */
}
Your definition of “main axis” has a bug: you say it’s dependent on justify-content but I think you mean to say it’s dependent on flex-direction.
That was incorrect in the article and is fixed now. You’re correct, it’s
flex-direction.I messed with this a bit today. I’m interested but a bit confused at the same time. If I code it (literally copy it) from what you have here to CodePen it runs as yours did. If, however, I try that on JSFiddle ( where I normally mess around ) the colors come out in a straight line only. Also, if I load the entire page via jQuery, as I’ve been doing lately, the same result… Instead of the framed environment you’re getting I received flat little lines. I’ve even tried injecting the CSS into the Header before building the page via jQuery with much the same result. Seems that this only works without jQuery and for whatever reason only on CodePen.
Would you happen to know how I could code in a horizontal split ( like they have on Code Pen ) that separates the top of the window and the bottom of the window and moves fluidly when the bar is moved, with flexbox framework? Any help would be appreciated, thanks!
The draggable bar isn’t going to happen with just CSS, flexbox or no, save for some super crazy hack using a resizeable textarea or something. On CodePen we use jQuery UI draggable, but there are others out there. Flexbox does make the situation easier though. One time I redid the whole CodePen editor layout in Flexbox for fun and it was way easier, but of course I can’t find it now. Basically if the flex items have flex: 1; they will fill the area, so you just resize one of them to a specific height (or width) and the other will fill the remaining space. So no math.
Do you know of any working examples of jQuery UI Draggable for a horizontal split pane? I’ve been messing with it for a couple of days now and can’t seem to figure it out.
Hi Chris,
I’m trying to make a div which its width auto grow with its contents.
Using this:
There seems a bug that with the container’s main size, please see this pen
wrong main size when flex-driection is column
Can u check Safari…
flex property not supported.
This is just beyond comprehension
I found this article confusing. I’m a frontend developer and still couldn’t understand a single term that was used to explain what I was looking at.
Thats weird, I’m an amature and I could read it with ease.
Well played. Thanks Chris.
This will certainly be a great tool to have once it’s better supported. For now it seems to me it’s best to lean on js, or just stick to a design / layout that can be manufactured with less-buggy (if you will) off the shelf parts.
If design doesn’t consider manufacturing then that’s not design. That’s art. There’s a difference.
This is like a CSS angle pissing on my tongue. Awesome.
Perhaps not the best place to ask, but I am struggling with making a responsive flexbox fluid layout. What I want is 3 breakpoints like this:
1) 3 rows (containers vertical, small screen)
2) 2 columns, 2 rows (medium screen)
3) 3 columns (large screen)
1 en 3 are easy, I just change the flex-direction from column to row. But how about 2)?
So basically it must look like:
A
B
C
A B
C
A B C
Gonna answer my own question. The reason I could not get it to work is because IE11 does not like a max-width to be set on any flex-item. If you do, it wrongly calculates the space around or between the items.
Evert, I just ran into that same issue! I was beating my head against it for a good hour until I discovered that IE11 doesn’t like max-width on flex items.
Great article, thanks. Regarding the the browser support table, I think that IE11 may have full support of the specification.
Ref: http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx
Thanks.
Does using flexbox responsibly meaning coding the site via flexbox and usual css positioning methods as a fall back for browsers who dont support flexbox, coding the layout twice? Just thinking workflow wise…
Thanks Chris! This is an excellent Flexbox reference. I have implemented a basic Holy Grail template: http://noseyparka.me.uk/2014/03/26/a-holy-grail-flexbox-layout/. Flexbox is a thing of beauty!
Nice Job!.
Thanks for sharing this.
I found this Polyfill for flexbox, http://flexiejs.com/
Things I noticed using flexbox that are a real pain:
Using margin: 0 auto; on the flex-container shrinks the container (and it’s containing flex-items) to the minimum width. It is no longer flexible/fluid.
Because of this, any fluid, centered layout must use justify-content: center/ or space-between. But then the layout becomes “infinite” (you can make the screen wider and wider and the boxes and spaces will happily distribute themselves across that space possibly breaking any design restrictions). So in order to prevent that we could set max-width on the flex container, but that cancels out the centering for some reason and the page flushes left. So the only other possibility is to set a max-width on one or more flex-items…but those will break in IE11 because of some bug.
In short: flexbox will only work practically when using the full screen width and not limiting any flexible item with a max-width. As soon as you want to set a limit to any item, it falls apart.
I too see no other advantage for this than limiting some lines in my media queries
This really annoyed me and was broken for a bit, so I wanted to share in case anyone ever comes across this in the future. If you need to support blackberry 7+, make sure you use
-webkit-box-orient: vertical;-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
…if you use row wrap, it doesn’t wrap and just puts everything side-by-side. Also, very important. Make sure the child elements of the parent flex container don’t have
display: inline;applied to them. It breaks it for some reason. I hope this helps someone!One last important thing to remember if you have to support blackberry 7+…make sure all child elements have
float:noneapplied to them…if floats are applied, they’ll just not appear. I hope this helps!Bah, thanks so much, this helped me on Samsung Galaxy as well. Cheers!
In the first line of the SASS mixin, shouldn’t
@mixin flexbox()be just@mixin flexbox?Chris, this example does not work in IE11
could you please suggest, how I can have support on IE11
The .wrapper defined “-webkit-flex-flow: row wrap;” only, add “flex-flow: row wrap;” and it works in IE 11 and Firefox.
Where are things:
Those are deprecated properties. I feel like it’s best at this point (at least in terms of this guide) to focus on the current properties. Also best in practice to let a tool like Autoprefixer deal with inserting those older properties for you when needed.
Amazing writeup and excellently explained, you saved me fairly a LOT of time I would off spent learning all this combining all the broken and outdated articles over the web :D thank you so much !
This is a great article. I’d love to see the pens using the flex wrap updated with “flex-flow: row wrap;” added un-prefixed so they work in Firefox 29! But still a very good and informative article.
Chris I really need this. Thanks!
Is there a way to specify a minimum for inter-elements spacing when using
flex-wrap: wrap;? The only way I’ve currently found forces me to add a padding to the container which isn’t ideal.Please forgive my newbie ignorance.
I’m thinking that I would experiment with a background color of the site, then the container would be another color (centered) and then the flex items yet another color.
I get how to center the flex items themselves, but how would you center the container itself? And is that something one would even want to do?
Thanks
margin: 0px auto;
think I figured it out….feel very dumb right now!
Hi Chris! Very nice article! But the last example “mobile-first 3-columns layout with full-width header and footer” in my 34.0.1847.131 chrome didn’t make the two sidebars half of the size of the main content.
I had to write:
@media all and (min-width: 800px) {
.aside-1 { order: 1; flex: 1 25%; }
.main { order: 2; flex: 2 1 50%; }
.aside-2 { order: 3; flex: 1 25%; }
.footer { order: 4; }
}
On the last media query in order to do that ( http://cdpn.io/rhbmd ).
Thank you for introducing me to the wonderful world of flexboxes! great tutorial!!
Wow! I had bookmarked the article before and have come back to it today as a reference. Really like the re-haul, makes it even more useful! Cheers to you, Chris.
Great work on the updated format! The guide was crazy informative before but now it’s also a great cheat sheet when needed. Thanks!
Great guide, nice update! Has always been very useful.
One thing I’ve noticed missing (here and almost every other flexbox guide) is how to do flex-grow and flex-shrink in IE10.
flex-grow
-ms-flex-positive:;flex-shrink
-ms-flex-negative:;Would be great to have this footnoted somewhere.
@Ry, good point. I happen to use Autoprefixer, which added this IE-specific property name in for me. I wouldn’t have known otherwise.
I love all that can be done with the flex box model, now only if all the browser could support it the same way! How does the flexbos fall on browsers that don’t support the CSS3?
Thanks so much for updating this post — by far the easiest-to-understand guide to flexbox ever written. You deserve at least a six-pack of Rolling Rock for this one, Chris — if that’s still your brew of choice that is :-)
Hi,
I was hoping someone might be able to help me out (I’m pretty new to all of the programming stuff).
I created a flex box and arranhed the items in it in a column layout. I then did ‘justify-content:center’, but the elements stay on the left-hand-side of the screen, even though the width of the container is 100%. Is there an easy way to center everything in a container box when arranging elements as columns? Hope this makes sense.
Cheers,
Steve.
Hi Stephen, I believe that justify-content isn’t to be used for this purpose. If you flow the elements by column (vertically), the justify-content: center will really display the elements in the center bit of the flex box vertically, i,e, some space at the top, then your elements, then some space at the bottom. What you wanted is for each element to center align horizontally, which you can probably achieve by using text-align property.
Hi Jay,
Thanks for getting back to me so quickly. Ah yes, I guess because I didn’t set a height on the flexbox, I didn’t see how the elements were centering vertically.
Thanks,
Steve.
Thank you Chris, for the article. Crisp, crucial and highly valuable. I enjoyed it.
Does Compass support flex box? I see that they have what seems to be the old version of flex box in the documentation. But then on codepen.io, when you include compass you are able to use the other directives. Like @include display-flex? I’m unable to get this working locally however. Ideas?
Forget about Compass and use Autoprefixer instead (with gulp/grunt). Personally, I just use it for vertical rhythm calculations now as Compass will be big no no for a libsass in C++.
Hey i’m interested in why this background: darken(colour, % ) part of code is not working for me, i tried to do it by myself with my own examples and it didn’t work so i pasted your code form codepen and it still doesn’t work. I’m sorry if i’m asking a noob question and there is something obvious that i’ve missed!?
Incase a haven’t been clear thats the example that concerns a making of dynamic navbar!
Thanks a bunch!
SRBIOTIK
That’s a Sass function.
Oh, sorry i forgot i’m using the latest version of Firefox and Chrome!
Thanks a bunch!
Bit of a long shot here, but do any Email clients support Flex box..? Would be useful in HTML emailers to rearrange the order of elements.
main axis – “The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the justify-content property (see below).”
flex-direction – “This establishes the main-axis,…”
These two are in conflict right..? :)
Correct. It’s
flex-direction. I’ll update. (Then bury this as no longer relevant).Testing flexbox in Safari now.
What works in all other browsers, either doesn’t work in Safari, or doesn’t work correctly.
Really frustrating…
The demos here don’t work correctly either (especially the last one).
this property not working android 4.1.1 browser . How it will be work on mobile browser
I think the Support Chart is out of date for Safari. Should read:
6.1+ (new)
3.1+ (old)
According to http://beta.caniuse.com/#search=flexbox
Similarly, Android 4.4+ (new), iOS 7.1+ (new)
Thanks Scott!
Chris,
You have obviously given a lot of thought to how to present this information as clearly as possible.
Outstanding work – thanks.
How do you all know what works in which browser version? Where is flexbox standing now for support?
I just learned about flexbox yesterday so now I’m all anxious to learn more. I’m a little hesitant because of browser version support.
You can find more detailed information about browser support when you type in “caniuse flexbox” in google.
Hi, I was wondering if anyone could help me out with a flexbox problem. I’ve set a container width to 100% and put six div items with width of 20% in it. I was expecting to see five divs evenly space and the sixth div directly underneath the others, one line down (I’m using row-wrap). This kinda works, but there is a big gap between the five divs across the top of the page and the sixth div below them. I need to know how to get rid of the gap. Here is the Codepen:
Any help would be much appreciated.
Thanks,
Steve.
try align-content: flex-start; on the container. I’m not too sure if it will help for your purpose, but with your demo it works.
Also, I would rather set flex: 1 1 20%; on each sub item instead of specifying the width (again, it depends on what you want to do).
Hi there,
Thanks for both of the tips; the first one works well and solves the problem I was having.
If you have time, I was hoping you might be able to elaborate on the second one a little. In all honesty, I’m not really sure how the code is being interpreted. I understand that giving everything a flex size of 1 gives everything an equal amount of space, but is the 20% overriding everything the first 1? I’ve played around with the second 1 in the code you provided, but it doesn’t seem to do anything. Oh, and the purple box now fills the entire width of the screen, which looks good, but is it the first 1 doing that since it is clearly taking up more than 20% of the container now? Anyhow, don’t mean to be lazy; I can look this stuff up tomorrow. Time for bed in the UK though.
Cheers again,
Steve.
Guys, what about “order”. It doesnt look good in safari, even doesnt look anyhow. 8) how to make it work in safari?
I gave up on Safari. Not supporting it on my sites.
You could just revert to floats for it, but when I discussed it with my employer he said “no one uses it anyways”.
@Stephen, play around with flex: 1 1 20%
Safari 5.7.1
Works only this:
display: -webkit-box;And that’s it. Nothing else can make work :-(
I’ve read that this version of Safari is (old), but how it should to looks like?
Can’t handle it…
in the first example (with the 6 orange squares)… is there a way to request the current number of columns and rows within a flexbox container? or at least the current number of rows (since the columns are not rigid)?
thanks!
Hi!
This guide is wonderful, seriously, guy who did this deserve a BIG nice glass of GOOD beer.
But I have issue:
I made a website, where container’s div is flex and direction is column.
Inside this container I have 3 divs. I want last one (footer) to be always at the bottom of this page.
Is this possible to do? I know it is of course ;) but I want to use only flex-box model.
Regards, mates!
Ok, i got it, there was no question xD Sorry. Thanks anyway! This is best place to learn CSS Tricks.
Regards again!
Paweł, use order: and width: parametrs.
width: 100% and order: the last div in your list.
But Note: Internet Explorer and Safari do not support the order property.
And why width…?
I did it that way:
https://www.dropbox.com/s/y8wccmz7hzmkpdb/Zrzut%20ekranu%20z%202014-07-29%2011%3A57%3A31.png
Do you see any issues that may be?
IOS7 use -webkit-justify-content
justify-content doesnt work
one of the best explanation for css flexbox model
Great post man. I’ve been wanting to learn more about flexbox ever since one of the guys on my team showed it to me. This is the best resource I’ve found so far.
Hi
My requirement is need to alignment support all browser without use Javascript. Use only CSS/CSS3.
Note: Particular para line Margin top value support all browser(Mozilla, Chrome, Safari) as per match PDF. But IE-11 browser some different its will came._ In case for adjust IE-11 Browser, at the time margin-top value change another browser._ So, how to modify all browser requirement. If any possible on that particular IE-11 alignment modification style-sheet.
Please give any solution that issue.
I am working with flexbox on a few different projects now and love it. Only downside is all the prefixes that you need.
For my projects I made a less mixin stylesheet that has been tested and works in the most recent browsers (latest version -1).
Hoping to help some more people out I put it on my github, so if you want a little help getting started you can grab it there github.com/annebosman/FlexboxLess
ya its good.
Best flexbox resource. I often use this page as a reference – many thanks!_
I’ve been experimenting with
flex-wraprecently, and found that Safari doesn’t support it (on desktop or mobile), although it claims to, ie.Modernizr.flexwrapis true. I’ve filed a bug report with Modernizr for this. Wanted to spread the word, since there seems to be some confusion around this property flying around in the wake of Firefox previously not having supported it.it seems many properties aren’t supported by safari: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
something as important and necessary as wrap makes it a no-go for me (but i’m a new-b)
plus i think that, as great as it is [and CC knows how much i love him], combining old and new is still another hack that flex box was supposed to eliminate
and i ain’t got time for that!
This article is one of the ones I’ve read countless times right now. I’m near the state knowing it inside out ^_________^
Great post! It’s a reference.
Hi,
I’m trying to build simple layout. Could anyone help me with this? I was wroten some code reading article.
Want to have this:
Try to open this (i want to display in this way)
But now block number four is moved to center and on the bottom of block number two (whole layout). I want to get it on the right side of the block number two, but below of the block number three.
(i must remove because message was rendering in wrong way)
Thank for the writeup! I will implement it in a new project. :D
In case someone is trying to do a grid layout using flex, I found this helpful for aligning items in the last row: http://codepen.io/dalgard/pen/Dbnus
Frickin’ love this update! Sad to think we’re still another few years out from implementing this without fallback support. :(
I have a flexbox container.
Inside this container, I have two items. A content area and a footer. Using “space-between” on the container sticks the footer to the bottom of the browser window and sticks the content area to the top of the browser window.
I want the footer to have a set height of 52px and I want the content region to automatically fill the rest of the empty space.
What CSS is needed for the content area to fill the remaining space relative to the footer?
I want to be able to infinitely expand the browser window and always have my content area fill the empty space and I never want the footer to change size.
Any help would be greatly appreciated, thanks!
I figured it out. Here is the solution that I came up with:
I started on an idea for HTML as a presentation format using flex.
http://ionlyseespots.github.io/ambient-design/index.html
Hi
Can someone point me to a tutorial or demo of using iframe within a flexbox container. I have tried and it is failing to keep aspect ration and the usual padding trick doesn’t seem to work. Alternatively is there an easy solution you could give me here.
Many thanks
Richard C
It seems that example images for
space-aroundin this article are a bit inaccurate. From these images, one may think that these values result in equal spaces between items, before first item and after last item. Actually, the space between items becomes twice as big as the space before first item/after last item, since the portion of free space per each item/line is distributed equally before and after it, so there are two halves of such portion between items, but only one half before the first/after the last one.That’s a nice clarification. I can update the wording to more clearly describe that.
Thanks, Chris! Can you please update the align-content section similarly?
Yep. Burying cause fixed. Thanks!
I believe there is no better place on the web to start learning about flex.
Thank you for your work.
After reading your great article on how to use flex-box, I came across this article that says don’t use flex-box for overall page layout.
Any comments on how valid the above article is. If it is valid is there are work around to still using flex-box for page layout without the performace hit?
Thanks.
I kind of agree with the article. Both Flexbox and Grid layout have their pro’s and cons. The flexbox is more suitable for dynamic content (think about displaying a random amount of images of a random size), where the grid layout is preferable for known content areas. Both can adjust for the screensize, but are optimized for different applications.
The mobile-first 3-columns layout doesn’t work when adding a paragraph to the asides. I’ve noticed that any example, where flexbox is used for the entire layout, leaves out content inside these boxes. Doesn’t seem like flexbox is useful for layouts without a lot of hacking.
the initial value of ‘flex-basis’ is ‘main-size’, and if omitted in the shorthand property ‘flex’, it’s value is ‘0%’.
http://www.w3.org/TR/css-flexbox-1/#propdef-flex-basis
I just read that too, but when I was tinkering with it in Chrome only auto worked!
The specification says
flex: autoisflex: 1 1 main-size, to be distinguished fromflex: 1 1 auto. Currently only Firefox 34+ support ‘main-size’.https://developer.mozilla.org/en-US/docs/CSS/flex-basis
This is currently under discussion, like it says in the big red box there. We’re actively looking for feedback on that issue at the moment, so please let us know if any!
This is a pretty good quick guide. Just a couple things I noticed from a skim:
It’s not very clear how ‘order’ actually works. ‘order: 3’ doesn’t mean “put it at the third position”, it means “put it after any items with ‘order’ less than 3 and before any items with ‘order’ greater than 3”.
We (the Flexbox spec editors) strongly recommend not using the longhands of ‘flex’ unless you really, really want to cascade in flex settings from some other style rule, so I’d suggest somehow discouraging the use of ‘flex-grow/shrink/basis’ here (or, preferably, leaving it out/in an advanced section). The shorthand resets things in appropriate ways, and will therefore result in fewer cascading errors. Please use the shorthand!
I tend to think of flex “order” as z-index for flow items. Maybe this will help others to visualize it this way also.
There is currently a crippling bug in Firefox that makes any non-trivial implementation of flex unfeasible. Nesting a few flex’d containers causes Firefox to become unresponsive. https://bugzilla.mozilla.org/show_bug.cgi?id=1082780
Loads of bugs with it on ipad too, so it’s pretty much unusable currently
Thanks for the article, helped me a great deal bringing my LESS-implementation and Bower package up to date!
(Free to use at https://github.com/philipperutten/css3-box or via http://bower.io/search/?q=css3%20less%20layout).
Hi, I’m looking for the way to do a fullscreen menu for my website with flex, with a header on the top and the rest of the space with only 6 big responsive buttons. I’ve tried many things and I’ve check many websites. I would apreciate any help. Thanks in advance.
This is one of the best code tutorials I’ve ever seen. Kudos for taking the time to make this super intuitive.
This is going to be an amazing feature right now. Unfortunately it still seems to be in it’s revolutionary infancy and I don’t think my employer would be happy if I tried to implement this on our sites.
Sean Fiorritto (sp?) produced a great video (and a book) on Flexbox, entitled “Sketching with Flexbox”, if anyone is interested. The video lesson link: http://www.sketchingwithcss.com/flexbox/ and a five lesson tut: http://www.sketchingwithcss.com/flexbox-tutorial/
Enjoy!
So I was wandering, is there a good way of making the child elements of the flex grid not automatically span to the full width of the page. Only specifying widths every time is not very effective. No one should have to add a
width: 1px;to every element within if they want it to behave properly.Thanks
Tons of love to Flexbox which just saved my weekend. I just had to redo an entire page which used to use an HTML table to present a matrix. After requirements changed, I realized I could no longer use a table since each “column” needed to have an arbitrary number of “rows”. In other words, I had to go from row-major format to column-major format. So I used Flexbox to lay out the columns in left-to-right (row) direction, and then lay out each child in each row in top-to-bottom (column) direction. But then I needed to reorder each row in reverse order, which Flexbox also made easy: use either the “order” property or set the direction to “column-reverse”. Done. Voila. The JS that I wrote to make it happen is now half the size, and the CSS is turning out to be smaller, too. Woo-hoo!!!!!
Thanks Chris! I made a flexbox ruleset config thingy / cheat sheet for quick copy & paste, based on your article. I’ve been using it a lot for my own projects, might be useful for others too. http://apps.workflower.fi/css-cheats/?name=flexbox (also on github if anyone cares to fork/improve/whatever https://github.com/sakamies/css-cheats)
Great work man….. this inspired me this little css library
http://hictech.github.io/cssPlusWebsite/
Who has the option to design for only the most of modern browsers. Let me know when you can shiv it back to ie9.
Your first example at this link (http://codepen.io/HugoGiraudel/pen/LklCv) does not work in IE 11. IE doesn’t seem to like -webkit-flex-flow. Adding flex-wrap:wrap; flex-direction: row; or just flex-flow: row wrap; works though.
hey guys, need help here. I write css for the screens 1440 resolution. Got a container and 3 columns in it. Used this tutorial and it worked great in FF and Chrome, but in Opera it does not. Col 1 and 2 are fully apart and the 3rd column is under the 1st. Just to mention I am new here (i mean webdesign). Here is the code:
@media screen and (max-width: 1440px) {
.wrap{width:910px; margin:0 auto;}
#about {width: 900px;}
#container
{
overflow:hidden;
margin:0 auto;
margin-top:70px;
width:880px;
padding: 0;
justify-content:space-between;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
padding-right:5px;
padding-left:5px;
}
For starters, you don’t need floats. That is the whole point of Flexboxes. So you don’t have to use floats. Try getting rid of the float declarations and playing around some more….
Also, keep in mind that every set of flex items needs a flex container. It’s not ridiculous to see something like:
Nesting flex boxes is how you keep consistency across browsers but it can get really confusing really quick. Especially when you get like 8 levels deep.
You also are probably missing LOTS of vendor prefixes to get it working properly across all browsers.
For instance, you might want to take a look at the classes that I use in my projects to see what you are missing
If you have the option to use Autoprefixer, this could help a lot with the vendor prefixing.
https://github.com/postcss/autoprefixer
I’ve taken the navigation layout above and put it in the header of the header, aside, main, aside, footer, layout.
What I want to do is fix the navigation/header and have it the width of the page with the other elements remain in their position below the header.
Here’s my pen:
Does this help? I put your HTML5 within the Ambient framework.
It’s great that you have given the html, css and result, but I used yours exactly and it is fine on my laptop, but on my Android phone the header, main, aside1, aside2 and footer are all on the same line (both portrait and landscape). I find a difference between resizing my laptop monitor and actually viewing it on other devices.
I can potentially log it as an issue in within Ambient.
Hi everyone,
I’ve been working on this layout which I managed to work perfectly in modern Firefox & IE browsers, but it’s not working as expected in chrome and safari (which leads me to believe I’m not implementing the flex box correctly).
Any advice would be greatly appreciated….I’ve tried all manner of logic including flex box within a flex box to make this work….perhaps it’s a limitation of the way flex box is being implemented in webkit browsers or vice versa.
I’ve posted the html file here: http://www.datagnosis.com/test_layout.html
In Safari and Chrome, the contents do not fit perfectly in the browser window, and the footer div tag is not visible at all.
I noticed when declaring flex property for parent that hold some elements (for example ul is flex, li are flex items (they are inline or inline-block)), when I set to some list item margin-right:auto, it push all other elements to the edge of the parent container?
Thanks, as always, for a very informative post. It really fast-tracked my understanding of using the flexbox model.
One of the hardest things to wrap my head around was the flex-grow, flex-shrink and flex-basis properties. Not so much the concept of what they were, but how the actual values played out.
My basic assumption at first was that if I set the flex-basis to a static size, say 200px, and flex-grow of Item X to “2” and the other items in this container to “1”, that the width of Item X would be exactly 2 times the width of any of the others. This was not the case. It was always greater than 2 times.
After looking a little closer at the numbers it was applying, the first thing I noticed was that the flex-grow/flex-shrink is a ratio of these values amongst all children in that flexbox for that specific property. The grow and shrink values have nothing to do with each other.
As in the example given above, the ratio would be 2:1 for Item X’s width to the flex-basis value. But the piece that was eluding me, and causing the actual width values to not follow this ratio, is that the ratio is based on the amount that the containers have grown past the basis width (or under the base width for flex-shrink.)
That being said, the key is that if you subtract the basis width from each item width, then the remaining width will follow the ratio.
Now, if you are not setting the flex-basis property manually, then the default will be “0%” and the ratio is closer to being what you would think, but there is still a minimum width on these elements that is factored into the ratio calculation as described above.
Hopefully, because flexbox is being used, the ratio won’t need to be exactly correct and the layout will still look and work great. That’s the whole point of flexbox, right?
I just wanted to share this extra information with those who like to understand where the numbers are coming from when it doesn’t come out as you may have thought at first.
I’m having this problem and it’s sooo confusing!
Warning! Description of justify-content / align-items is incorrect. Behavior of the last two changes depending of flex-direction. Article says it should be independent. “This defines the alignment along the main axis.” No! If flex-direction = column, that will align items along the cross axis. To align items along main axis you’ll need to change align-items instead.
When you change the flex direction, you’re changing the main axis. That’s how I think about it anyway. Flex-direction:
Here, “Let’s try something else. Imagine we have a right-aligned navigation on the very top of our website, but we want it to be centered on medium-sized screens and single-columned on small devices. Easy enough.”
The navigation don’t works in Chome 41.0.2272.101 m
Just inherited a project with over a thousand products in dozens of categories/sub-categories. Alignment was all wonky. Just fixed it by adding TWO flexbox items into CSS.
This site rocks!
I have seen this code in the wild but it seems like a bad idea.
Can you help me understand why this is or isn’t bad.
Thanks
It’s not really ‘bad’ per say, it’s just cross-browser for IE. It’s ugly code, most people use a post CSS processor like Autoprefixer.
I’m new to flexbox and certainly don’t want to spread my noob confusion, but I noticed a couple things:
* Regarding this image – http://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg. Initially I thought this was super helpful. However, when I looked at where it’s used in the w3 spec, it doesn’t actually talk about using “auto” as a value for flex-basis at all (just a value for the “flex” shorthand), it just has it in the image for some reason – http://www.w3.org/TR/css3-flexbox/#flex-property
* Then I found this section of the spec, and it looks like using “auto” as a value for flex-basis is in debate – http://www.w3.org/TR/css3-flexbox/#flex-basis-property
Questions:
* Should we avoid using “flex-basis:auto” for the time being? And if so, should there be a note accompanying that image?
* Am I right in thinking that the w3 spec is a bit confusing/disorganized in those places? Worthy of me sending a comment/email to somebody?
Lastly: Very, very greatful for this post. Thanks!
I just do this most of the time:
flex: 0 0 auto; or flex: 0 0 25%; or flex: 0 0 10em;
I think it’s easier just to use the shorthand property, and have a play with the values.
Originally ‘auto’ meant ‘content’ or natural size. Now auto means look at the height/width property and a new value of ‘content’ has been added. Chrome is still treating ‘auto’ like ‘content’. Firefox and IE are not.
So ‘auto’ is only useful if you have a height or width set, which is pretty useless because you could just use that value as the ‘flex-basis’.
Why did you add the classes?
<
header class = “header”> Header </ header>
Do not write now (html5).
write correctly is necessary so.
<
header> Header </ header>
I tried to remove the ALL classes, but the site is broken. I do not understand.
These css are like readymade ui-bootstrap components or angular itself. They work off-the-shelf. Web-pages development are becoming breezy now, given most of the common burden is taken by the framework. Love it, thanks!
What bothers me, is if you use either flex-direction: row; or flex-direction: column; It dictates what property you use to center objects horizontally.
Maybe I don’t just understand the logic.
I think align-items and justify-content got mixed up in the example shared. Also, you the container article is missing a height, which ends up in confusing the result of applying align-items and justify-content as the same in that special case.
Here is an example that might help clear this up for you I hope:
See the Pen RPmwdz by Andy Maleh (@AndyMaleh) on CodePen.
Another great article!
Using this page as a guide and reference, I created a web-app based log in template that looks like a phone-app. It’s mostly just an exercise in column layout for flex; it helped me gain a much greater understanding of flex properties and I thought someone else might care to poke at it to help learn.
Here’s the result: https://jsfiddle.net/Serk0413/y6ugdxgx/10/embedded/result/ (complete w/ “hamburger” nav)
Here’s the fiddle (sorry, no pen): https://jsfiddle.net/Serk0413/y6ugdxgx/
It uses a full mix of css flex props including a flex column w/ nested rows and nested traditional css (no floats!)
Thanks for another great article, Chris !!
Thanks for posting. Very interesting. I’m using the hamburger from your fiddle. Is there a particular attribution you would like?
I notice that the 3 column demo at the end is not working and should there be more content in the sidebars than the one word shown then the columns stretch to 100% width and break the layout.
The width of the side columns need to be set.
e.g.
Thanks for the fix PaulOB !
Took me some time before thinking of looking up in he comments… :/
I really like the concept of flexbox, but with needing to support IE9, looking for a way to do that with a graceful fallback. Do you have any suggestions for a graceful fallback or is it better to just style it “traditionally” for .no-flexbox (using Modernizr)?
Total noob when it comes to flexbox, but I was wondering something. Is it possible to have, in a list comprised of multiple rows, the first row “space-around,” and the other rows after left align? In my list of items I’m not really a fan of if one or two items are wrapped to the next row, they “space-around” and end up in the middle, it kind of makes you lose track if you are going down the list (make sense?). It’s no biggie, just was wondering if there was a way to specify the last row or something. Great tutorial btw! Thanks in advance.
Please post your code and link to it.
Here’s a very basic flexbox example; see if it helps. Feel free to fork, re-post and question.
When using the flex-shorthand in Safari 7 (7.1.6) (
-webkit-flex) without specifying the third parameter (-webkit-flex-basis), Safari will compute the value0pxand wrapping via-webkit-flex-wrapis not going to work. In order for Safari to wrap via flexbox-webkit-flex-basismust beauto(which is Safaris default value). So, if you use the shorthand and don’t want an initial size for your flex-item, set the third (or the second parameter if you leave out shrink) to ‘auto’ (f. e.-webkit-flex: 1 auto;or-webkit-flex: 1 0 auto;).You can check this behaviour this codepen: http://codepen.io/mdix/pen/pJNrmM
Good article, I just shared on Twitter. Really like how you formatted it, the other articles on the flex box suck compared to yours.
This is super helpful. Thank you sir.
Custom Flexbox Grid using Bootstrap mixins (SASS)
https://www.ukietech.com/blog/programming/custom-flexbox-grid-using-bootstrap-mixins-sass/
I love you!! Resolveu meu problema… :)
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
@Alex: maybe a bit late, but this is my solution and it works pretty well.
Create a number of extra blocks, the same size as your other blocks but with height=0, to fill up at least 1 line of your screen (or any screen). Because height=0 you will not see them, but they still take up space in the x-direction. Since you could fill up 1 full line you don’t see the odd alignment on the last line even when it is there. The alignment you see is on the last but one line. See the solution on https://jsfiddle.net/h0Lww6mk/3/
It’s worth noting is that Internet Explorer struggles when you used mixed units. I often use flexbox with margins and calc, so I might use something like:
.menu-item {
width: calc((100% – 20px) / 3);
}
This works fine with Safari, Firefox and Chrome, but not Internet Explorer. I guess it’s a rounding error, and it won’t affect all resolutions, but a combination of screen width and element width might sometimes mean you only get two columns on a line instead of three. To get around this, I use:
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.menu-item {
width: calc(96% / 3);
}
.menu-item + .menu-item {
margin-left: 2%;
}
}
This takes account of the percentage difference in the margins. It’s doesn’t look quite as clean as in the other browsers, but it does solve the problem and it isn’t too convoluted.
Having just referenced this post for the 100th time in the last two months, I feel obligated to say that this thing is incredibly useful. I’m grateful you posted it.
Great really great guide, well explained with examples. Thank you very much.
In the event anybody is having issues getting it to work on firefox for the 2nd example (tomato background)
Put the flex items into their own container with no other element in them.
Add * flex-flow: row wrap; * to .flex-container
Hope this helps.
Wow, this article is the coolest material about flexbox.
People, now I need help with this:
http://stackoverflow.com/q/32229436/2396907
Share please!
Wow, it could’t be better explained! thanks a lot!
Thank you for the tutorial. I followed it whilst updating something I did for a friend’s project before, but have come into difficulties. The three elements (the twitter widget’s container, the cbox’s container and the ccentre’s content) I was trying to update to use flex like in the tutorial, but it’s not worked. It looks like the ccentre might be the cause. Any ideas? Here it is on Codepen: http://codepen.io/seasalt/pen/GppzmG
Hello. I have stumbled upon this interesting StackOverflow question re
justify-content: flex-startandmargin: autoon a container. I don’t know the answer and I wonder if there is any solution to this.I think for “align-content”, the container should already has been propped up by some elements or in a fixed height. Can tell the reader of this in advance.
Chris, can you give us an example of what are small-scale layouts and large scale layouts? I don’t completely understand the Note about the best use for Flexbox vs. Grid.
Excellent article. This is the best explanation of flexbox I have seen so far.
Thanks so much for the article! I learned a ton. One question though, the note that you included in the background section “Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts. ” links to an article that is over a year old and has a note on it saying that it is in-flux. Are there any updates to that article coming down the pipeline? I would love to read the two in tandem and better be able to grasp in which situations each would be most appropriate.
Thanks again! Keep up the great work!
To make Flexbox play nicely with iPhone/iPad, add the following metatag…
Cheers!
(Or, correctly…)
To make Flexbox play nicely with iPhone/iPad, add the following metatag…
<meta name="viewport" content="width=device-width">
Cheers!
The 2nd example works fine without flexbox, with “display: inline-block”. Less code and it works even with old browsers. See: http://codepen.io/anon/pen/VvbzbP?editors=110
Try adding a background color to the
.navigation aand you will see that they are not the same. Usinginline-blockkeeps you dependent on the browser default use of extra space left and right of inlinelielements. This rendering can be fixed by floating thelielements, butflexboxis a nicer (modern) way of achieving that effect.http://bennettfeely.com/flexplorer/
flex-basis seems to have got some updates,
main-sizeno longer exists,automeans look at width / height property (previously main-size), newcontentkeyword means automatic sizing (previously auto)https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
Indeed! Updated.
order default: 0
I have
flex-wrap: wrapandalign-content: flex-startset and the way I understand it from this guide, the last row should be aligned to the left of the other flex items, but it’s not. It’s centered. I must be misunderstanding something. What am I doing wrong?:Thank you.
I figured out that
align-contentis only for the cross axis. In this case, that’s vertical space. I don’t think there’s a way to do what I’m trying to do with flexbox.Something that approaches what you try to do is this:
div.block {
flex-basis: 20rem;
flex-grow: 1;
}
div.block p {
width: 20rem;
}
If you use
space-between, it also seems to align leftYay, let’s make CSS even more complicated! W3 crams more and more stuff into HTML and CSS, but forgets that people want to settle and work with it and not study new tags/definitions each day.
The proposed changes to CSS were initiated years ago, along with the introduction of HTML5. Most of it are in fact additions to CSS and HTML, rather than changes. The reason was that certain page layouts that you see nowadays, were very difficult to implement with the old specification. Therefore these new tags were added to simplify web structure/layout, rather than to complicate it.
Take for instance flexbox. Before it was very hard to make a dynamically scaling website. Using just percentages to scale the sections just didn’t cut it. One improvement was the introduction of the calc() function that could use percentages and static units together, but even with that it was still hard to read code. Flexbox was a great addition that is very easy to use once you read this article.
And as a matter of fact, you are still free to use CSS2 and HTML4 if you wish. Nobody is stopping you, but you deny yourself some awesome tools if you do
The reason that I enjoy working with the web is that it’s always growing. There’s always something more to learn.
The same is true for any technology or even life in general, really. Without new features and new capabilities, we atrophy and fail to realize our full potential.
I suspect that relatively few people want to settle for what we have now and just work with that.
The W3C isn’t a single person who has neglected you, or any of us. It’s an organization, and a democracy, guided by the people and companies that invented the web and continue to use to everyone’s benefit.
It should probably be noted that the W3C documents recommendations, not requirements. Everything’s optional.
You many have been moved by PPK’s article: Stop pushing the web forward
I found this counterpoint by Bruce Lawson enlightening: On PPK’s moratorium on new browser features
Both of those articles, and more linked to at the end of Bruce Lawson’s article, were written by people much smarter than me.
I hat to say it, but the frustration expressed by PPK and many others strikes me as very similar to my daughter’s frustration with going to school. After all, she already has TV, YouTube, and all the toys she needs at home :)
Very nice/helpful site. Tiny error on https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Under “justify-content”, bullet item “flex-end: items are packed toward to end line” …. does not make sense, must be typo.
Just fyi, no reply needed.
in the first example there is missing the non prefixed
flex-flow: row wrap;so right now it’s only working in chromeI much preferred the old layout for this article. Seeing the parent and child examples side by side meant it was easier to compare behaviours and to pick the right approach.
Hello,
I want to put a link on images wich are in a contener flexbox. before putting the link, flexbox work, but after putting the link, it doesn’t. WHY? I suppose it’s a problem with my html? Can somebody can give me an exemple about how to do?
thank you so much!
here is my html code
@Louisa You didn’t include your CSS code, so it’s impossible to tell what’s wrong. I put your HTML into a Pen and set
#page1conteneur { display: flex; }and it works fine.If you want help, you need to post your CSS code as well. Better yet, post your question and all related code to a site like Stack Overflow that’s designed for questions and answers
Here’s my example. I replaced the images with images from LoremPixel just to give me something to look at. …
According to caniuse.com, flexbox is supported in iOS8.* via the webkit prefix.
http://caniuse.com/#feat=flexbox
According to css-tricks, iOS support for flexbox is 7.0.1+ .
I just got a defect ticket for iOS7 where flex doesn’t work. So, is the above table wrong?
This guide is my flex bible ! I use it almost once a day !! Many thanks to you Chris !
Anyone know if there is a printable version ? a kind of cheat sheet ?
Thanks :)
Hi , I need to align all elements inside flex container to each other. Suppose I have made two div of equal height using flex and now I want to make the all the elements inside the div to align to each each other. Is that possible?
This is an excellent guide and I pretty much learned how to layout a page in about an hour using this. I cannot wait to test it out more and see how it all works in different scenarios. Thank you Chris & Team!
I am trying to replace a grid layout where I used display: table and table-cell to align content vertically with flexbox.
My problem with flexbox is, that I can not get a second child item to align vertically. You can see this in action here: http://codepen.io/anon/pen/BjXbrw
No matter what I try, I will either lose vertical centering of the heading or the second child won’t align. What am I doing wrong here?
Thanks!
Who ever wrote this article forgot to put information that flex-shrink if put to 0 prevents item to shrink and maintain its original size.This information could have saved me 4 hours of work.
My boss says flexbox is stupid. She said “shoelace” or something is better can u confirm??
Your boss seems pretty talkative when attempting to balance the effectiveness of Flexbox and made up a word/service to better enhance that fascinating critique.
Sometimes I smile when reading these articles (and this one is just fine BTW) but I remember back to the dark ages when one could code a fairly decent web page on a single sheet of paper whereas now, it takes endless articles to even understand the coding and then one ends up with megabytes of code … and it’s still just one page but a lot “prettier” (and requires up to 1000X the bandwidth and server storage LOL). And we call it progress.
P.S. It reminds me of when C++ came out, and “Hello World!” went from 4 or 5 lines of code (C) to 4 or 5 pages of code (C++). LOL I had to swap my PC for a PC-XT to get a hard drive. ^_^