Flexbox: Browser Support, Features, Limitations

What is Flexbox?

Flexbox is the CSS Flexible Box Layout Module Level 1, a W3C specification that lays out items along a single axis. The display: flex declaration creates a flex container, and its direct children become flex items that grow, shrink, and align to fit the parent.

Which browsers does Flexbox support?

Flexbox is Baseline Widely Available and ships in every modern desktop and mobile browser. Chrome 29, Edge 12, Firefox 28, Safari 9 on macOS and iOS, Opera 12.1, Samsung Internet 4, and Android Browser 4.4 all enable the unprefixed display: flex syntax by default. Internet Explorer 10 and 11 support an older draft with the -ms- prefix only.

What are the key features of Flexbox?

Flexbox replaces a stack of float, inline-block, and table-cell hacks with a small set of declarative properties. Each feature solves a layout problem that used to need brittle margin math.

• One-dimensional layout: Flexbox arranges items along the main axis set by flex-direction. Pick row, row-reverse, column, or column-reverse, and the cross axis runs perpendicular. This shape fits navigation bars, toolbars, button rows, and form field groups.
• Flexible item sizing: The flex shorthand combines flex-grow, flex-shrink, and flex-basis. Items grow to claim free space, shrink to avoid overflow, or hold a fixed flex-basis. A flex: 1 child fills any remaining track without a width math ladder.
• Alignment on both axes: justify-content positions items along the main axis with values like flex-start, center, space-between, and space-evenly. align-items aligns items along the cross axis. align-self overrides the parent for a single item, which removes the need for negative margins to recenter one child.
• Wrap and gap control: flex-wrap toggles wrapping when items overflow a single line, and the gap property sets row and column spacing between items without margin tricks. Gap support shipped in Chrome 84, Firefox 63, and Safari 14.1, so target those baselines if you rely on it.
• Visual order without DOM changes: The order property reorders items at render without moving them in the markup. This keeps screen reader order tied to the source while letting CSS swap the visual sequence at breakpoints.

How do you check if a browser supports Flexbox?

The cleanest check is the @supports at-rule with a property and value pair. Wrap Flexbox rules so the browser only applies them when the engine parses display: flex, and pair the rule with @supports not to ship a float or inline-block fallback for legacy browsers.

/* Wrap Flexbox rules in @supports so legacy engines fall through to the
   block float fallback below. Browsers that recognize display: flex apply
   the modern layout, while older builds keep a working layout. */
@supports (display: flex) {
    .toolbar {
        display: flex;
        gap: 12px;
        align-items: center;
    }
}

@supports not (display: flex) {
    .toolbar > * {
        display: inline-block;
        vertical-align: middle;
        margin-right: 12px;
    }
}

For runtime checks, the CSS.supports JavaScript API parses the same property and value pair. Paste this snippet into the DevTools console of any browser to see whether the engine recognizes Flexbox.

// Paste into any browser DevTools console to check Flexbox support at
// runtime. CSS.supports parses the property and value pair and returns
// a boolean.

const supportsFlexbox = CSS.supports('display', 'flex');
console.log(`Flexbox supported in this browser: ${supportsFlexbox}`);

// Logs true on Chrome 29+, Edge 12+, Firefox 28+, Safari 9+, Opera 12.1+,
// Samsung Internet 4+, and Android Browser 4.4+. Logs false on Internet
// Explorer 9 and older browsers that predate the modern syntax.

If CSS.supports returns false, the browser does not parse display: flex at all. Use the @supports not block above to ship a float or inline-block layout instead of leaving the page collapsed. Modernizr.flexbox provides the same check on browsers that predate CSS.supports.

What are the known issues with Flexbox?

Flexbox is Baseline Widely Available, but a handful of cross-browser bugs still hit production sites. Plan around these before you ship Flexbox to a long browser tail.

• Internet Explorer 11 min-height bug: Internet Explorer 11 ignores min-height on a flex container set to flex-direction: column, which collapses the parent below the child content. Set height instead of min-height, or add a wrapper div with the height set on the outer element.
• Internet Explorer 11 flex-basis on column: Internet Explorer 11 ignores flex-basis on flex-direction: column items and treats every item as flex-basis: auto. Set explicit width and height on the items, or run rules through Autoprefixer with the flexbox: no-2009 hint.
• Safari 6.1 to 8.4 min-height: auto: Older Safari builds resolve min-height: auto on flex items differently and can stop items from shrinking below their content. Set min-height: 0 and min-width: 0 on flex items to keep wrapping consistent.
• Gap on flex containers needs a newer baseline: The gap property only works on Flexbox from Chrome 84, Firefox 63, and Safari 14.1. Older Safari 9 to 14 builds ignore the gap and items collapse together. Fall back to margin: 0 8px 8px 0 with a negative margin on the parent for those builds.
• Image stretching in row layouts: A direct img child of a flex container stretches to the cross axis when align-items defaults to stretch, which warps the picture. Set align-items: flex-start on the parent or align-self: flex-start on the img to keep the natural aspect ratio.
• In my experience, the silent failure that bites teams the most is a flex item with a long word that overflows the container: the default min-width: auto on flex items refuses to shrink below the longest word, so the row pushes past the parent and triggers horizontal scroll on phones. Set min-width: 0 on the item and overflow-wrap: anywhere on the text to fix it before QA finds the broken layout.

Citations

All Flexbox version numbers and platform notes in this guide come from these primary sources:

• W3C CSS Flexible Box Layout Module Level 1: w3.org/TR/css-flexbox-1
• MDN CSS Flexible Box Layout reference: developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout
• MDN Backwards Compatibility of Flexbox: developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox
• MDN Basic Concepts of Flexbox: developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• MDN flex CSS shorthand property: developer.mozilla.org/en-US/docs/Web/CSS/flex
• MDN @supports at-rule: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• web.dev Learn CSS, Flexbox module: web.dev/learn/css/flexbox
• WebKit blog, CSS Flexible Box update: webkit.org/blog/3709/css-flexbox-and-css-grid-faster-with-the-grid-layout
• Wikipedia, CSS Flexible Box Layout: en.wikipedia.org/wiki/CSS_Flexible_Box_Layout
• Microsoft Learn, Flexbox layout for IE 10 and 11: learn.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides