flex

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.

Syntax

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

.flex-item {
  flex: 1 100px;
}

Here are a couple of common values for flex:

flex: 0 auto and flex: initial (default)

Those are shorthands for the default value: flex: 0 1 auto. It sizes the item based on itswidth/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/heightproperties, 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.

Demo

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

<ul class="flex-container">
  <li class="flex-item header">Header</li>
  <li class="flex-item sidebar">Sidebar</li>
  <li class="flex-item main">Main</li>
  <li class="flex-item sidebar">Sidebar</li>
  <li class="flex-item footer">Footer</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  height: 200px;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
}

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

.flex-item {
  
  background: tomato;
  padding: 10px;
  width: 100px;
  border: 3px solid rgba(0,0,0,.2);
  
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

Here is the revelant bites of code:

.header,
.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

• flex-grow
• flex-shrink
• flex-basis
• align-self
• order

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

Blackberry browser 10+ supports the new syntax.