FlexboxBaseline · Widely available

Flexbox is a one-dimensional layout system, which places content either horizontally or vertically, with optional wrapping.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 30, 2015. Widely available since Mar 30, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–28Not supported

29+Supportedsince Aug 20, 2013

Current: 155

Edge

12+Supportedsince Jul 29, 2015

Current: 154

Firefox

1–19Not supported

20+Supportedsince Apr 2, 2013

Current: 157

Safari

1–8Not supported

9+Supportedsince Sep 30, 2015

Current: 27

MobileChrome Android

18–28Not supported

29+Supportedsince Aug 21, 2013

Current: 155

Firefox Android

4–19Not supported

20+Supportedsince Apr 2, 2013

Current: 157

Safari iOS

1–8Not supported

9+Supportedsince Sep 16, 2015

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toolbar .search {
  flex: 1;
}

Feature detection

CSS · check before using

@supports (display: flex) {
  .row { display: flex; }
}

Documentation (MDN)

Specification

drafts.csswg.org/css-flexbox-1 ↗

Usage share

caniuse.com/flexbox ↗

Sub-features

Support for each part of the feature (84). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
align-content	29	12	28	9	29	28	9
align-content.baseline	57	79	45	9	57	45	9
align-content.context_flex	29	12	28	9	29	28	9
align-content.end	93	93	45	15.6	93	45	15.6
align-content.first_baseline	59	79	52	11	59	52	11
align-content.last_baseline	✕	✕	52	✕	✕	52	✕
align-content.normal	29	12	28	9	29	28	9
align-content.safe	115	115	63	17.6	115	63	17.6
align-content.space-evenly	60	79	52	11	60	52	11
align-content.start	93	93	45	15.6	93	45	15.6
align-content.stretch	57	79	52	9	57	52	9
align-content.unsafe	115	115	63	17.6	115	63	17.6
align-items	29	12	20	9	29	20	9
align-items.baseline	29	79	28	9	29	28	9
align-items.center	29	12	28	9	29	28	9
align-items.context_flex	52	12	20	9	52	20	9
align-items.context_flex.end_in_flex	93	93	45	15.4	93	45	15.4
align-items.context_flex.start_in_flex	93	93	45	15.4	93	45	15.4
align-items.end	57	79	52	11	57	52	11
align-items.first_baseline	59	79	52	11	59	52	11

Show 64 more

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
align-items.last_baseline	108	108	52	16.2	108	52	16.2
align-items.safe	115	115	63	17.6	115	63	17.6
align-items.start	57	79	52	11	57	52	11
align-items.unsafe	115	115	63	17.6	115	63	17.6
align-self	29	12	20	9	29	20	9
align-self.auto	29	79	28	9	29	28	9
align-self.baseline	29	79	28	9	29	28	9
align-self.context_flex	36	12	20	9	36	20	9
align-self.context_flex.stretch_in_flex	57	79	52	9	57	52	9
align-self.end	93	93	45	15.4	93	45	15.4
align-self.first_baseline	59	79	52	11	59	52	11
align-self.last_baseline	108	108	52	16.2	108	52	16.2
align-self.normal	29	79	28	9	29	28	9
align-self.safe	115	115	63	17.6	115	63	17.6
align-self.start	93	93	45	15.4	93	45	15.4
align-self.stretch	29	79	28	9	29	28	9
align-self.unsafe	115	115	63	17.6	115	63	17.6
display.flex	29	12	20	9	29	20	9
display.inline-flex	29	12	20	9	29	20	9
flex	29	12	22	9	29	22	9
flex-basis	29	12	22	9	29	22	9
flex-basis.auto	29	12	22	9	29	22	9
flex-basis.content	94	94	61	15.4	94	61	15.4
flex-basis.fit-content	94	94	94	16	94	94	16
flex-basis.max-content	94	94	66	16	94	66	16
flex-basis.min-content	94	94	66	16	94	66	16
flex-direction	29	12	22	9	29	22	9
flex-direction.column	29	12	22	9	29	22	9
flex-direction.column-reverse	29	12	81	9	29	81	9
flex-direction.row	29	12	22	9	29	22	9
flex-direction.row-reverse	29	12	81	9	29	81	9
flex-flow	29	12	28	9	29	28	9
flex-grow	29	12	20	9	29	20	9
flex-grow.less_than_zero_animate	49	79	32	✕	49	32	✕
flex-shrink	29	12	20	9	29	20	9
flex-wrap	29	12	28	9	29	28	9
flex-wrap.nowrap	29	12	28	9	29	28	9
flex-wrap.wrap	29	12	28	9	29	28	9
flex-wrap.wrap-reverse	29	12	28	9	29	28	9
flex.none	29	12	22	9	29	22	9
justify-content	29	12	20	9	29	20	9
justify-content.flex_context	52	12	20	9	52	20	9
justify-content.flex_context.left_right	93	93	52	9	93	52	9
justify-content.flex_context.safe_unsafe	115	115	63	17.6	115	63	17.6
justify-content.flex_context.space-evenly	60	79	52	11	60	52	11
justify-content.flex_context.start_end	93	93	45	15.4	93	45	15.4
justify-content.flex_context.stretch	57	79	52	9	57	52	9
justify-content.left	29	79	20	9	29	20	9
justify-content.normal	29	79	20	9	29	20	9
justify-content.right	29	79	20	9	29	20	9
justify-items	52	12	20	9	52	20	9
justify-items.center	52	79	20	9	52	20	9
justify-items.flex_context	52	12	20	9	52	20	9
justify-items.left	52	79	20	9	52	20	9
justify-items.legacy	52	79	20	9	52	20	9
justify-items.right	52	79	20	9	52	20	9
order	29	12	20	9	29	20	9
place-content	59	79	45	9	59	45	9
place-content.flex_context	59	79	45	9	59	45	9
place-items	59	79	45	11	59	45	11
place-items.flex_context	59	79	45	11	59	45	11
place-self	59	79	45	11	59	45	11
place-self.flex_context	59	79	45	11	59	45	11
position.absolutely_positioned_flex_children	52	12	52	11	52	52	11