Property Description

The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.

This property has the following syntax:

flex: grow shrink basis|initial|inherit;

Property Values

Value	Description
grow	A number specifying how much the item will grow relative to the rest of the flexible items
shrink	A number specifying how much the item will shrink relative to the rest of the flexible items
basis	The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
}

.blue-item {
  flex: 1;
 -webkit-flex: 1; /* Safari */
}

.red-item {
  flex: 2;
 -webkit-flex: 2; /* Safari */
}
</style>

<div class="container">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	0 1 auto

Property Description

The flex-basis property specifies the initial length of a flexible item.

This property has the following syntax:

flex-basis: number|auto|initial|inherit;

Property Values

Value	Description
number	A length unit, or percentage, specifying the initial length of the flexible item(s)
auto	(default) The length is equal to the length of the flexible item. If the item has no length specified, the length will be according to its content
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
}

.blue-item {
  flex-basis: 60px;
  -webkit-flex-basis: 60px; /* Safari */
}

.red-item {
  flex-basis: 90px;
  -webkit-flex-basis: 90px; /* Safari */
}
</style>

<div class="container">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	auto

Property Description

The align-items property specifies the default alignment for items inside the flexible container.

This property has the following syntax:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;

Property Values

Value	Description
stretch	(default) Items are stretched to fit the container
center	Items are positioned at the center of the container
flex-start	Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
baseline	Items are positioned at the baseline of the container
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

div {
    display: flex;
    align-items: center;
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
21.0	20.0	11.0	7.0 -webkit-	12.1

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	stretch

Property Description

The flex-direction property specifies the direction of the flexible items.

This property has the following syntax:

flex-direction: row|row-reverse|column|column-reverse|initial|inherit;

Property Values

Value	Description
row	(default) The flexible items are displayed horizontally, as a row
row-reverse	Same as row, but in reverse order
column	The flexible items are displayed vertically, as a column
column-reverse	Same as column, but in reverse order
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-direction: column;
  -webkit-flex-direction: column; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
}

.blue-item {
  flex: 1;
  -webkit-flex: 1; /* Safari */
}

.red-item {
  flex: 2;
  -webkit-flex: 2; /* Safari */
}
</style>

<div class="container">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	row

Property Description

The align-self property specifies the alignment for the selected item inside the flexible container.

This property has the following syntax:

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

Property Values

Value	Description
auto	(default) The element inherits its parent container's align-items property, or "stretch" if it has no parent container
stretch	Items are stretched to fit the container
center	Items are positioned at the center of the container
flex-start	Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
baseline	Items are positioned at the baseline of the container
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

div {
    display: flex;
    flex-flow: row wrap;
    align-self: space-around;
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
21.0	20.0	11.0	7.0 -webkit-	12.1

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	auto

Property Description

The align-content property aligns the flexible container's items when the items do not use all available space on the cross-axis (vertically).

This property has the following syntax:

align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;

Property Values

Value	Description
stretch	(default) Items are stretched to fit the container
center	Items are positioned at the center of the container
flex-start	Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
space-between	Items are positioned with space between the lines
space-around	Items are positioned with space before, between, and after the lines
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

div {
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}

Browser Support

Chrome	Firefox	IE	Safari	Opera
21.0	28.0	11.0	7.0 -webkit-	12.1

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	stretch

Property Description

The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.

This property has the following syntax:

flex-flow: direction wrap|initial|inherit;

Property Values

Value	Description
direction	Specifyies the direction of the flexible items. Possible values: row row-reverse column column-reverse initial inherit (default = row)
wrap	Specifies whether the flexible items should wrap or not. Possible values: nowrap wrap wrap-reverse initial inherit (default = nowrap)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
}

.blue-item {
  width: 200px;
}

.red-item {
  width: 400px;
}
</style>
  <div class="container">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	row nowrap

Property Description

The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container.

This property has the following syntax:

flex-grow: number|initial|inherit;

Property Values

Value	Description
number	A number specifying how much the item will grow relative to the rest of the flexible items (default = 0)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
}

.blue-item {
 flex-grow: 1;
 -webkit-flex-grow: 1; /* Safari */
}

