Each feature in detail MDN The flexCSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container.
Live preview Example from MDN
flex: 1; flex: 2; flex: 1 30px; flex: 1 1 100px;
.default-example { border : 1 px solid #c5c5c5 ; width : auto ; max-height : 300 px ; display : flex ; } .default-example > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; margin : 10 px ; flex-grow : 1 ; flex-shrink : 1 ; flex-basis : 0 ; } #example-element { background-color : rgb ( 255 0 200 / 0.2 ); border : 3 px solid rebeccapurple ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" >Change me</ div > < div >flex: 1</ div > < div >flex: 1</ div > </ section > Syntax none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0 1 auto Applies to flex items Inherited no Percentages see individual properties Computed value see individual properties Canonical order per grammar Animation type by computed value type Longhands flex-growflex-shrinkflex-basis Browser support First browser version supporting flex Chrome 29 Edge 12 Firefox 22 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-basisCSS property sets the initial main size of a flex item . It sets the size of the content box unless otherwise set with box-sizing
Live preview Example from MDN
flex-basis: auto; flex-basis: 0; flex-basis: 200px;
.default-example { border : 1 px solid #c5c5c5 ; width : auto ; max-height : 300 px ; display : flex ; } .default-example > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; margin : 10 px ; flex-grow : 1 ; flex-shrink : 1 ; flex-basis : auto ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" >Item One</ div > < div >Item Two</ div > < div >Item Three</ div > </ section > Syntax content | <'width'>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial auto Applies to flex items Inherited no Percentages relative to the flex container’s inner main size Computed value specified keyword or a computed <length-percentage> value Canonical order per grammar Animation type by computed value type Browser support First browser version supporting flex-basis Chrome 29 Edge 12 Firefox 22 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-directionCSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
Live preview Example from MDN
flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;
#example-element { border : 1 px solid #c5c5c5 ; width : 80 % ; display : flex ; } #example-element > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; width : 60 px ; margin : 10 px ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" > < div >Item One</ div > < div >Item Two</ div > < div >Item Three</ div > </ div > </ section > Syntax row | row-reverse | column | column-reverseFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial row Applies to flex containers Inherited no Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting flex-direction Chrome 29 Edge 12 Firefox 22 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-flowCSS shorthand property specifies the direction of a flex container, as well as its wrapping behavior.
Live preview Example from MDN
flex-flow: row wrap; flex-flow: row-reverse nowrap; flex-flow: row wrap balance; flex-flow: column wrap-reverse; flex-flow: column wrap; flex-flow: column balance wrap;
#example-element { border : 1 px solid #c5c5c5 ; width : 80 % ; max-height : 300 px ; display : flex ; } #example-element > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; width : 60 px ; margin : 5 px 10 px ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" > < div >Item One</ div > < div >Item Two</ div > < div >Item Three</ div > < div >Item Four</ div > < div >Item Five</ div > < div >Item Six</ div > < div >Item Seven</ div > </ div > </ section > Syntax <'flex-direction'> || <'flex-wrap'>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial see individual properties Applies to see individual properties Inherited see individual properties Percentages see individual properties Computed value see individual properties Canonical order per grammar Animation type see individual properties Longhands flex-directionflex-wrap Browser support First browser version supporting flex-flow Chrome 29 Edge 12 Firefox 28 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-growCSS property sets the flex grow factor, which specifies how much of the flex container's positive free space main size .
Live preview Example from MDN
flex-grow: 1; flex-grow: 2; flex-grow: 3;
.default-example { border : 1 px solid #c5c5c5 ; width : auto ; max-height : 300 px ; display : flex ; } .default-example > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; margin : 10 px ; flex-grow : 1 ; flex-shrink : 1 ; flex-basis : 0 ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" >I grow</ div > < div >Item Two</ div > < div >Item Three</ div > </ section > Syntax <number [0,∞]>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 0 Applies to flex items Inherited no Percentages n/a Computed value specified number Canonical order per grammar Animation type by computed value type Browser support First browser version supporting flex-grow Chrome 29 Edge 12 Firefox 20 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-line-countCSS property sets the minimum number of flex lines that flex items will be balanced over in cases where a flex container's flex-wrapflex-flowbalance keyword.
Live preview Example from MDN
flex-line-count: 1; flex-line-count: 3; flex-line-count: 4;
#example-element { border : 1 px solid #c5c5c5 ; width : 80 % ; display : flex ; flex-wrap : wrap balance ; } #example-element > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; width : 60 px ; margin : 10 px ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" > < div >Item One</ div > < div >Item Two</ div > < div >Item Three</ div > < div >Item Four</ div > < div >Item Five</ div > < div >Item Six</ div > </ div > </ section > Syntax <integer [1,∞]>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 1 Applies to multi-line flex containers Inherited no Percentages n/a Computed value the specified integer, computed Canonical order per grammar Animation type as integer Browser support First browser version supporting flex-line-count Chrome 150 Edge 150 Firefox No Safari No Chrome Android 150 Safari iOS No
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-shrinkCSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negative free space is distributed between the line's flex items that have a flex-shrink value greater than 0.
Live preview Example from MDN
flex-shrink: 0; flex-shrink: 1; flex-shrink: 2;
.default-example { border : 1 px solid #c5c5c5 ; width : auto ; max-height : 300 px ; display : flex ; } .default-example > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; margin : 10 px ; flex-grow : 1 ; flex-shrink : 1 ; flex-basis : 300 px ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" >I shrink</ div > < div >Item Two</ div > < div >Item Three</ div > </ section > Syntax <number [0,∞]>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial 1 Applies to flex items Inherited no Percentages n/a Computed value specified value Canonical order per grammar Animation type number Browser support First browser version supporting flex-shrink Chrome 29 Edge 12 Firefox 20 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗
MDN The flex-wrapCSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Live preview Example from MDN
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; flex-wrap: wrap balance;
#example-element { border : 1 px solid #c5c5c5 ; width : 80 % ; display : flex ; } #example-element > div { background-color : rgb ( 0 0 255 / 0.2 ); border : 3 px solid blue ; width : 60 px ; margin : 10 px ; } < section class = "default-example" id = "default-example" > < div class = "transition-all" id = "example-element" > < div >Item One</ div > < div >Item Two</ div > < div >Item Three</ div > < div >Item Four</ div > < div >Item Five</ div > < div >Item Six</ div > < div >Item Seven</ div > </ div > </ section > Syntax nowrap | [ wrap | wrap-reverse ] || balanceFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
Definition Initial nowrap Applies to flex containers Inherited no Percentages n/a Computed value specified keyword Canonical order per grammar Animation type discrete Browser support First browser version supporting flex-wrap Chrome 29 Edge 12 Firefox 28 Safari 9 Chrome Android 29 Safari iOS 9
First version with support, from MDN browser-compat-data.
Specification ↗ MDN reference ↗