BASELINE NowYouCanUse.com
Widely Available Flexbox

Flexbox

Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.
Baseline Status: Achieved Widely Available on Mar 30, 2018 (Cross-browser Newly Available since Sep 30, 2015).
Desktop Browser Engine Support
Google Chrome
29
Supported
Mozilla Firefox
20
Supported
Apple Safari
9
Supported
Microsoft Edge
12
Supported
Mobile Browser Engine Support
Chrome Android
29
Firefox Android
20
Safari iOS
9
Specifications and References
MDN Browser Compat Data Keys:
css.properties.align-content ↗ css.properties.align-content.baseline ↗ css.properties.align-content.center ↗ css.properties.align-content.context_flex ↗ css.properties.align-content.end ↗ css.properties.align-content.first_baseline ↗ css.properties.align-content.flex-end ↗ css.properties.align-content.flex-start ↗ css.properties.align-content.last_baseline ↗ css.properties.align-content.normal ↗ css.properties.align-content.safe ↗ css.properties.align-content.space-around ↗ css.properties.align-content.space-between ↗ css.properties.align-content.space-evenly ↗ css.properties.align-content.start ↗ css.properties.align-content.stretch ↗ css.properties.align-content.unsafe ↗ css.properties.align-items ↗ css.properties.align-items.baseline ↗ css.properties.align-items.center ↗ css.properties.align-items.context_flex ↗ css.properties.align-items.context_flex.end_in_flex ↗ css.properties.align-items.context_flex.start_in_flex ↗ css.properties.align-items.end ↗ css.properties.align-items.first_baseline ↗ css.properties.align-items.last_baseline ↗ css.properties.align-items.normal ↗ css.properties.align-items.safe ↗ css.properties.align-items.self-end ↗ css.properties.align-items.self-start ↗ css.properties.align-items.start ↗ css.properties.align-items.stretch ↗ css.properties.align-items.unsafe ↗ css.properties.align-self ↗ css.properties.align-self.auto ↗ css.properties.align-self.baseline ↗ css.properties.align-self.center ↗ css.properties.align-self.context_flex ↗ css.properties.align-self.context_flex.stretch_in_flex ↗ css.properties.align-self.end ↗ css.properties.align-self.first_baseline ↗ css.properties.align-self.flex-end ↗ css.properties.align-self.flex-start ↗ css.properties.align-self.last_baseline ↗ css.properties.align-self.normal ↗ css.properties.align-self.safe ↗ css.properties.align-self.self-end ↗ css.properties.align-self.self-start ↗ css.properties.align-self.start ↗ css.properties.align-self.stretch ↗ css.properties.align-self.unsafe ↗ css.properties.display.flex ↗ css.properties.display.inline-flex ↗ css.properties.flex ↗ css.properties.flex-basis ↗ css.properties.flex-basis.auto ↗ css.properties.flex-basis.content ↗ css.properties.flex-basis.fit-content ↗ css.properties.flex-basis.max-content ↗ css.properties.flex-basis.min-content ↗ css.properties.flex-direction ↗ css.properties.flex-direction.column ↗ css.properties.flex-direction.column-reverse ↗ css.properties.flex-direction.row ↗ css.properties.flex-direction.row-reverse ↗ css.properties.flex-flow ↗ css.properties.flex-grow ↗ css.properties.flex-grow.less_than_zero_animate ↗ css.properties.flex-shrink ↗ css.properties.flex-wrap ↗ css.properties.flex-wrap.nowrap ↗ css.properties.flex-wrap.wrap ↗ css.properties.flex-wrap.wrap-reverse ↗ css.properties.flex.none ↗ css.properties.justify-content ↗ css.properties.justify-content.context_flex ↗ css.properties.justify-content.end ↗ css.properties.justify-content.left ↗ css.properties.justify-content.normal ↗ css.properties.justify-content.right ↗ css.properties.justify-content.safe ↗ css.properties.justify-content.space-evenly ↗ css.properties.justify-content.start ↗ css.properties.justify-content.stretch ↗ css.properties.justify-content.unsafe ↗ css.properties.justify-items ↗ css.properties.justify-items.center ↗ css.properties.justify-items.context_flex ↗ css.properties.justify-items.left ↗ css.properties.justify-items.legacy ↗ css.properties.justify-items.right ↗ css.properties.order ↗ css.properties.place-content ↗ css.properties.place-content.context_flex ↗ css.properties.place-items ↗ css.properties.place-items.context_flex ↗ css.properties.place-self ↗ css.properties.place-self.context_flex ↗ css.properties.position.absolutely_positioned_flex_children ↗
id: flexbox