CINXE.COM

<!doctype html> <html dir="ltr" lang="en-US" class="no-js"> <head> <meta charset="utf-8" /> <title>CSS Flexible Box Layout Module | Can I use... Support tables for HTML5, CSS3, etc</title> <meta name="viewport" content="width=device-width"> <link rel="alternate" type="application/atom+xml" title="Can I Use updates" href="/feed"> <link href="//fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet"> <link rel="icon" href="/img/favicon-128.png" sizes="16x16 32x32 64x64 128x128" type="image/png"/> <link rel="apple-touch-icon" href="/img/favicon-128.png"> <link rel="stylesheet" href="/css/main.css?1734638145" media="all"> <link rel="stylesheet" href="/css/support-table.css?1734638145" media="all"> <link rel="stylesheet" href="/css/version-support.css?1734638145" media="all"> <link rel="stylesheet" data-theme="light" href="/css/theme-light.css?1734638145" media="all"> <link rel="stylesheet" data-theme="dark" href="/css/theme-dark.css?1734638145" media="(prefers-color-scheme: dark)"> <meta name="Description" content=""Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers."> <meta name="keywords" content="web browser compatibility support html css svg html5 css3 opera chrome firefox safari internet explorer"> <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="Can I use"/> <link rel="preconnect" href="https://ipinfo.io"> <link rel="preconnect" href="https://www.google-analytics.com"> <base href="/" /> <script> document.write('<style>.static-only {display:none}</style>'); </script> <script async src="https://www.googletagmanager.com/gtag/js?id=G-8SCDSGDGKM"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-8SCDSGDGKM'); </script> <script> (function() { if (!window.customElements) { var s = document.createElement('script'); s.src = '/legacy-handler.js'; document.getElementsByTagName('head')[0].appendChild(s); } }()); </script> <script defer src="js-data/data.js?1739741281"></script><script defer src="js/bundle.js?1734638146"></script><script>window.initialFeatData = {id: "flexbox", data: "[{\"description\":\"Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify-content` and `order`.\",\"spec\":\"https:\/\/www.w3.org\/TR\/css3-flexbox\/\",\"status\":\"cr\",\"baseline_status\":{\"status\":\"high\",\"lowDate\":\"2015-09-30\"},\"stats\":{\"ie\":{\"6\":\"n\",\"7\":\"n\",\"8\":\"n\",\"9\":\"n\",\"10\":\"a x #2 #4\",\"11\":\"a #4\"},\"edge\":{\"12\":\"y\",\"13\":\"y\",\"14\":\"y\",\"15\":\"y\",\"16\":\"y\",\"17\":\"y\",\"18\":\"y\",\"79\":\"y\",\"80\":\"y\",\"81\":\"y\",\"83\":\"y\",\"84\":\"y\",\"85\":\"y\",\"86\":\"y\",\"87\":\"y\",\"88\":\"y\",\"89\":\"y\",\"90\":\"y\",\"91\":\"y\",\"92\":\"y\",\"93\":\"y\",\"94\":\"y\",\"95\":\"y\",\"96\":\"y\",\"97\":\"y\",\"98\":\"y\",\"99\":\"y\",\"100\":\"y\",\"101\":\"y\",\"102\":\"y\",\"103\":\"y\",\"104\":\"y\",\"105\":\"y\",\"106\":\"y\",\"107\":\"y\",\"108\":\"y\",\"109\":\"y\",\"110\":\"y\",\"111\":\"y\",\"112\":\"y\",\"113\":\"y\",\"114\":\"y\",\"115\":\"y\",\"116\":\"y\",\"117\":\"y\",\"118\":\"y\",\"119\":\"y\",\"120\":\"y\",\"121\":\"y\",\"122\":\"y\",\"123\":\"y\",\"124\":\"y\",\"125\":\"y\",\"126\":\"y\",\"127\":\"y\",\"128\":\"y\",\"129\":\"y\",\"130\":\"y\",\"131\":\"y\",\"132\":\"y\"},\"firefox\":{\"2\":\"a x #1\",\"3\":\"a x #1\",\"3.5\":\"a x #1\",\"3.6\":\"a x #1\",\"4\":\"a x #1\",\"5\":\"a x #1\",\"6\":\"a x #1\",\"7\":\"a x #1\",\"8\":\"a x #1\",\"9\":\"a x #1\",\"10\":\"a x #1\",\"11\":\"a x #1\",\"12\":\"a x #1\",\"13\":\"a x #1\",\"14\":\"a x #1\",\"15\":\"a x #1\",\"16\":\"a x #1\",\"17\":\"a x #1\",\"18\":\"a x #1\",\"19\":\"a x #1\",\"20\":\"a x #1\",\"21\":\"a x #1\",\"22\":\"a #3\",\"23\":\"a #3\",\"24\":\"a #3\",\"25\":\"a #3\",\"26\":\"a #3\",\"27\":\"a #3\",\"28\":\"y\",\"29\":\"y\",\"30\":\"y\",\"31\":\"y\",\"32\":\"y\",\"33\":\"y\",\"34\":\"y\",\"35\":\"y\",\"36\":\"y\",\"37\":\"y\",\"38\":\"y\",\"39\":\"y\",\"40\":\"y\",\"41\":\"y\",\"42\":\"y\",\"43\":\"y\",\"44\":\"y\",\"45\":\"y\",\"46\":\"y\",\"47\":\"y\",\"48\":\"y\",\"49\":\"y\",\"50\":\"y\",\"51\":\"y\",\"52\":\"y\",\"53\":\"y\",\"54\":\"y\",\"55\":\"y\",\"56\":\"y\",\"57\":\"y\",\"58\":\"y\",\"59\":\"y\",\"60\":\"y\",\"61\":\"y\",\"62\":\"y\",\"63\":\"y\",\"64\":\"y\",\"65\":\"y\",\"66\":\"y\",\"67\":\"y\",\"68\":\"y\",\"69\":\"y\",\"70\":\"y\",\"71\":\"y\",\"72\":\"y\",\"73\":\"y\",\"74\":\"y\",\"75\":\"y\",\"76\":\"y\",\"77\":\"y\",\"78\":\"y\",\"79\":\"y\",\"80\":\"y\",\"81\":\"y\",\"82\":\"y\",\"83\":\"y\",\"84\":\"y\",\"85\":\"y\",\"86\":\"y\",\"87\":\"y\",\"88\":\"y\",\"89\":\"y\",\"90\":\"y\",\"91\":\"y\",\"92\":\"y\",\"93\":\"y\",\"94\":\"y\",\"95\":\"y\",\"96\":\"y\",\"97\":\"y\",\"98\":\"y\",\"99\":\"y\",\"100\":\"y\",\"101\":\"y\",\"102\":\"y\",\"103\":\"y\",\"104\":\"y\",\"105\":\"y\",\"106\":\"y\",\"107\":\"y\",\"108\":\"y\",\"109\":\"y\",\"110\":\"y\",\"111\":\"y\",\"112\":\"y\",\"113\":\"y\",\"114\":\"y\",\"115\":\"y\",\"116\":\"y\",\"117\":\"y\",\"118\":\"y\",\"119\":\"y\",\"120\":\"y\",\"121\":\"y\",\"122\":\"y\",\"123\":\"y\",\"124\":\"y\",\"125\":\"y\",\"126\":\"y\",\"127\":\"y\",\"128\":\"y\",\"129\":\"y\",\"130\":\"y\",\"131\":\"y\",\"132\":\"y\",\"133\":\"y\",\"134\":\"y\",\"135\":\"y\",\"136\":\"y\",\"137\":\"y\",\"138\":\"y\"},\"chrome\":{\"4\":\"a x #1\",\"5\":\"a x #1\",\"6\":\"a x #1\",\"7\":\"a x #1\",\"8\":\"a x #1\",\"9\":\"a x #1\",\"10\":\"a x #1\",\"11\":\"a x #1\",\"12\":\"a x #1\",\"13\":\"a x #1\",\"14\":\"a x #1\",\"15\":\"a x #1\",\"16\":\"a x #1\",\"17\":\"a x #1\",\"18\":\"a x #1\",\"19\":\"a x #1\",\"20\":\"a x #1\",\"21\":\"y x\",\"22\":\"y x\",\"23\":\"y x\",\"24\":\"y x\",\"25\":\"y x\",\"26\":\"y x\",\"27\":\"y x\",\"28\":\"y x\",\"29\":\"y\",\"30\":\"y\",\"31\":\"y\",\"32\":\"y\",\"33\":\"y\",\"34\":\"y\",\"35\":\"y\",\"36\":\"y\",\"37\":\"y\",\"38\":\"y\",\"39\":\"y\",\"40\":\"y\",\"41\":\"y\",\"42\":\"y\",\"43\":\"y\",\"44\":\"y\",\"45\":\"y\",\"46\":\"y\",\"47\":\"y\",\"48\":\"y\",\"49\":\"y\",\"50\":\"y\",\"51\":\"y\",\"52\":\"y\",\"53\":\"y\",\"54\":\"y\",\"55\":\"y\",\"56\":\"y\",\"57\":\"y\",\"58\":\"y\",\"59\":\"y\",\"60\":\"y\",\"61\":\"y\",\"62\":\"y\",\"63\":\"y\",\"64\":\"y\",\"65\":\"y\",\"66\":\"y\",\"67\":\"y\",\"68\":\"y\",\"69\":\"y\",\"70\":\"y\",\"71\":\"y\",\"72\":\"y\",\"73\":\"y\",\"74\":\"y\",\"75\":\"y\",\"76\":\"y\",\"77\":\"y\",\"78\":\"y\",\"79\":\"y\",\"80\":\"y\",\"81\":\"y\",\"83\":\"y\",\"84\":\"y\",\"85\":\"y\",\"86\":\"y\",\"87\":\"y\",\"88\":\"y\",\"89\":\"y\",\"90\":\"y\",\"91\":\"y\",\"92\":\"y\",\"93\":\"y\",\"94\":\"y\",\"95\":\"y\",\"96\":\"y\",\"97\":\"y\",\"98\":\"y\",\"99\":\"y\",\"100\":\"y\",\"101\":\"y\",\"102\":\"y\",\"103\":\"y\",\"104\":\"y\",\"105\":\"y\",\"106\":\"y\",\"107\":\"y\",\"108\":\"y\",\"109\":\"y\",\"110\":\"y\",\"111\":\"y\",\"112\":\"y\",\"113\":\"y\",\"114\":\"y\",\"115\":\"y\",\"116\":\"y\",\"117\":\"y\",\"118\":\"y\",\"119\":\"y\",\"120\":\"y\",\"121\":\"y\",\"122\":\"y\",\"123\":\"y\",\"124\":\"y\",\"125\":\"y\",\"126\":\"y\",\"127\":\"y\",\"128\":\"y\",\"129\":\"y\",\"130\":\"y\",\"131\":\"y\",\"132\":\"y\",\"133\":\"y\",\"134\":\"y\",\"135\":\"y\",\"136\":\"y\"},\"safari\":{\"3.1\":\"a x #1\",\"3.2\":\"a x #1\",\"4\":\"a x #1\",\"5\":\"a x #1\",\"5.1\":\"a x #1\",\"6\":\"a x #1\",\"6.1\":\"y x\",\"7\":\"y x\",\"7.1\":\"y x\",\"8\":\"y x\",\"9\":\"y\",\"9.1\":\"y\",\"10\":\"y\",\"10.1\":\"y\",\"11\":\"y\",\"11.1\":\"y\",\"12\":\"y\",\"12.1\":\"y\",\"13\":\"y\",\"13.1\":\"y\",\"14\":\"y\",\"14.1\":\"y\",\"15\":\"y\",\"15.1\":\"y\",\"15.2-15.3\":\"y\",\"15.4\":\"y\",\"15.5\":\"y\",\"15.6\":\"y\",\"16.0\":\"y\",\"16.1\":\"y\",\"16.2\":\"y\",\"16.3\":\"y\",\"16.4\":\"y\",\"16.5\":\"y\",\"16.6\":\"y\",\"17.0\":\"y\",\"17.1\":\"y\",\"17.2\":\"y\",\"17.3\":\"y\",\"17.4\":\"y\",\"17.5\":\"y\",\"17.6\":\"y\",\"18.0\":\"y\",\"18.1\":\"y\",\"18.2\":\"y\",\"18.3\":\"y\",\"18.4\":\"y\",\"TP\":\"y\"},\"opera\":{\"10.0-10.1\":\"n\",\"11.5\":\"n\",\"12.1\":\"y\",\"15\":\"y x\",\"16\":\"y x\",\"17\":\"y\",\"18\":\"y\",\"19\":\"y\",\"20\":\"y\",\"21\":\"y\",\"22\":\"y\",\"23\":\"y\",\"24\":\"y\",\"25\":\"y\",\"26\":\"y\",\"27\":\"y\",\"28\":\"y\",\"29\":\"y\",\"30\":\"y\",\"31\":\"y\",\"32\":\"y\",\"33\":\"y\",\"34\":\"y\",\"35\":\"y\",\"36\":\"y\",\"37\":\"y\",\"38\":\"y\",\"39\":\"y\",\"40\":\"y\",\"41\":\"y\",\"42\":\"y\",\"43\":\"y\",\"44\":\"y\",\"45\":\"y\",\"46\":\"y\",\"47\":\"y\",\"48\":\"y\",\"49\":\"y\",\"50\":\"y\",\"51\":\"y\",\"52\":\"y\",\"53\":\"y\",\"54\":\"y\",\"55\":\"y\",\"56\":\"y\",\"57\":\"y\",\"58\":\"y\",\"60\":\"y\",\"62\":\"y\",\"63\":\"y\",\"64\":\"y\",\"65\":\"y\",\"66\":\"y\",\"67\":\"y\",\"68\":\"y\",\"69\":\"y\",\"70\":\"y\",\"71\":\"y\",\"72\":\"y\",\"73\":\"y\",\"74\":\"y\",\"75\":\"y\",\"76\":\"y\",\"77\":\"y\",\"78\":\"y\",\"79\":\"y\",\"80\":\"y\",\"81\":\"y\",\"82\":\"y\",\"83\":\"y\",\"84\":\"y\",\"85\":\"y\",\"86\":\"y\",\"87\":\"y\",\"88\":\"y\",\"89\":\"y\",\"90\":\"y\",\"91\":\"y\",\"92\":\"y\",\"93\":\"y\",\"94\":\"y\",\"95\":\"y\",\"96\":\"y\",\"97\":\"y\",\"98\":\"y\",\"99\":\"y\",\"100\":\"y\",\"101\":\"y\",\"102\":\"y\",\"103\":\"y\",\"104\":\"y\",\"105\":\"y\",\"106\":\"y\",\"107\":\"y\",\"108\":\"y\",\"109\":\"y\",\"110\":\"y\",\"111\":\"y\",\"112\":\"y\",\"113\":\"y\",\"114\":\"y\"},\"ios_saf\":{\"3.2\":\"a x #1\",\"4.0-4.1\":\"a x #1\",\"4.2-4.3\":\"a x #1\",\"5.0-5.1\":\"a x #1\",\"6.0-6.1\":\"a x #1\",\"7.0-7.1\":\"y x\",\"8\":\"y x\",\"8.1-8.4\":\"y x\",\"9.0-9.2\":\"y\",\"9.3\":\"y\",\"10.0-10.2\":\"y\",\"10.3\":\"y\",\"11.0-11.2\":\"y\",\"11.3-11.4\":\"y\",\"12.0-12.1\":\"y\",\"12.2-12.5\":\"y\",\"13.0-13.1\":\"y\",\"13.2\":\"y\",\"13.3\":\"y\",\"13.4-13.7\":\"y\",\"14.0-14.4\":\"y\",\"14.5-14.8\":\"y\",\"15.0-15.1\":\"y\",\"15.2-15.3\":\"y\",\"15.4\":\"y\",\"15.5\":\"y\",\"15.6-15.8\":\"y\",\"16.0\":\"y\",\"16.1\":\"y\",\"16.2\":\"y\",\"16.3\":\"y\",\"16.4\":\"y\",\"16.5\":\"y\",\"16.6-16.7\":\"y\",\"17.0\":\"y\",\"17.1\":\"y\",\"17.2\":\"y\",\"17.3\":\"y\",\"17.4\":\"y\",\"17.5\":\"y\",\"17.6-17.7\":\"y\",\"18.0\":\"y\",\"18.1\":\"y\",\"18.2\":\"y\",\"18.3\":\"y\",\"18.4\":\"y\"},\"op_mini\":{\"all\":\"y\"},\"android\":{\"2.1\":\"a x #1\",\"2.2\":\"a x #1\",\"2.3\":\"a x #1\",\"3\":\"a x #1\",\"4\":\"a x #1\",\"4.1\":\"a x #1\",\"4.2-4.3\":\"a x #1\",\"4.4\":\"y\",\"4.4.3-4.4.4\":\"y\",\"132\":\"y\"},\"bb\":{\"7\":\"a x #1\",\"10\":\"y\"},\"op_mob\":{\"12\":\"n\",\"12.1\":\"y\",\"80\":\"y\"},\"and_chr\":{\"132\":\"y\"},\"and_ff\":{\"132\":\"y\"},\"ie_mob\":{\"10\":\"a x #2\",\"11\":\"y\"},\"and_uc\":{\"15.5\":\"y\"},\"samsung\":{\"4\":\"y\",\"5.0-5.4\":\"y\",\"6.2-6.4\":\"y\",\"7.2-7.4\":\"y\",\"8.2\":\"y\",\"9.2\":\"y\",\"10.1\":\"y\",\"11.1-11.2\":\"y\",\"12.0\":\"y\",\"13.0\":\"y\",\"14.0\":\"y\",\"15.0\":\"y\",\"16.0\":\"y\",\"17.0\":\"y\",\"18.0\":\"y\",\"19.0\":\"y\",\"20\":\"y\",\"21\":\"y\",\"22\":\"y\",\"23\":\"y\",\"24\":\"y\",\"25\":\"y\",\"26\":\"y\",\"27\":\"y\"},\"and_qq\":{\"14.9\":\"y\"},\"baidu\":{\"13.52\":\"y\"},\"kaios\":{\"2.5\":\"y\",\"3.0-3.1\":\"y\"}},\"bug_count\":9,\"link_count\":11,\"notes\":\"Most partial support refers to supporting an [older version](https:\/\/www.w3.org\/TR\/2009\/WD-css3-flexbox-20090723\/) of the specification or an [older syntax](https:\/\/www.w3.org\/TR\/2012\/WD-css3-flexbox-20120322\/).\",\"notes_by_num\":{\"1\":\"Only supports the [old flexbox](https:\/\/www.w3.org\/TR\/2009\/WD-css3-flexbox-20090723) specification and does not support wrapping.\",\"2\":\"Only supports the [2012 syntax](https:\/\/www.w3.org\/TR\/2012\/WD-css3-flexbox-20120322\/)\",\"3\":\"Does not support flex-wrap, flex-flow or align-content properties\",\"4\":\"Partial support is due to large amount of bugs present (see known issues)\"},\"ucprefix\":false,\"parent\":\"\",\"children\":[\"flexbox-gap\"],\"keywords\":\"flex-box,displayflex,flex-direction,flex-wrap,flex-flow,flex-grow,flex-shrink,flex-basis,display:flex,justify-content:space-between,justify-content:space-around,align-content:space-between,align-content:space-around,space-between\",\"date_published\":\"2009-07-23\",\"chrome_id\":\"4837301406400512\",\"baseCategories\":[\"CSS\"]}\n]"};</script></head> <body class="is-home"> <div id="main" class="ciu-main-wrap"> <header class="ciu-page-header"> <nav role="navigation" id="tab-container"> <ul class="ciu-page-header__primary-nav"> <li class="site-nav-item js-site-nav"><a href="/" data-route="home">Home</a></li> <li class="site-nav-item js-site-nav site-nav-item--news"><a href="/ciu/news" data-route="news">News</a></li> </ul> <ul class="ciu-page-header__secondary-nav"> <li class="site-nav-item js-site-nav site-nav-item--comparison"><a href="/ciu/comparison" data-route="comparison">Compare<span class="site-nav__extra-text"> browsers</span></a></li> <li class="site-nav-item js-site-nav site-nav-item--last "><a href="/ciu/about" data-route="about">About</a></li> </ul> <a class="news js-news" data-newstime="1712448000" href="https://caniuse.com/wasm-bigint,wasm-bulk-memory,wasm-multi-value,wasm-mutable-globals,wasm-nontrapping-fptoint,wasm-signext,wasm-simd,wasm-threads"><span class="date">April 7, 2024 -</span> 8 new features</a> </nav> <section class="ciu-search"> <div class="ciu-search__inner js-search"> <a href="/" class="ciu-search__label">Can I use</a> <form action="/" class="ciu-search__form"> <label class="ciu-search__a11y-label" for="feat_search">Search</label> <input type="text" class="ciu-search__input" id="feat_search" name="search" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus value=""> <input type="hidden" name="static" value="1"> </form> ? <button class="options-toggle js-options-toggle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" class="icon"> <path d="M16,8.87V7L15.74,7l-1.95-.64-.52-1.25,1-2.12L13,1.67l-.25.12-1.82.93L9.66,2.2,8.87,0H7.05L7,.26,6.33,2.21l-1.25.52L3,1.73,1.67,3l.12.25.93,1.82L2.2,6.34,0,7.13V8.95L.26,9l2,.64.52,1.25L1.73,13,3,14.33l.25-.12,1.82-.93,1.26.52L7.13,16H8.95L9,15.74l.64-2,1.26-.52,2.11,1L14.33,13l-.12-.25-.93-1.82.52-1.26ZM8,10.55A2.55,2.55,0,1,1,10.55,8,2.55,2.55,0,0,1,8,10.55Z"/> </svg> <span> Settings </span> </button> </div> <div class="search-result-info js-search-result-info hidden"></div> </section> </header> <main class="ciu-page-content js-content" data-static-id="feat"> <article class="feature-block feature-block--feature static-block"> <section> <div class="feature-heading"> <h3 class="feature-title"> CSS Flexible Box Layout Module </h3> <a href="https://www.w3.org/TR/css3-flexbox/" class="specification cr" title="W3C Candidate Recommendation"> <i class="icon icon-spec"></i> - CR </a> </div> <aside class="usage-container"> <ul> <li class="support-stats" data-usage-id="region.global"> <h4><span class="usage-title">Global usage</span></h4> <span class="support" title="Supported">97.34%</span> <span> + </span> <span class="partial" title="Partally Supported">0.4%</span> <span> = </span> <span class="total" title="Total">97.74%</span> </li> </ul> </aside> <div class="feature-description"><p>Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with <code>flex</code>, as well as <code>display: flex</code>, <code>display: inline-flex</code>, <code>align-content</code>, <code>align-items</code>, <code>align-self</code>, <code>justify-content</code> and <code>order</code>.</p> </div><div class="support-container-wrap view-mode-normal" style="--container-width:1360px"><div class="support-container" style="min-width: 1360px"><div class="support-list last-era-3"><h4 class="browser-heading browser--chrome">Chrome</h4><div class="cell-filler" style="height: 30px;"></div><ol><li class="stat-cell a x #1 past" title="Global usage: 0.00% - Partial support, requires this prefix to work: -webkit-" ><span class="forced-colors-only">◐ </span>4 - 20<span class="a11y-only">: Partial support</span></li><li class="stat-cell y x past" title="Global usage: 0.00% - Supported, requires this prefix to work: -webkit-" ><span class="forced-colors-only">✅ </span>21 - 28<span class="a11y-only">: Supported</span></li><li class="stat-cell y past" title="Global usage: 21.06% - Supported" ><span class="forced-colors-only">✅ </span>29 - 132<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.01% - Supported" ><span class="forced-colors-only">✅ </span>133<span class="a11y-only">: Supported</span></li><li class="stat-cell y future" title="Global usage: 0.01% - Supported" ><span class="forced-colors-only">✅ </span>134 - 136<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--edge">Edge</h4><div class="cell-filler" style="height: 94px;"></div><ol><li class="stat-cell y past" title="Global usage: 3.33% - Supported" ><span class="forced-colors-only">✅ </span>12 - 131<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 1.62% - Supported" ><span class="forced-colors-only">✅ </span>132<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-2"><h4 class="browser-heading browser--safari">Safari</h4><div class="cell-filler" style="height: 30px;"></div><ol><li class="stat-cell a x #1 past" title="Global usage: 0.00% - Partial support, requires this prefix to work: -webkit-" ><span class="forced-colors-only">◐ </span>3.1 - 6<span class="a11y-only">: Partial support</span></li><li class="stat-cell y x past" title="Global usage: 0.00% - Supported, requires this prefix to work: -webkit-" ><span class="forced-colors-only">✅ </span>6.1 - 8<span class="a11y-only">: Supported</span></li><li class="stat-cell y past" title="Global usage: 2.84% - Supported" ><span class="forced-colors-only">✅ </span>9 - 18.2<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.03% - Supported" ><span class="forced-colors-only">✅ </span>18.3<span class="a11y-only">: Supported</span></li><li class="stat-cell y future" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>18.4 - TP<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-3"><h4 class="browser-heading browser--firefox">Firefox</h4><div class="cell-filler" style="height: 30px;"></div><ol><li class="stat-cell a x #1 past" title="Global usage: 0.02% - Partial support, requires this prefix to work: -moz-" ><span class="forced-colors-only">◐ </span>2 - 21<span class="a11y-only">: Partial support</span></li><li class="stat-cell a #3 past" title="Global usage: 0.00% - Partial support" ><span class="forced-colors-only">◐ </span>22 - 27<span class="a11y-only">: Partial support</span></li><li class="stat-cell y past" title="Global usage: 2.10% - Supported" ><span class="forced-colors-only">✅ </span>28 - 134<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.01% - Supported" ><span class="forced-colors-only">✅ </span>135<span class="a11y-only">: Supported</span></li><li class="stat-cell y future" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>136 - 138<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--opera">Opera</h4><div class="cell-filler" style="height: 0px;"></div><ol><li class="stat-cell n past" title="Global usage: 0.00% - Not supported" ><span class="forced-colors-only">❌ </span>9 - 12<span class="a11y-only">: Not supported</span></li><li class="stat-cell y past" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>12.1<span class="a11y-only">: Supported</span></li><li class="stat-cell y x past" title="Global usage: 0.00% - Supported, requires this prefix to work: -webkit-" ><span class="forced-colors-only">✅ </span>15 - 16<span class="a11y-only">: Supported</span></li><li class="stat-cell y past" title="Global usage: 0.10% - Supported" ><span class="forced-colors-only">✅ </span>17 - 113<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.31% - Supported" ><span class="forced-colors-only">✅ </span>114<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--ie">IE</h4><div class="cell-filler" style="height: 62px;"></div><ol><li class="stat-cell n past" title="Global usage: 0.03% - Not supported" ><span class="forced-colors-only">❌ </span>5.5 - 9<span class="a11y-only">: Not supported</span></li><li class="stat-cell a x #2 #4 past" title="Global usage: 0.00% - Partial support, requires this prefix to work: -ms-" ><span class="forced-colors-only">◐ </span>10<span class="a11y-only">: Partial support</span></li><li class="stat-cell a #4 current" title="Global usage: 0.37% - Partial support" ><span class="forced-colors-only">◐ </span>11<span class="a11y-only">: Partial support</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--and_chr">Chrome for Android</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 46.19% - Supported" ><span class="forced-colors-only">✅ </span>132<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-1"><h4 class="browser-heading browser--ios_saf">Safari on iOS</h4><div class="cell-filler" style="height: 30px;"></div><ol><li class="stat-cell a x #1 past" title="Global usage: 0.01% - Partial support, requires this prefix to work: -webkit-" ><span class="forced-colors-only">◐ </span>3.2 - 6.1<span class="a11y-only">: Partial support</span></li><li class="stat-cell y x past" title="Global usage: 0.01% - Supported, requires this prefix to work: -webkit-" ><span class="forced-colors-only">✅ </span>7 - 8.4<span class="a11y-only">: Supported</span></li><li class="stat-cell y past" title="Global usage: 14.45% - Supported" ><span class="forced-colors-only">✅ </span>9 - 18.2<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.19% - Supported" ><span class="forced-colors-only">✅ </span>18.3<span class="a11y-only">: Supported</span></li><li class="stat-cell y future" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>18.4<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--samsung">Samsung Internet</h4><div class="cell-filler" style="height: 94px;"></div><ol><li class="stat-cell y past" title="Global usage: 0.39% - Supported" ><span class="forced-colors-only">✅ </span>4 - 26<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 1.91% - Supported" ><span class="forced-colors-only">✅ </span>27<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--op_mini">Opera Mini</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 0.04% - Supported" ><span class="forced-colors-only">✅ </span>all<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--op_mob">Opera Mobile</h4><div class="cell-filler" style="height: 62px;"></div><ol><li class="stat-cell n past" title="Global usage: 0.00% - Not supported" ><span class="forced-colors-only">❌ </span>10 - 12<span class="a11y-only">: Not supported</span></li><li class="stat-cell y past" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>12.1<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 1.04% - Supported" ><span class="forced-colors-only">✅ </span>80<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--and_uc">UC Browser for Android</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 0.84% - Supported" ><span class="forced-colors-only">✅ </span>15.5<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--android">Android Browser</h4><div class="cell-filler" style="height: 62px;"></div><ol><li class="stat-cell a x #1 past" title="Global usage: 0.00% - Partial support, requires this prefix to work: -webkit-" ><span class="forced-colors-only">◐ </span>2.1 - 4.3<span class="a11y-only">: Partial support</span></li><li class="stat-cell y past" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>4.4 - 4.4.4<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.31% - Supported" ><span class="forced-colors-only">✅ </span>132<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--and_ff">Firefox for Android</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 0.33% - Supported" ><span class="forced-colors-only">✅ </span>132<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--and_qq">QQ Browser</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 0.20% - Supported" ><span class="forced-colors-only">✅ </span>14.9<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--baidu">Baidu Browser</h4><div class="cell-filler" style="height: 126px;"></div><ol><li class="stat-cell y current" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>13.52<span class="a11y-only">: Supported</span></li></ol></div><div class="support-list last-era-0"><h4 class="browser-heading browser--kaios">KaiOS Browser</h4><div class="cell-filler" style="height: 94px;"></div><ol><li class="stat-cell y past" title="Global usage: 0.02% - Supported" ><span class="forced-colors-only">✅ </span>2.5<span class="a11y-only">: Supported</span></li><li class="stat-cell y current" title="Global usage: 0.00% - Supported" ><span class="forced-colors-only">✅ </span>3<span class="a11y-only">: Supported</span></li></ol></div></div></div><div class="single-page__notes"><p>Most partial support refers to supporting an <a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">older version</a> of the specification or an <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">older syntax</a>.</p> </div><dl class="single-feat-resources"><dt>Resources:</dt><dd><a href="https://bennettfeely.com/flexplorer/">Flexbox CSS generator</a></dd><dd><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a></dd><dd><a href="https://dev.opera.com/articles/view/advanced-cross-browser-flexbox/">Tutorial on cross-browser support</a></dd><dd><a href="https://github.com/10up/flexibility/">10up Open Sources IE 8 and 9 Support for Flexbox</a></dd><dd><a href="https://github.com/philipwalton/flexbugs">Flexbugs: Repo for flexbox bugs</a></dd><dd><a href="https://github.com/vadimyer/ecligrid">Ecligrid - Mobile first flexbox grid system</a></dd><dd><a href="https://mastery.games/post/the-difference-between-width-and-flex-basis/">The Difference Between Width and Flex-Basis</a></dd><dd><a href="https://philipwalton.github.io/solved-by-flexbox/">Examples on how to solve common layout problems with flexbox</a></dd><dd><a href="https://the-echoplex.net/flexyboxes/">Flexbox playground and code generator</a></dd><dd><a href="https://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html">Article on using the latest spec</a></dd></dl><dl><dt>Sub-features:</dt><dd><a href="./flexbox-gap">gap property for Flexbox</a></dd></dl> </section> </article> </main> <aside class="bottom-ad"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-3347535679733957" data-ad-slot="1205929339"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </aside> <footer class="ciu-footer"> <div class="footer__section footer__primary"> <h3 class="footer__heading">Can I use...</h3> <p class="site-description">Browser support tables for modern web technologies</p> <p>Created & maintained by <a class="external-link" href="https://front-end.social/@fyrd">@Fyrd</a>, design by <a class="external-link" href="https://mastodon.world/@lensco">@Lensco</a>.</p> <p>Support data contributions by the GitHub <a class="external-link" href="https://github.com/Fyrd/caniuse/graphs/contributors">community</a>. <p id="usage_note"> Usage share statistics by <a class="external-link" href="http://gs.statcounter.com/">StatCounter GlobalStats</a> for January, 2025 </p> <p>Location detection provided by <a class="external-link" href="//ipinfo.io">ipinfo.io</a>. </p> <p> Browser testing done via <a class="external-link" href="https://www.browserstack.com?ref=caniuse-source&caniuse_source=brand-asset&utm_source=caniuse&utm_medium=partnered&utm_campaigncode=701OW000008y9C1YAI" target="_blank"> <img src="/img/browserstack.svg" alt="BrowserStack" width="140" height="28" loading="lazy"> </a> </p> </div> <div class="footer__section footer__patreon"> <h3 class="footer__heading">Support via Patreon</h3> <p>Become a caniuse Patron to support the site and disable ads for only $1/month!</p> <div class="patreon-button"> <a href="https://www.patreon.com/join/caniuse"> <img src="/img/become_a_patron_button.png" width="163" height="38" alt="Become a Patron!" loading="lazy"> </a> </div> <p> or <a class="external-link" href="http://www.patreon.com/oauth2/authorize?response_type=code&client_id=efdd32564c7459c2c0dcd644b984e6948070b23b72961a3b9fb32ab3ad797184&redirect_uri=https%3A%2F%2Fcaniuse.com">Log in</a> </p> </div> <div class="footer__section footer__links"> <h3 class="footer__heading">Site links</h3> <ol class="footer__list"> <li class="footer__list-item"> <a href="/">Home</a> </li> <li class="footer__list-item"> <a href="/ciu/index">Feature index</a> </li> <li class="footer__list-item"> <a href="/usage-table">Browser usage table</a> </li> <li class="footer__list-item"> <a href="/issue-list">Feature suggestion list</a> </li> <li class="footer__list-item"> <a href="https://github.com/fyrd/caniuse">Caniuse data on GitHub</a> </li> </ol> </div> <div class="footer__section footer__legend"> <section class="ciu-legend js-legend"> <h2 class="ciu-legend__header">Legend</h2> <ul class="ciu-legend__list"> <li class="ciu-legend__item"> <span class="y ciu-legend__color">Green</span> <span class="ciu-legend__symbol">✅</span> = Supported </li> <li class="ciu-legend__item"> <span class="n ciu-legend__color">Red</span> <span class="ciu-legend__symbol">❌</span> = Not supported </li> <li class="ciu-legend__item"> <span class="a ciu-legend__color">Greenish yellow</span> <span class="ciu-legend__symbol">◐</span> = Partial support </li> <li class="ciu-legend__item"> <span class="u ciu-legend__color">Gray</span> <span class="ciu-legend__symbol">﹖</span> = Support unknown </li> </ul> </section> </div> </footer> </div> </body> </html>