.red-item {
  flex-grow: 2;
 -webkit-flex-grow: 2; /* Safari */
}

.green-item {
  flex-grow: 0;
 -webkit-flex-grow: 0; /* Safari */
}
</style>

<div class="container">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
  <div class="item green-item">Item 4</div>
  <div class="item green-item">Item 5</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	0

Property Description

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container.

This property has the following syntax:

flex-shrink: number|initial|inherit;

Property Values

Value	Description
number	A number specifying how much the item will shrink relative to the rest of the flexible items (default = 1)
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;

  flex-grow: 1;
  -webkit-flex-grow: 1; /* Safari */
  flex-shrink: 1;
  -webkit-flex-shrink: 1; /* Safari */
  flex-basis: 100px;
  -webkit-flex-basis: 100px; /* Safari */
}

.blue-item {
  flex-shrink: 1;
  -webkit-flex-shrink: 1; /* Safari */
}

.red-item {
  flex-shrink: 3;
  -webkit-flex-shrink: 3; /* Safari */
}

.green-item {
  flex-shrink: 5;
  -webkit-flex-shrink: 5; /* Safari */
}
</style>

<div class="container" style="width: 75%;">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
  <div class="item green-item">Item 4</div>
  <div class="item green-item">Item 5</div>
</div>
<br/>
<div class="container" style="width: 50%;">
  <div class="blue-item">1</div>
  <div class="red-item">2</div>
  <div class="blue-item">3</div>
  <div class="green-item">4</div>
  <div class="green-item">5</div>
</div>
<br/>
<div class="container" style="width: 25%;">
  <div class="blue-item">1</div>
  <div class="red-item">2</div>
  <div class="blue-item">3</div>
  <div class="green-item">4</div>
  <div class="green-item">5</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	1

Property Description

The flex-wrap property specifies whether the flexible items should wrap or not.

This property has the following syntax:

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

Property Values

Value	Description
nowrap	(default) Specifies that the flexible items will not wrap
wrap	Specifies that the flexible items will wrap if necessary
wrap-reverse	Specifies that the flexible items will wrap, if necessary, in reverse order
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Examples

The following example shows the basic use of this property:

<style>
.container {
  display: flex;
  display: -webkit-flex; /* Safari */
  flex-wrap: wrap;
  border: solid 1px blue;
}

.item {
  margin: 5px;
  height: 50px;
  padding: 6px;
  border-radius: 4px;
  background-color: #3A87AD;
  color: white;
  flex-grow: 1;
  -webkit-flex-grow: 1; /* Safari */
}

.blue-item {
  width: 100px;
}

.red-item {
  width: 200px;
}

.green-item {
  width: 50px;
}
</style>

<div class="container" style="width: 75%;">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
  <div class="item green-item">Item 4</div>
  <div class="item green-item">Item 5</div>
</div>
<br/>
<div class="container" style="width: 50%;">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
  <div class="item green-item">Item 4</div>
  <div class="item green-item">Item 5</div>
</div>
<br/>
<div class="container" style="width: 25%;">
  <div class="item blue-item">Item 1</div>
  <div class="item red-item">Item 2</div>
  <div class="item blue-item">Item 3</div>
  <div class="item green-item">Item 4</div>
  <div class="item green-item">Item 5</div>
</div>

This produces the following result:

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0 10.0 -ms-	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	nowrap

Property Description

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

This property has the following syntax:

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

Property Values

Value	Description
flex-start	(default) Items are positioned at the beginning of the container
flex-end	Items are positioned at the end of the container
center	Items are positioned at the center of the container
space-between	Items are positioned with space between the lines
space-around	Items are positioned with space before, between, and after the lines
initial	Specifies that the value of the property should be set to the default value
inherit	Specifies that the value of the property should be inherited from the parent element

Browser Support

Chrome	Firefox	IE	Safari	Opera
29.0 21.0 -webkit-	28.0 18.0 -moz-	11.0	6.1 -webkit-	12.10

Miscellaneous Information

Inherited:	No
Defined In:	CSS3
Default Value:	flex-start