This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

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:
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

See also

Related articles

Flexbox

External resources

Also, check out the following live demo sites and article about flexbox:

Attributions

  • Mozilla Developer Network cc-by-sa-small-wpd.svg: Article