Widely Available
Flexbox
id: 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.flex_context ↗
css.properties.align-content.flex_context.baseline ↗
css.properties.align-content.flex_context.first_baseline ↗
css.properties.align-content.flex_context.last_baseline ↗
css.properties.align-content.flex_context.safe_unsafe ↗
css.properties.align-content.flex_context.space-evenly ↗
css.properties.align-content.flex_context.start_end ↗
css.properties.align-content.flex_context.stretch ↗
css.properties.align-content.normal ↗
css.properties.align-items ↗
css.properties.align-items.flex_context ↗
css.properties.align-items.flex_context.baseline ↗
css.properties.align-items.flex_context.first_baseline ↗
css.properties.align-items.flex_context.last_baseline ↗
css.properties.align-items.flex_context.safe_unsafe ↗
css.properties.align-items.flex_context.start_end ↗
css.properties.align-self ↗
css.properties.align-self.auto ↗
css.properties.align-self.flex_context ↗
css.properties.align-self.flex_context.baseline ↗
css.properties.align-self.flex_context.first_baseline ↗
css.properties.align-self.flex_context.last_baseline ↗
css.properties.align-self.flex_context.safe_unsafe ↗
css.properties.align-self.flex_context.start_end ↗
css.properties.align-self.flex_context.stretch ↗
css.properties.align-self.normal ↗
css.properties.align-self.stretch ↗
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.flex_context ↗
css.properties.justify-content.flex_context.left_right ↗
css.properties.justify-content.flex_context.safe_unsafe ↗
css.properties.justify-content.flex_context.space-evenly ↗
css.properties.justify-content.flex_context.start_end ↗
css.properties.justify-content.flex_context.stretch ↗
css.properties.justify-content.left ↗
css.properties.justify-content.normal ↗
css.properties.justify-content.right ↗
css.properties.justify-items ↗
css.properties.justify-items.center ↗
css.properties.justify-items.flex_context ↗
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.flex_context ↗
css.properties.place-items ↗
css.properties.place-items.flex_context ↗
css.properties.place-self ↗
css.properties.place-self.flex_context ↗
css.properties.position.absolutely_positioned_flex_children ↗