FileNav

online
online: /HTML & CSS/Browser_CSS_Support-Layout.md

Browser CSS Layout Support

CSS Units

Desktop Browsers

Feature Length Chrome FF IE Opera Safari Note
px absolute all all all all all ‐
in absolute all all all all all 1in == 96px
cm absolute all all all all all 1cm == 37.8px
mm absolute all all all all all 1mm == 0.1cm == 3.78px
em relative all all all all all 1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm
rem relative 4.0? / 6.0 3.6 9.0 11.6 5.0 1rem == 16px
vh relative 20.0 19.0 9.0 15.0 6.0 The vertical height of the viewport as a percentage
vw relative 20.0 19.0 9.0 15.0 6.0 The horizontal width of the viewport as a percentage
vmax relative 26.0 19.0 11.0 15.0 6.1 The maxiumum of the viewport’s height or width
vmin relative 20.0 19.0 10.0 15.0 6.0 The minimum of the viewport’s height or width
vm relative – – 9.0 – 6.0 The minimum of the viewport’s height or width

Mobile Browsers

Feature Length Android BB Chrome FA FF FA IE Mobile iOS Opera Mini Opera Mobile
px absolute absolute all all all all all
in absolute absolute all all all all all
cm absolute absolute all all all all all
mm absolute absolute all all all all all
em relative relative all all all all all
rem relative 2.1 7.0 all all 10.0 4.0 none 12.0
vh relative 4.4 10.0 all all 9.0 6.0 – 16.0
vw relative 4.4 10.0 all all 9.0 6.0 – 16.0
vmax relative 4.4 – all all 11.0 6.0 – 16.0
vwmin relative 4.4 10.0 all all 10.0 6.0 – 16.0
vm relative – – – – 9.0 – – –

Viewport Units

CSS3 Multi-Column Layout

Feature Support Notes
columns FF shorthand for column-count and column‑width
column-count all <count>, auto
column‑width all <length>, auto
column-gap all <length>, normal
column-fill FF, IE, Opera auto, balance
column-rule all Shorthand but for column-rule-color, column-rule-style, and column-rule-width
column-rule-color all Same as border-color
column-rule-style all Same as border-style
column-rule-width all Same as border-width
break-before Android, IE, iOS, Safari, Opera auto, always, avoid, left, right, page, column, avoid-page, avoid-column
break-after ? auto, always, avoid, left, right, page, column, avoid-page, avoid-column
break-inside ? auto, avoid, avoid-page, avoid-column
column-span Android, BB, Chrome, IE, iOS, Safari, Opera, O-Mini, O-Mobile none, all, <length>
Feature Chrome Firefox IE Safari Opera
columns ? 9.0 -moz- 10 ? ?
column-count 12 -webkit- 5.0 -moz- 10 3.0 -webkit- 11.10
column-width 12 -webkit- 5.0 -moz- 10 3.0 -webkit- 11.10
column-gap 12 -webkit- 5.0 -moz- 10 3.0 -webkit- 11.10
column-fill ? 13.0 -moz- 10 ? 11.10
column-rule 12 -webkit- 3.5 -moz- 10 3.0 -webkit- 11.10
column-rule-color 12 -webkit- 3.5 -moz- 10 3.0 -webkit- 11.10
column-rule-style 12 -webkit- 3.5 -moz- 10 3.0 -webkit- 11.10
column-rule-width 12 -webkit- 3.5 -moz- 10 3.0 -webkit- 11.10
break-before ? ? 10 3.0 -webkit- 11.10
break-after ? ? 10 3.0 -webkit- 11.10
break-inside ? ? 10 3.? -webkit- 11.10
column-span 12 -webkit- ? 10 3.0 -webkit- 11.10
Feature Android Blackberry Chrome for Android Firefox Mobile IE Mobile iOS Opera Mini Opera Mobile
columns ? ? ? 9.0 -moz- ? ? ? ?
column-count 2.1 -webkit- 7.0 -webkit- 18 -webkit- 5.0 -moz- 10 4.0 -webkit- 5.0 11.10
column-width 2.1 -webkit- 7.0 -webkit- 18 -webkit- 5.0 -moz- 10 4.0 -webkit- 5.0 11.10
column-gap 2.1 -webkit- 7.0 -webkit- 18 -webkit- 5.0 -moz- 10 4.0 -webkit- 5.0 11.10
column-fill 2.1 -webkit- ? ? 13.0 -moz- 10 ? 5.0 11.10
column-rule 2.1 -webkit- 7.0 -webkit- 18 -webkit- 3.5 -moz- 10 4.0 -webkit- 5.0 11.10
column-rule-color 2.1 -webkit- 7.0 -webkit- 18 -webkit- 3.5 -moz- 10 4.0 -webkit- 5.0 11.10
column-rule-style 2.1 -webkit- 7.0 -webkit- 18 -webkit- 3.5 -moz- 10 4.0 -webkit- 5.0 11.10
column-rule-width 2.1 -webkit- 7.0 -webkit- 18 -webkit- 3.5 -moz- 10 4.0 -webkit- 5.0 11.10
break-before 2.1 -webkit- 7.0 -webkit- 18 -webkit- ? 10 4.0 -webkit- 5.0 11.10
break-after 2.1 -webkit- ? ? ? 10 4.0 -webkit- 5.0 11.10
break-inside 2.1 -webkit- 7.0 -webkit- 18 -webkit- ? 10 4.0 -webkit- 5.0 11.10
column-span 2.1 -webkit- 7.0 -webkit- 18 -webkit- ? 10 4.0 -webkit- 5.0 11.10
Property Values Initial Applies to Inh. Percentages Media
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto block-level elements no N/A paged
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-column auto block-level elements no N/A paged
break-inside auto | avoid | avoid-page | avoid-column auto block-level elements no N/A paged
column-count <integer> | auto auto non-replaced block-level elements (except table elements), table cells, and inline-block elements no N/A visual
column-fill auto | balance balance multicol elements no N/A see below
column-gap <length> | normal normal multicol elements no N/A visual
column-rule <‘column-rule-width’> || <‘column-rule-style’> || [ <‘column-rule-color’> | transparent ] see individual properties multicol elements no N/A visual
column-rule-color <color> same as for ‘color’ property [CSS21] multicol elements no N/A visual
column-rule-style <border-style> none multicol elements no N/A visual
column-rule-width <border-width> medium multicol elements no N/A visual
columns <‘column-width’> || <‘column-count’> see individual properties non-replaced block-level elements (except table elements), table cells, and inline-block elements no N/A visual
column-span none | all none block-level elements, except floating and absolutely positioned elements no N/A visual
column-width <length> | auto auto non-replaced block-level elements (except table elements), table cells, and inline-block elements no N/A visual
column-rule
Like border: column-rule-color, column-rule-style, column-rule-width

