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