The flex property is a sub-property of the Flexible Box Layout module.

This is the shorthand for flex-grow, flex-shrink and flex-basis. The second and third parameters (flex-shrink and flex-basis) are optional.


flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

.flex-item {

  /* this */
  flex: 1 100px;

  /* is the same as */
  flex-grow: 1;
  flex-basis: 100px;

  /* and it leaves the flex-shrink property alone, which would be */
  flex-grow: inherit; /* defaults to 1 */


Here's the scoop on what the values map to depending on how many values you give it:

flex: none                                            /* value 'none' case */
flex: <'flex-grow'>                                   /* One value syntax, variation 1 */
flex: <'flex-basis'>                                  /* One value syntax, variation 2 */
flex: <'flex-grow'> <'flex-basis'>                    /* Two values syntax, variation 1 */
flex: <'flex-grow'> <'flex-shrink'>                   /* Two values syntax, variation 2 */
flex: <'flex-grow'> <'flex-shrink'> <'flex-basis'>    /* Three values syntax */
flex: inherit

Common values for flex

flex: 0 auto;

This is the same as flex: initial; and the shorthand for the default value: flex: 0 1 auto. It sizes the item based on its width/height properties (or its content if not set).

It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or auto margins can be used to align flex items along the main axis.

flex: auto;

This is equivalent to flex: 1 1 auto. Beware, this is not the default value. It sizes the item based on its width/height properties, but makes it fully flexible so that they absorb any extra space along the main axis.

If all items are either flex: auto, flex: initial, or flex: none, any remaining space after the items have been sized will be distributed evenly to the items with flex: auto.

flex: none;

This is equivalent to flex: 0 0 auto. It sizes the item according to its width/height properties, but makes it fully inflexible.

This is similar to flex: initial except it is not allowed to shrink, even in an overflow situation.

flex: <positive-number>

Equivalent to flex: <positive-number> 1 0px. It makes the flex item flexible and sets the flex basis to zero, resulting in an item that receives the specified proportion of the remaining space.

If all items in the flex container use this pattern, their sizes will be proportional to the specified flex factor.


The following demo shows a very simple layout with Flexbox thanks to the flex property:

Check out this Pen!

Here is the revelant bit of code:

.footer  { flex: 1 100%; }
.sidebar { flex: 1; }
.main    { flex: 2; }

First, we've authorized flex items to be displayed on multiple rows with flex-flow: row wrap.

Then we tell to both the header and the footer to take 100% of the current viewport width, no matter what.

And the main content and both sidebars will share the same row, sharing the remaining space as follow: 50% (2/(1+1+2)) for the main content, 25% (1/(1+1+2)) for each sidebar.

Related Properties

Other Resources

Browser Support

  • (modern) means the recent syntax from the specification (e.g. display: flex;)
  • (hybrid) 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
21+ (modern)
20- (old)
3.1+ (old) 2-21 (old)
22+ (new)
12.1+ (modern) 10+ (hybrid) 2.1+ (old) 3.2+ (old)

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).


  1. User Avatar
    Andres Mrad
    Permalink to comment#

    As much as i would love for this property to work on every browser (as it seems to help so much at making web site design flexible no pun intended) it seems like it doesn’t work on any browser other than chrome and firefox, i have tired the abode pen on EI 10 and opera and safari but it just wont work it just display 4 columns that are not even wrapping their content in any way.

  2. User Avatar
    Permalink to comment#

    Today it works great on (tested on Redmond OS): IE 11; FF 33.1; Chrome 39 and Opera 26.

    Only Safari is not wrapping content, making it a horizontal mess, generally it looks unprofessional and not good on that browser. Too bad cause it’s one of the biggest things in CSS.

  3. User Avatar
    Permalink to comment#

    Great writeup!
    Also, note that if you need to support older browsers and don’t have the luxury of flex (ie8,ie9) take a look at Ben Frains styling with tables.

  4. User Avatar
    Dan Allen
    Permalink to comment#

    Does the flex box affect the bootstrap columns breaking into stacks?

  5. User Avatar
    Permalink to comment#

    Flex wrap in safari browser not already support. .
    This issues for me

  6. User Avatar
    Permalink to comment#

    This is not working on FF 43 for Mac. Fine at full width, but Main is fluid while sidebars remain fixed at original width until break point. At break, fixed width left sidebar and fluid Main fill a row while right sidebar steals the entire next row.

  7. User Avatar
    Permalink to comment#

    Just want to know is the flex box affecting the bootstrap columns Structure?

  8. User Avatar
    Permalink to comment#

    In the following code snippet

    /* and it leaves the flex-shrink property alone, which would be /
    flex-grow: inherit; /
    defaults to 1 */

    shouldn’t flex-grow be flex-shrink?

  9. User Avatar
    Permalink to comment#

    What if:
    flex: 1 auto;
    instead of
    flex: 1; /* flex: 1 1 0; */
    I cannot understand how flex-shrink: auto works

  10. User Avatar
    Permalink to comment#


    blockquote> Here is the revelant bites of code:

    What is a “bite” of code?

    • User Avatar
      Geoff Graham
      Permalink to comment#

      I think that’s a simple typo and bit was the intended word.

      .footer { flex: 1 100%; }
      .sidebar { flex: 1; }
      .main { flex: 2; }

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.