Flexbox

Feature IE Firefox Chrome Safari Opera
Flexbox Prefixed 10.0 -ms (2011) 2.0 -moz 4.0 -webkit 3.1 -webkit (2009)
6.1 -webkit (2012)		 15.0, 16.0 -webkit
Flexbox 11.0 22.0 29.0 9.0 12.1, 17.0+
Multi-line Flexbox Prefixed 10.0 -ms (2011)? - 4.0 -webkit 3.1 -webkit (2009)
6.1 -webkit (2012)		 15.0, 16.0 -webkit
Multi-line Flexbox 11.0 28.0 29.0 9.0 12.1, 17.0+
flex-wrap & flex-flow Prefixed N/A? 28.0 N/A? 6.1 -webkit N/A?
flex-wrap & flex-flow
Feature IE Mobile Android Blackberry Firefox Mobile Chrome for Android iOS Opera Mini Opera Mobile UC Browser for Android
Flexbox Prefixed 10.0 -ms (2011) 2.1 -webkit 7 -webkit 18.0 -moz † 4.0 -webkit 3.2 -webkit (2009)
7.1 -webkit (2012)		 15.0 - 19 -webkit 9.9 -webkit
Flexbox 11.0 4.4.0 10 22.0 † 29.0 9.0 8 12.1
Multi-line Flexbox Prefixed 10.0 -ms (2011)? 2.1 -webkit? 7 -webkit - 4.0 -webkit 3.2 -webkit (2009)
7.1 -webkit (2012		 15.0 - 19 -webkit 9.9 -webkit
Multi-line Flexbox 11.0 4.4.0 10 28.0 29.0 9.0 9 12.1
(YYYY)
Year of syntax used. 2009 = original, 2011 = hybrid, 2012 = final
†
Requires enabling via browser config

Notes

.flex-box{
    display: -ms-flexbox;
    -ms-box-orient: horizontal;

    display: -webkit-box;/* Safari 3.1, iOS 6 */
    display: -webkit-flex;
    /*display: -moz-flex;*/
    display: -moz-box;/* FF 2.0 */
    display: -ms-flex;
    display: flexbox;/* flexbox or inline-flexbox */
    display: flex;/* flex | inline-flex [Chrome, IE 11, FF 20] */

    /* Standard Defaults */
    -webkit-flex: 0 1 auto;
    -moz-flex: 0 1 auto;
    -ms-flex: 0 1 auto;/* IE defaults to 0 0 auto */
    flex: 0 1 auto;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;

    -webkit-flex-flow: row nowrap;
    -moz-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    flex-direction: row;/* row | row-reverse | column | column-reverse */
    flex-wrap: nowrap;/* nowrap | wrap | wrap-reverse */

    align-items: stretch;/* stretch | flex-start | flex-end | center | baseline */
    align-self: auto;/* auto | flex-start | flex-end | center | baseline | stretch */
    align-content: stretch;/* stretch | flex-start | flex-end | center | space-between | space-around */
    -ms-order: 0;/* IE 10 */
    order: 0;/* IE 11 */
    justify-content: flex-start;/* flex-start | flex-end | center | space-between | space-around */
}
Final syntax 2011 hybrid syntax 2009 syntax IE 10 Old Webkit Old Mozilla
display: flex display: flexbox display: box display: -ms-flexbox display: -webkit-box display: -moz-box
flex-direction: row box-direction: normal
box-orient: horizontal		 -ms-flex-direction: row -webkit-box-orient: horizontal -moz-box-orient: horizontal
flex-wrap: nowrap flex-wrap: nowrap N/A ? -ms-flex-wrap: wrap N/A ? N/A ?
flex-flow: row nowrap flex-flow: row nowrap N/A ? N/A ? N/A ? N/A ?
justify-content: flex-start flex-pack: start box-pack: start -ms-flex-pack: start -webkit-box-pack: start ? -moz-box-pack: start ?
align-items: flex-start flex-align: start box-align: start -ms-flex-align: start -webkit-box-align: start ? -moz-box-align: start ?
flex: 1 flex: 1 box-flex: 1 -ms-flex: none -webkit-box-flex: 1 -moz-box-flex: 1
order: 0 flex-order: 0 box-ordinal-group: 0 -ms-flex-order: 0 -webkit-order: 0 N/A ?
N/A ? N/A ? box-flex-group: 1 N/A ? N/A ? N/A ?
N/A N/A box-lines: single/multiple N/A N/A N/A

W3C: CSS Flexible Box Layout Module Level 1 - 2014-03

Property Values Initial Applies to Inh. Percentages Media
display
align-content
align-items
align-self
flex-flow
flex
justify-content
order

W3C: CSS Flexible Box Layout Module Level 1 - 2014-03

Property Values Initial Applies to Inh. Percentages Media
display flex | inline-flex N/A all no? N/A all
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch multi-line flex containers no N/A visual
align-items flex-start | flex-end | center | baseline | stretch stretch flex containers no N/A visual
align-self auto | flex-start | flex-end | center | baseline | stretch auto flex items no N/A visual
flex-flow <‘flex-direction’> || <‘flex-wrap’> see individual props flex containers see individual props N/A visual
flex none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] see individual props flex items see individual props N/A visual
justify-content flex-start | flex-end | center | space-between | space-around flex-start flex containers no N/A visual
order <integer> 0 flex items and absolutely-positioned children of flex containers no N/A visual

