flex

Summary

The flex CSS property specifies the ability of a flex item to alter its dimensions to fill the available space. flex is a shorthand property comprised of the flex-grow, flex-shrink, and flex-basis properties. A flex item can be stretched to use available space proportional to its flex grow factor, or reduced proportional to its flex shrink factor to prevent overflow.

Overview table

Initial value: 0 1 auto
Applies to: flex items
Inherited: No
Media: visual
Computed value: See individual properties
Animatable: Yes
CSS Object Model Property: flex

Syntax

flex: 3 1 60%
flex: <flex-grow> <flex-shrink> <flex-basis>
flex: auto
flex: initial
flex: none

Values

<flex-grow> <flex-shrink> <flex-basis>: The shorthand value of this property includes the following values:

Value of the flex-grow property.
Value of the flex-shrink property.
Value of the flex-basis property.

3 1 60%: An example of the shorthand values.

The flex item grows three times as much as the other flex items to fit a larger container.
The flex item shrinks just as much as the other flex items to fit a smaller container.
The flex item’s initial main size is 60% of its container.

none: Equivalent to 0 0 auto

The flex item does not adjust its size to fit the container.
The flex item’s initial main size is determined by either the width or height property, whichever is in the main dimension, as determined by the flex-direction property.

auto: Equivalent to 1 1 auto

The flex item grows exactly proportional to all of the other flex items to fit a larger container.
The flex item shrinks exactly proportional to all of the other flex items to fit a smaller container.
The flex item’s initial main size is determined by either the width or height property, whichever is in the main dimension, as determined by the flex-direction property.

initial: Equivalent 0 1 auto’

The flex item does not grow with the other flex items to fit a larger container.
The flex item shrinks proportional to the other flex items to fit a smaller container.
The flex item’s initial main size is determined by either the width or height property, whichever is in the main dimension, as determined by the flex-direction property.

Examples

The Holy Grail layout CSS: how to set up one layout that covers both desktop and mobile use cases.

body {
   font: 24px Helvetica;
   background: #999999;
  }

  #main {
   min-height: 800px;
   margin: 0px;
   padding: 0px;
   display: flex;
   flex-flow: row;
   }

  #main > article {
   margin: 4px;
   padding: 5px;
   border: 1px solid #cccc33;
   border-radius: 7pt;
   background: #dddd88;
   flex: 3 1 60%;
   order: 2;
   }

  #main > nav {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   flex: 1 6 20%;
   order: 1;
   }

  #main > aside {
   margin: 4px;
   padding: 5px;
   border: 1px solid #8888bb;
   border-radius: 7pt;
   background: #ccccff;
   flex: 1 6 20%;
   order: 3;
   }

  header, footer {
   display: block;
   margin: 4px;
   padding: 5px;
   min-height: 100px;
   border: 1px solid #eebb55;
   border-radius: 7pt;
   background: #ffeebb;
   }

  /* Too narrow to support three columns */
  @media all and (max-width: 640px) {

   #main, #page {
    flex-flow: column;
   }

   #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    order: 0;
   }

   #main > nav, #main > aside, header, footer {
    min-height: 50px;
    max-height: 50px;
   }
  }

View live example

The Holy Grail layout HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
    </style>
  </head>
  <body>
 <header>header</header>
 <div id='main'>
    <article>article</article>
    <nav>nav</nav>
    <aside>aside</aside>
 </div>
 <footer>footer</footer>
  </body>
</html>

View live example

Usage

 * Best practice is to always specify a unit for the flex-basis value, i.e. 30em or 60%.

The flex shrink factor is multiplied by the flex basis when distributing negative space.

Notes

Negative values are invalid.
The initial values of flex-grow and flex-basis are different from their values when omitted in the flex shorthand.
- flex-grow value when omitted: 1
- flex-basis value when omitted: 0
When specifying only the flex-basis, a unitless zero not preceded by two flex factor values, for example, ** 0** will be interpreted as a flex factor (probably flex-grow). If you wish to specify only the flex-basis, you must include a unit, for example, a percentage, as in 0%.

Related specifications

CSS Flexible Box Layout Module: Candidate Recommendation

Attributions

Mozilla Developer Network : Article