W3C: CSS Flexible Box Layout Module - 2012-09

Property Values Initial Applies to Inh. Percentages Media
display flex | inline-flex N/A all no? N/A all
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch multi-line flex containers no N/A visual
align-items flex-start | flex-end | center | baseline | stretch stretch flex containers no N/A visual
align-self auto | flex-start | flex-end | center | baseline | stretch auto flex items no N/A visual
flex-flow <‘flex-direction’> || <‘flex-wrap’> see individual props flex containers see individual props N/A visual
flex none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] see individual props flex items see individual props N/A visual
justify-content flex-start | flex-end | center | space-between | space-around flex-start flex containers no N/A visual
order <integer> 0 flex items no N/A visual
Property Values Initial Applies to Inh. Percentages Media
flex-direction row | row-reverse | column | column-reverse row flex containers no N/A visual
flex-wrap nowrap | wrap | wrap-reverse nowrap flex containers no N/A visual
flex-basis <’width’> auto flex items no relative to the flex container’s inner main size visual
flex-grow <number> 0 flex items no N/A visual
flex-shrink <number> 1 flex items no N/A visual

Important: min-width, min-height

W3C: CSS Flexible Box Layout Module - 2011-11

Property Values Initial Applies to Inh. Percentages Media
display flexbox | inline-flexbox N/A both N/A N/A ?
flex-align start | end | center | baseline | stretch stretch flexbox items no specified value visual
flex-flow [ row | row-reverse | column | column-reverse ]  [ wrap | wrap-reverse ]? row flexboxes no lr | rl | tb | bt visual
flex-line-pack start | end | center | justify start multi-line flexboxes no specified value visual
flex-order <integer> 0 flexbox items no specified value visual
flex-pack start | end | center | justify start flexboxes no specified value visual

W3C: CSS Flexible Box Layout Module - 2011-03

Property Values Initial Applies to Inh. Percentages Media
display flexbox | inline-flexbox N/A both N/A N/A ?
flex-align auto | baseline auto flexboxes no specified value visual
flex-direction lr | rl | tb | bt | inline | inline-reverse | block | block-reverse inline flexboxes no lr | rl | tb | bt visual
flex-order <integer> 1 flexbox items no specified value visual
flex-pack start | end | center | justify start flexboxes no specified value visual