From 923ef223cdcd3a53b1cd594a1719bea769052fc3 Mon Sep 17 00:00:00 2001
From: Stanca Serban <sstanca@mozilla.com>
Date: Wed, 8 Mar 2023 17:34:42 +0200
Subject: [PATCH] Backed out changeset c25af897c9bc (bug 1820534) for causing
 reftests and mochitests failures.

---
 browser/base/content/aboutDialog.css          |   4 +-
 browser/base/content/browser-sidebar.js       |   8 +-
 .../base/content/browser-siteProtections.js   |   4 +-
 browser/base/content/browser.css              |  66 +++++------
 .../base/content/navigator-toolbox.inc.xhtml  |   2 +-
 browser/base/content/pageinfo/pageInfo.css    |   6 +-
 browser/base/content/pageinfo/pageInfo.xhtml  |  14 +--
 .../content/test/forms/browser_selectpopup.js |   2 +-
 .../test/sidebar/browser_sidebar_move.js      |   2 +-
 .../content/usercontext.css                   |   2 +-
 .../content/editBookmarkPanel.inc.xhtml       |   4 +-
 .../components/places/content/places.xhtml    |  22 ++--
 .../tests/chrome/test_0_bug510634.xhtml       |   2 +-
 ...1163447_selectItems_through_shortcut.xhtml |   2 +-
 .../places/tests/chrome/test_bug549192.xhtml  |   2 +-
 .../places/tests/chrome/test_bug549491.xhtml  |   2 +-
 .../test_selectItems_on_nested_tree.xhtml     |   2 +-
 .../tests/chrome/test_treeview_date.xhtml     |   2 +-
 .../preferences/dialogs/addEngine.css         |   2 +-
 .../preferences/dialogs/blocklists.xhtml      |   4 +-
 .../preferences/dialogs/connection.xhtml      |  10 +-
 .../preferences/dialogs/handlers.css          |   2 +-
 .../preferences/dialogs/permissions.js        |   6 +-
 .../preferences/dialogs/permissions.xhtml     |   6 +-
 .../preferences/dialogs/siteDataSettings.js   |   2 +-
 .../dialogs/siteDataSettings.xhtml            |   8 +-
 .../preferences/dialogs/sitePermissions.css   |   2 +-
 .../preferences/dialogs/sitePermissions.js    |   6 +-
 .../preferences/dialogs/sitePermissions.xhtml |   4 +-
 .../preferences/experimental.inc.xhtml        |   2 +-
 browser/components/preferences/home.inc.xhtml |   4 +-
 .../formautofill/skin/windows/editDialog.css  |   2 +-
 browser/themes/linux/browser.css              |  14 +--
 browser/themes/linux/places/organizer.css     |   2 +-
 .../themes/linux/preferences/applications.css |   2 +-
 browser/themes/osx/browser.css                |  10 +-
 browser/themes/osx/pageInfo.css               |   8 +-
 .../themes/osx/preferences/applications.css   |   2 +-
 browser/themes/shared/UITour.css              |   6 +-
 .../shared/addons/unified-extensions.css      |   2 +-
 browser/themes/shared/browser-shared.css      |   4 +-
 browser/themes/shared/contextmenu.css         |   6 +-
 browser/themes/shared/controlcenter/panel.css |   6 +-
 browser/themes/shared/ctrlTab.css             |   6 +-
 .../shared/customizableui/customizeMode.css   |   6 +-
 .../shared/customizableui/panelUI-shared.css  |  54 ++++-----
 .../shared/downloads/allDownloadsView.inc.css |   2 +-
 .../downloads/download-blockedStates.css      |   2 +-
 .../themes/shared/downloads/progressmeter.css |   2 +-
 .../shared/identity-block/identity-block.css  |   2 +-
 browser/themes/shared/notification-icons.css  |   4 +-
 browser/themes/shared/places/editBookmark.css |   4 +-
 .../themes/shared/places/organizer-shared.css |   2 +-
 browser/themes/shared/places/sidebar.css      |   2 +-
 .../shared/preferences/containers-dialog.css  |   4 +-
 .../themes/shared/preferences/containers.css  |   2 +-
 browser/themes/shared/preferences/dialog.css  |   2 +-
 .../themes/shared/preferences/preferences.css |  28 ++---
 browser/themes/shared/preferences/privacy.css |   2 +-
 browser/themes/shared/preferences/search.css  |   2 +-
 .../shared/preferences/siteDataSettings.css   |   4 +-
 browser/themes/shared/searchbar.css           |   8 +-
 browser/themes/shared/sidebar.css             |   8 +-
 browser/themes/shared/tabs.css                |   6 +-
 browser/themes/shared/toolbarbuttons.css      |   8 +-
 browser/themes/shared/urlbar-searchbar.css    |  18 +--
 .../themes/shared/webRTC-legacy-indicator.css |   6 +-
 browser/themes/windows/browser.css            |  10 +-
 .../windows/preferences/applications.css      |   2 +-
 .../sourceeditor/test/browser_css_getInfo.js  |   4 +-
 .../test/css_statemachine_testcases.css       |   4 +-
 devtools/client/shared/toolbarbutton.css      |   1 +
 .../client/styleeditor/StyleEditorUI.sys.mjs  |   4 +-
 devtools/client/themes/common.css             |   2 +-
 devtools/client/themes/splitview.css          |  22 ++--
 devtools/client/themes/storage.css            |   6 +-
 devtools/client/themes/styleeditor.css        |  36 +++---
 devtools/client/themes/toolbars.css           |   2 +-
 devtools/client/themes/toolbox.css            |  10 +-
 devtools/client/themes/tooltips.css           |   2 +-
 devtools/client/themes/widgets.css            |  18 +--
 .../dynamic-1-add-to-one-grouped.xhtml        |   2 +-
 .../dynamic-1-add-to-two-grouped-1.xhtml      |   4 +-
 .../dynamic-1-add-to-two-grouped-2.xhtml      |   4 +-
 .../dynamic-1-remove-to-none-grouped.xhtml    |   4 +-
 .../dynamic-1-remove-to-one-grouped-1.xhtml   |   6 +-
 .../dynamic-1-remove-to-one-grouped-2.xhtml   |   6 +-
 layout/style/crashtests/416461-1.xhtml        |   4 +-
 layout/style/res/ua.css                       |   1 +
 layout/xul/nsSplitterFrame.cpp                |   2 +-
 layout/xul/nsSprocketLayout.cpp               |   4 +-
 layout/xul/tree/nsTreeColumns.cpp             |   4 +-
 toolkit/components/alerts/alert.css           |   4 +-
 .../normandy/skin/shared/Heartbeat.css        |  10 +-
 .../components/prompts/content/tabprompts.css |   4 +-
 toolkit/content/autocomplete.css              |   2 +-
 .../content/tests/chrome/test_bug562554.xhtml |   2 +-
 .../content/tests/chrome/test_tree_hier.xhtml |   2 +-
 toolkit/content/tests/widgets/tree_shared.js  |   4 +-
 toolkit/content/widgets/tree.js               |  10 +-
 toolkit/content/widgets/wizard.js             |   2 +-
 toolkit/content/xul.css                       | 112 ++++++++----------
 toolkit/modules/FinderHighlighter.sys.mjs     |   2 +-
 toolkit/mozapps/preferences/changemp.xhtml    |   2 +-
 toolkit/themes/linux/global/menu.css          |   4 +-
 toolkit/themes/linux/global/menulist.css      |   4 +-
 toolkit/themes/linux/global/popup.css         |   5 +-
 toolkit/themes/linux/global/radio.css         |   2 +-
 toolkit/themes/linux/global/splitter.css      |   4 +-
 .../themes/linux/mozapps/update/updates.css   |   8 +-
 toolkit/themes/osx/global/menu.css            |   4 +-
 toolkit/themes/osx/global/menulist.css        |   4 +-
 toolkit/themes/osx/global/popup.css           |   5 +-
 toolkit/themes/osx/global/radio.css           |   2 +-
 toolkit/themes/osx/global/splitter.css        |   4 +-
 toolkit/themes/osx/global/tabbox.css          |   4 +-
 .../mozapps/downloads/unknownContentType.css  |   2 +-
 .../themes/osx/mozapps/handling/handling.css  |   2 +-
 toolkit/themes/osx/mozapps/update/updates.css |   8 +-
 toolkit/themes/shared/alert.css               |   6 +-
 toolkit/themes/shared/appPicker.css           |   2 +-
 toolkit/themes/shared/checkbox.css            |  10 +-
 toolkit/themes/shared/findbar.css             |   2 +-
 .../shared/in-content/common-shared.css       |  12 +-
 toolkit/themes/shared/menulist-shared.css     |   6 +-
 toolkit/themes/shared/popupnotification.css   |   5 +-
 toolkit/themes/shared/search-textbox.css      |   2 +-
 toolkit/themes/shared/tree.css                |   6 +-
 toolkit/themes/windows/global/menu.css        |   2 +-
 toolkit/themes/windows/global/menulist.css    |   4 +-
 toolkit/themes/windows/global/popup.css       |   5 +-
 toolkit/themes/windows/global/radio.css       |   2 +-
 toolkit/themes/windows/global/splitter.css    |   4 +-
 .../mozapps/downloads/unknownContentType.css  |   2 +-
 .../windows/mozapps/handling/handling.css     |   2 +-
 .../themes/windows/mozapps/update/updates.css |   8 +-
 136 files changed, 455 insertions(+), 461 deletions(-)

diff --git a/browser/base/content/aboutDialog.css b/browser/base/content/aboutDialog.css
index f5fc29059409..3ae663b32b32 100644
--- a/browser/base/content/aboutDialog.css
+++ b/browser/base/content/aboutDialog.css
@@ -11,7 +11,7 @@
 }
 
 #aboutDialogContainer {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #rightBox {
@@ -81,7 +81,7 @@
    * the dialog, so set the width to a reasonable size, but let it flex to take
    * all available space. */
   width: 430px;
-  flex: 1 auto;
+  -moz-box-flex: 1;
 }
 
 .update-throbber {
diff --git a/browser/base/content/browser-sidebar.js b/browser/base/content/browser-sidebar.js
index d2b36db203f6..22c886b09373 100644
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/base/content/browser-sidebar.js
@@ -284,7 +284,7 @@ var SidebarUI = {
     // First reset all ordinals to match DOM ordering.
     let browser = document.getElementById("browser");
     [...browser.children].forEach((node, i) => {
-      node.style.order = i + 1;
+      node.style.MozBoxOrdinalGroup = i + 1;
     });
 
     if (!this._positionStart) {
@@ -292,9 +292,9 @@ var SidebarUI = {
       // Want to display as:  |   appcontent  | splitter |  sidebar-box  |
       // So we just swap box and appcontent ordering
       let appcontent = document.getElementById("appcontent");
-      let boxOrdinal = this._box.style.order;
-      this._box.style.order = appcontent.style.order;
-      appcontent.style.order = boxOrdinal;
+      let boxOrdinal = this._box.style.MozBoxOrdinalGroup;
+      this._box.style.MozBoxOrdinalGroup = appcontent.style.MozBoxOrdinalGroup;
+      appcontent.style.MozBoxOrdinalGroup = boxOrdinal;
       // Indicate we've switched ordering to the box
       this._box.setAttribute("positionend", true);
     } else {
diff --git a/browser/base/content/browser-siteProtections.js b/browser/base/content/browser-siteProtections.js
index d3c760223d6d..121e9c9a24a7 100644
--- a/browser/base/content/browser-siteProtections.js
+++ b/browser/base/content/browser-siteProtections.js
@@ -235,8 +235,8 @@ class ProtectionCategory {
     }
 
     // Create an item to hold the origin label and shim allow indicator. Using
-    // an html element here, so we can use CSS flex, which handles the label
-    // overflow in combination with the icon correctly.
+    // an html element here, so we can use CSS flex rather than -moz-box, which
+    // handles the label overflow in combination with the icon correctly.
     let listItem = document.createElementNS(
       "http://www.w3.org/1999/xhtml",
       "div"
diff --git a/browser/base/content/browser.css b/browser/base/content/browser.css
index 3da3b1622d28..7fd504239770 100644
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -57,22 +57,22 @@ body {
  * it's on the side it's a sibling of browserContainer.
  */
 .browserContainer {
-  flex: 10000 10000;
+  -moz-box-flex: 10000;
   /* To contain the status panel */
   position: relative;
 }
 
 .browserStack {
-  flex: 10000 10000;
+  -moz-box-flex: 10000;
   /* Prevent shrinking the page content to 0 height and width */
   min-height: 25px;
   min-width: 25px;
 }
 
 body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
 }
 
 #navigator-toolbox:-moz-lwtheme {
@@ -145,7 +145,7 @@ body {
 }
 
 panelmultiview {
-  align-items: flex-start;
+  -moz-box-align: start;
   min-width: 0;
   min-height: 0;
 }
@@ -155,7 +155,7 @@ panelmultiview[transitioning] {
 }
 
 panelview {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 panelview:not([visible]) {
@@ -190,7 +190,7 @@ panelview:not([visible]) {
   }
   #tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
     /* temporary space to keep a tab's close button under the cursor */
-    display: flex;
+    display: -moz-box;
     visibility: hidden;
   }
 }
@@ -203,7 +203,7 @@ panelview:not([visible]) {
 }
 
 .tabbrowser-tab:not([pinned]) {
-  flex: 100 100;
+  -moz-box-flex: 100;
   max-width: 225px;
   min-width: var(--tab-min-width);
   width: 0;
@@ -307,7 +307,7 @@ toolbar[customizing] #whats-new-menu-button {
 
 :root:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
 #nav-bar[customizing] > .overflow-button {
-  display: flex;
+  display: -moz-box;
 }
 
 /* The ids are ugly, but this should be reasonably performant, and
@@ -385,23 +385,23 @@ toolbar[customizing] #whats-new-menu-button {
 
 toolbarpaletteitem {
   -moz-window-dragging: no-drag;
-  justify-content: flex-start;
+  -moz-box-pack: start;
 }
 
 .titlebar-buttonbox-container {
-  order: 1000;
+  -moz-box-ordinal-group: 1000;
 }
 
 @media (-moz-platform: macos) {
   @media not (-moz-mac-rtl) {
     .titlebar-buttonbox-container:-moz-locale-dir(ltr) {
-      order: -1;
+      -moz-box-ordinal-group: 0;
     }
   }
 
   @media (-moz-mac-rtl) {
     .titlebar-buttonbox-container:-moz-locale-dir(rtl) {
-      order: -1;
+      -moz-box-ordinal-group: 0;
     }
   }
 }
@@ -513,7 +513,7 @@ toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
 toolbarpaletteitem[place="toolbar"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-button,
 #personal-bookmarks:is([overflowedItem=true], [cui-areatype="panel"]) > #bookmarks-toolbar-button {
-  display: flex;
+  display: -moz-box;
 }
 
 #personal-bookmarks {
@@ -549,11 +549,11 @@ toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-b
 #nav-bar-customization-target > #personal-bookmarks,
 toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
 toolbar:not(#TabsToolbar) > #personal-bookmarks {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
-  display: flex;
+  display: -moz-box;
 }
 
 #reload-button:not([displaystop]) + #stop-button,
@@ -571,7 +571,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 
 /* Ensure stop-button and reload-button are displayed correctly when in the overflow menu */
 .widget-overflow-list > #stop-reload-button > .toolbarbutton-1 {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 @media (-moz-platform: macos) {
@@ -708,7 +708,7 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 }
 
 #PopupAutoComplete > richlistbox > richlistitem[originaltype="loginsFooter"] {
-  justify-content: center;
+  -moz-box-pack: center;
   color: FieldText;
   min-height: 2.6666em;
   border-top: 1px solid rgba(38,38,38,.15);
@@ -863,14 +863,14 @@ toolbar:not(#TabsToolbar) > #personal-bookmarks {
 /* Flexible spacer sizing (gets overridden in the navbar) */
 toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
 toolbarspring {
-  flex: 1;
+  -moz-box-flex: 1;
   min-width: 28px;
   max-width: 112px;
 }
 
 #nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring],
 #nav-bar toolbarspring {
-  flex: 80 80;
+  -moz-box-flex: 80;
   /* We shrink the flexible spacers, but not to nothing so they can be
    * manipulated in customize mode; the next rule shrinks them further
    * outside customize mode. */
@@ -1076,7 +1076,7 @@ browser[tabmodalPromptShowing], browser[tabDialogShowing] {
 }
 
 toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
-  display: flex;
+  display: -moz-box;
 }
 
 toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-stack > #downloads-indicator-anchor {
@@ -1170,7 +1170,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-s
 }
 
 #customization-container {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
   flex-direction: column;
   min-height: 0;
 }
@@ -1216,7 +1216,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button > .toolbarbutton-badge-s
 
 #customization-panelWrapper,
 #customization-panelWrapper > .panel-arrowcontent {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #customization-panel-container {
@@ -1233,7 +1233,7 @@ toolbarpaletteitem[dragover] {
 #customization-palette-container {
   display: flex;
   flex-direction: column;
-  flex: 1;
+  flex-grow: 1;
 }
 
 #customization-palette:not([hidden]) {
@@ -1256,16 +1256,16 @@ toolbarpaletteitem[dragover] {
 }
 
 #customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
-  display: flex;
+  display: -moz-box;
 }
 
 #customization-lwtheme-button > .box-inherit > .button-menu-dropmarker,
 #customization-uidensity-button > .box-inherit > .button-menu-dropmarker {
-  display: flex;
+  display: -moz-box;
 }
 
 toolbarpaletteitem[place="palette"] {
-  flex-direction: column;
+  -moz-box-orient: vertical;
   width: 7em;
   max-width: 7em;
   /* icon (16) + margin (9 + 12) + 3 lines of text: */
@@ -1273,7 +1273,7 @@ toolbarpaletteitem[place="palette"] {
   margin-bottom: 5px;
   margin-inline-end: 24px;
   overflow: visible;
-  display: inline-flex;
+  display: -moz-inline-box;
   vertical-align: top;
 }
 
@@ -1285,11 +1285,11 @@ toolbarpaletteitem > toolbarbutton,
 toolbarpaletteitem > toolbaritem {
   /* Prevent children from getting events */
   pointer-events: none;
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 toolbarpaletteitem:not([place="palette"]) > #stop-reload-button {
-  justify-content: inherit;
+  -moz-box-pack: inherit;
 }
 
 :root[customizing=true] .addon-banner-item,
@@ -1541,7 +1541,7 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
 
 .dialogBox {
   background-clip: content-box;
-  display: flex;
+  display: -moz-box;
   margin: 0 3vw;
   padding: 0;
   overflow-x: auto;
@@ -1667,7 +1667,7 @@ toolbar[keyNav=true]:not([collapsed=true], [customizing=true]) toolbartabstop {
 
 .dialogFrame {
   margin: 0;
-  flex: 1;
+  -moz-box-flex: 1;
   /* Default dialog dimensions */
   width: 34em;
 }
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 04d4b190f5c9..ff8bb7b4a331 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -22,7 +22,7 @@
 # shared with other top level windows in macWindow.inc.xhtml.
 #include browser-menubar.inc
       </toolbaritem>
-      <spacer flex="1" skipintoolbarset="true" style="order: 1000;"/>
+      <spacer flex="1" skipintoolbarset="true" style="-moz-box-ordinal-group: 1000;"/>
 #include titlebar-items.inc.xhtml
     </toolbar>
 
diff --git a/browser/base/content/pageinfo/pageInfo.css b/browser/base/content/pageinfo/pageInfo.css
index 8cf4fc9e9db2..53bc863cef2c 100644
--- a/browser/base/content/pageinfo/pageInfo.css
+++ b/browser/base/content/pageinfo/pageInfo.css
@@ -21,8 +21,8 @@
 }
 
 #viewGroup > radio > .radio-label-box {
-  flex-direction: column;
-  align-items: center;
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
 }
 
 /* Hide the radio button for the section headers */
@@ -82,6 +82,6 @@ td > input,
 }
 
 #hostText {
-  flex: 1;
+  -moz-box-flex: 1;
   margin-top: 1px; /* same margin as adjacent label */
 }
diff --git a/browser/base/content/pageinfo/pageInfo.xhtml b/browser/base/content/pageinfo/pageInfo.xhtml
index bcb4254193f4..a1ab77fa6229 100644
--- a/browser/base/content/pageinfo/pageInfo.xhtml
+++ b/browser/base/content/pageinfo/pageInfo.xhtml
@@ -152,11 +152,11 @@
         <tree id="metatree" flex="1" hidecolumnpicker="true" contextmenu="picontext">
           <treecols>
             <treecol id="meta-name"    data-l10n-id="general-meta-name"
-                     persist="width" style="flex: 1 1;"
+                     persist="width" style="-moz-box-flex: 1"
                      onclick="gMetaView.onPageMediaSort('meta-name');"/>
             <splitter class="tree-splitter"/>
             <treecol id="meta-content" data-l10n-id="general-meta-content"
-                     persist="width" style="flex: 4 4"
+                     persist="width" style="-moz-box-flex: 4"
                      onclick="gMetaView.onPageMediaSort('meta-content');"/>
           </treecols>
           <treechildren id="metatreechildren" flex="1"/>
@@ -172,23 +172,23 @@
       <tree id="imagetree" onselect="onImageSelect();" contextmenu="picontext"
             ondragstart="onBeginLinkDrag(event, 'image-address', 'image-alt')">
         <treecols>
-          <treecol primary="true" persist="width" style="flex: 10 10"
+          <treecol primary="true" persist="width" style="-moz-box-flex: 10"
                         width="10" id="image-address" data-l10n-id="media-address"
                         onclick="gImageView.onPageMediaSort('image-address');"/>
           <splitter class="tree-splitter"/>
-          <treecol persist="hidden width" style="flex: 2 2"
+          <treecol persist="hidden width" style="-moz-box-flex: 2"
                         width="2"  id="image-type"    data-l10n-id="media-type"
                         onclick="gImageView.onPageMediaSort('image-type');"/>
           <splitter class="tree-splitter"/>
-          <treecol hidden="true" persist="hidden width" style="flex: 2 2"
+          <treecol hidden="true" persist="hidden width" style="-moz-box-flex: 2"
                         width="2"  id="image-size"  data-l10n-id="media-size" value="size"
                         onclick="gImageView.onPageMediaSort('image-size');"/>
           <splitter class="tree-splitter"/>
-          <treecol hidden="true" persist="hidden width" style="flex: 4 4"
+          <treecol hidden="true" persist="hidden width" style="-moz-box-flex: 4"
                         width="4"  id="image-alt" data-l10n-id="media-alt-header"
                         onclick="gImageView.onPageMediaSort('image-alt');"/>
           <splitter class="tree-splitter"/>
-          <treecol hidden="true" persist="hidden width" style="flex: 1 1"
+          <treecol hidden="true" persist="hidden width" style="-moz-box-flex: 1"
                         width="1"  id="image-count"    data-l10n-id="media-count"
                         onclick="gImageView.onPageMediaSort('image-count');"/>
         </treecols>
diff --git a/browser/base/content/test/forms/browser_selectpopup.js b/browser/base/content/test/forms/browser_selectpopup.js
index 613caa05dd29..a1c74075b9da 100644
--- a/browser/base/content/test/forms/browser_selectpopup.js
+++ b/browser/base/content/test/forms/browser_selectpopup.js
@@ -739,7 +739,7 @@ add_task(async function test_somehidden() {
   while (child) {
     is(
       getComputedStyle(child).display,
-      child.label.indexOf("Visible") > 0 ? "flex" : "none",
+      child.label.indexOf("Visible") > 0 ? "-moz-box" : "none",
       "Item " + idx++ + " is visible"
     );
     child = child.nextElementSibling;
diff --git a/browser/base/content/test/sidebar/browser_sidebar_move.js b/browser/base/content/test/sidebar/browser_sidebar_move.js
index eb517db3cce4..49d705895b7f 100644
--- a/browser/base/content/test/sidebar/browser_sidebar_move.js
+++ b/browser/base/content/test/sidebar/browser_sidebar_move.js
@@ -18,7 +18,7 @@ const EXPECTED_END_ORDINALS = [
 function getBrowserChildrenWithOrdinals() {
   let browser = document.getElementById("browser");
   return [...browser.children].map(node => {
-    return [node.id, node.style.order];
+    return [node.id, node.style.MozBoxOrdinalGroup];
   });
 }
 
diff --git a/browser/components/contextualidentity/content/usercontext.css b/browser/components/contextualidentity/content/usercontext.css
index f12625c08f26..53f7b8ebbadf 100644
--- a/browser/components/contextualidentity/content/usercontext.css
+++ b/browser/components/contextualidentity/content/usercontext.css
@@ -111,7 +111,7 @@
 }
 
 #userContext-icons {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
diff --git a/browser/components/places/content/editBookmarkPanel.inc.xhtml b/browser/components/places/content/editBookmarkPanel.inc.xhtml
index b896ae8ff607..3e7e2c364640 100644
--- a/browser/components/places/content/editBookmarkPanel.inc.xhtml
+++ b/browser/components/places/content/editBookmarkPanel.inc.xhtml
@@ -71,7 +71,7 @@
     <html:input id="editBMPanel_tagsField"
                 type="text"
                 is="autocomplete-input"
-                style="flex: 1;"
+                style="-moz-box-flex: 1;"
                 autocompletesearch="places-tag-autocomplete"
                 autocompletepopup="editBMPanel_tagsAutocomplete"
                 completedefaultindex="true"
@@ -107,7 +107,7 @@
        class="hideable"
        hidden="true">
     <richlistbox id="editBMPanel_tagsSelector"
-                 style="flex: 1;"
+                 style="-moz-box-flex: 1"
                  styled="true"/>
   </div>
 
diff --git a/browser/components/places/content/places.xhtml b/browser/components/places/content/places.xhtml
index d02e3892545c..c5cbfa7dcf1d 100644
--- a/browser/components/places/content/places.xhtml
+++ b/browser/components/places/content/places.xhtml
@@ -360,31 +360,31 @@
             <!--
               The below code may suggest that 'ordinal' is still a supported XUL
               attribute. It is not. This is a crutch so that we can continue
-              persisting the CSS order attribute, which is the appropriate
-              replacement for the ordinal attribute but cannot yet
+              persisting the CSS -moz-box-ordinal-group attribute, which is the
+              appropriate replacement for the ordinal attribute but cannot yet
               be easily persisted. The code that synchronizes the attribute with
               the CSS lives in toolkit/content/widget/tree.js and is specific to
               tree elements.
             -->
-            <treecol data-l10n-id="places-view-sort-col-name" id="placesContentTitle" anonid="title" style="flex: 5 5" primary="true" ordinal="1"
+            <treecol data-l10n-id="places-view-sort-col-name" id="placesContentTitle" anonid="title" style="-moz-box-flex: 5" primary="true" ordinal="1"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-tags" id="placesContentTags" anonid="tags" style="flex: 2 2"
+            <treecol data-l10n-id="places-view-sort-col-tags" id="placesContentTags" anonid="tags" style="-moz-box-flex: 2"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-url" id="placesContentUrl" anonid="url" style="flex: 5 5"
+            <treecol data-l10n-id="places-view-sort-col-url" id="placesContentUrl" anonid="url" style="-moz-box-flex: 5"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-most-recent-visit" id="placesContentDate" anonid="date" style="flex: 1" hidden="true"
+            <treecol data-l10n-id="places-view-sort-col-most-recent-visit" id="placesContentDate" anonid="date" style="-moz-box-flex: 1" hidden="true"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-visit-count" id="placesContentVisitCount" anonid="visitCount" style="flex: 1" hidden="true"
+            <treecol data-l10n-id="places-view-sort-col-visit-count" id="placesContentVisitCount" anonid="visitCount" style="-moz-box-flex: 1" hidden="true"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-date-added" id="placesContentDateAdded" anonid="dateAdded" style="flex: 1" hidden="true"
+            <treecol data-l10n-id="places-view-sort-col-date-added" id="placesContentDateAdded" anonid="dateAdded" style="-moz-box-flex: 1" hidden="true"
                       persist="width hidden ordinal sortActive sortDirection"/>
             <splitter class="tree-splitter"/>
-            <treecol data-l10n-id="places-view-sort-col-last-modified" id="placesContentLastModified" anonid="lastModified" style="flex: 1" hidden="true"
+            <treecol data-l10n-id="places-view-sort-col-last-modified" id="placesContentLastModified" anonid="lastModified" style="-moz-box-flex: 1" hidden="true"
                       persist="width hidden ordinal sortActive sortDirection"/>
           </treecols>
           <treechildren flex="1" onclick="ContentTree.onClick(event);"/>
@@ -398,12 +398,12 @@
       </vbox>
       <vbox id="detailsPane">
         <vbox id="itemsCountBox" align="center" flex="1" hidden="true">
-          <spacer style="flex: 3 3"/>
+          <spacer style="-moz-box-flex: 3"/>
           <label id="itemsCountText"/>
           <spacer flex="1"/>
           <description id="selectItemDescription" data-l10n-id="places-details-pane-select-an-item-description">
           </description>
-          <spacer style="flex: 3 3"/>
+          <spacer style="-moz-box-flex: 3"/>
         </vbox>
         <vbox id="infoBox">
 #include editBookmarkPanel.inc.xhtml
diff --git a/browser/components/places/tests/chrome/test_0_bug510634.xhtml b/browser/components/places/tests/chrome/test_0_bug510634.xhtml
index 8cac56ff7cd8..9f75047b79c9 100644
--- a/browser/components/places/tests/chrome/test_0_bug510634.xhtml
+++ b/browser/components/places/tests/chrome/test_0_bug510634.xhtml
@@ -26,7 +26,7 @@
         is="places-tree"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
     </treecols>
     <treechildren flex="1"/>
   </tree>
diff --git a/browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml b/browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml
index 03f5d92572e3..f945c7e1695e 100644
--- a/browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml
+++ b/browser/components/places/tests/chrome/test_bug1163447_selectItems_through_shortcut.xhtml
@@ -27,7 +27,7 @@
         is="places-tree"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
     </treecols>
     <treechildren flex="1"/>
   </tree>
diff --git a/browser/components/places/tests/chrome/test_bug549192.xhtml b/browser/components/places/tests/chrome/test_bug549192.xhtml
index 9f00e8b9c57f..6dd99f1a5931 100644
--- a/browser/components/places/tests/chrome/test_bug549192.xhtml
+++ b/browser/components/places/tests/chrome/test_bug549192.xhtml
@@ -28,7 +28,7 @@
         flatList="true"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
     </treecols>
     <treechildren flex="1"/>
   </tree>
diff --git a/browser/components/places/tests/chrome/test_bug549491.xhtml b/browser/components/places/tests/chrome/test_bug549491.xhtml
index 03fee4cc0674..80ca8c11f755 100644
--- a/browser/components/places/tests/chrome/test_bug549491.xhtml
+++ b/browser/components/places/tests/chrome/test_bug549491.xhtml
@@ -28,7 +28,7 @@
         flatList="true"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol label="Date" anonid="date" flex="1"/>
     </treecols>
diff --git a/browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml b/browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml
index 6dc2d3304182..724f46b6f396 100644
--- a/browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml
+++ b/browser/components/places/tests/chrome/test_selectItems_on_nested_tree.xhtml
@@ -27,7 +27,7 @@
         is="places-tree"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
     </treecols>
     <treechildren flex="1"/>
   </tree>
diff --git a/browser/components/places/tests/chrome/test_treeview_date.xhtml b/browser/components/places/tests/chrome/test_treeview_date.xhtml
index 8a7853194da4..075383cd66dd 100644
--- a/browser/components/places/tests/chrome/test_treeview_date.xhtml
+++ b/browser/components/places/tests/chrome/test_treeview_date.xhtml
@@ -27,7 +27,7 @@
         flatList="true"
         flex="1">
     <treecols>
-      <treecol label="Title" id="title" anonid="title" primary="true" style="order: 1;" flex="1"/>
+      <treecol label="Title" id="title" anonid="title" primary="true" style="-moz-box-ordinal-group: 1;" flex="1"/>
       <splitter class="tree-splitter"/>
       <treecol label="Tags" id="tags" anonid="tags" flex="1"/>
       <splitter class="tree-splitter"/>
diff --git a/browser/components/preferences/dialogs/addEngine.css b/browser/components/preferences/dialogs/addEngine.css
index 450e07f65f88..8d5f5bfe3ecf 100644
--- a/browser/components/preferences/dialogs/addEngine.css
+++ b/browser/components/preferences/dialogs/addEngine.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 input {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 hbox {
diff --git a/browser/components/preferences/dialogs/blocklists.xhtml b/browser/components/preferences/dialogs/blocklists.xhtml
index 9e551def4cb2..1612f8f1a6b0 100644
--- a/browser/components/preferences/dialogs/blocklists.xhtml
+++ b/browser/components/preferences/dialogs/blocklists.xhtml
@@ -41,9 +41,9 @@
           hidecolumnpicker="true"
           onselect="gBlocklistManager.onListSelected();">
       <treecols>
-        <treecol id="selectionCol" label="" style="flex: 1" sortable="false"
+        <treecol id="selectionCol" label="" style="-moz-box-flex: 1" sortable="false"
                  type="checkbox"/>
-        <treecol id="listCol" data-l10n-id="blocklist-treehead-list" style="flex: 80 80"
+        <treecol id="listCol" data-l10n-id="blocklist-treehead-list" style="-moz-box-flex: 80"
                  sortable="false"/>
       </treecols>
       <treechildren/>
diff --git a/browser/components/preferences/dialogs/connection.xhtml b/browser/components/preferences/dialogs/connection.xhtml
index 0b27ed4e9199..ffd32595378e 100644
--- a/browser/components/preferences/dialogs/connection.xhtml
+++ b/browser/components/preferences/dialogs/connection.xhtml
@@ -57,7 +57,7 @@
             <label data-l10n-id="connection-proxy-http" control="networkProxyHTTP" />
           </hbox>
           <hbox align="center">
-            <html:input id="networkProxyHTTP" type="text" style="flex: 1;"
+            <html:input id="networkProxyHTTP" type="text" style="-moz-box-flex: 1;"
                         preference="network.proxy.http"/>
             <label data-l10n-id="connection-proxy-http-port" control="networkProxyHTTP_Port" />
             <html:input id="networkProxyHTTP_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535"
@@ -76,7 +76,7 @@
             <label data-l10n-id="connection-proxy-https" control="networkProxySSL"/>
           </hbox>
           <hbox align="center">
-            <html:input id="networkProxySSL" type="text" style="flex: 1;" preference="network.proxy.ssl"/>
+            <html:input id="networkProxySSL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.ssl"/>
             <label data-l10n-id="connection-proxy-ssl-port" control="networkProxySSL_Port" />
             <html:input id="networkProxySSL_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
                         preference="network.proxy.ssl_port"/>
@@ -88,7 +88,7 @@
             <label data-l10n-id="connection-proxy-socks" control="networkProxySOCKS"/>
           </hbox>
           <hbox align="center">
-            <html:input id="networkProxySOCKS" type="text" style="flex: 1;" preference="network.proxy.socks"/>
+            <html:input id="networkProxySOCKS" type="text" style="-moz-box-flex: 1;" preference="network.proxy.socks"/>
             <label data-l10n-id="connection-proxy-socks-port" control="networkProxySOCKS_Port"/>
             <html:input id="networkProxySOCKS_Port" class="proxy-port-input" hidespinbuttons="true" type="number" min="0" max="65535" size="5"
                         preference="network.proxy.socks_port"/>
@@ -107,7 +107,7 @@
       </box>
       <radio value="2" data-l10n-id="connection-proxy-autotype" />
       <hbox class="indent" flex="1" align="center">
-        <html:input id="networkProxyAutoconfigURL" type="text" style="flex: 1;" preference="network.proxy.autoconfig_url"
+        <html:input id="networkProxyAutoconfigURL" type="text" style="-moz-box-flex: 1;" preference="network.proxy.autoconfig_url"
                     oninput="gConnectionsDialog.updateReloadButton();"/>
         <button id="autoReload"
                 data-l10n-id="connection-proxy-reload"
@@ -150,7 +150,7 @@
                 data-l10n-id="connection-dns-over-https-custom-label"
                 control="networkCustomDnsOverHttpsInput"/>
         </hbox>
-        <html:input id="networkCustomDnsOverHttpsInput" type="text" style="flex: 1;"
+        <html:input id="networkCustomDnsOverHttpsInput" type="text" style="-moz-box-flex: 1;"
                     preference="network.trr.custom_uri"/>
       </html:div>
     </box>
diff --git a/browser/components/preferences/dialogs/handlers.css b/browser/components/preferences/dialogs/handlers.css
index b53963fa4dc9..8f7becd81dbb 100644
--- a/browser/components/preferences/dialogs/handlers.css
+++ b/browser/components/preferences/dialogs/handlers.css
@@ -8,7 +8,7 @@
  * so the labels of all the items align vertically.
  */
 .actionsMenu > menupopup > menuitem > .menu-iconic-left {
-  display: flex;
+  display: -moz-box;
   min-width: 16px;
 }
 
diff --git a/browser/components/preferences/dialogs/permissions.js b/browser/components/preferences/dialogs/permissions.js
index 3ca266461194..1d43f6f81064 100644
--- a/browser/components/preferences/dialogs/permissions.js
+++ b/browser/components/preferences/dialogs/permissions.js
@@ -378,7 +378,7 @@ var gPermissionManager = {
     let richlistitem = document.createXULElement("richlistitem");
     richlistitem.setAttribute("origin", permission.origin);
     let row = document.createXULElement("hbox");
-    row.setAttribute("style", "flex: 1");
+    row.setAttribute("style", "-moz-box-flex: 1");
 
     let hbox = document.createXULElement("hbox");
     let website = document.createXULElement("label");
@@ -386,7 +386,7 @@ var gPermissionManager = {
     website.setAttribute("class", "website-name-value");
     website.setAttribute("value", permission.origin);
     hbox.setAttribute("class", "website-name");
-    hbox.setAttribute("style", "flex: 3 3; width: 0");
+    hbox.setAttribute("style", "-moz-box-flex: 3; width: 0");
     hbox.appendChild(website);
     row.appendChild(hbox);
 
@@ -400,7 +400,7 @@ var gPermissionManager = {
         this._getCapabilityL10nId(permission.capability)
       );
       hbox.setAttribute("class", "website-name");
-      hbox.setAttribute("style", "flex: 1; width: 0");
+      hbox.setAttribute("style", "-moz-box-flex: 1; width: 0");
       hbox.appendChild(capability);
       row.appendChild(hbox);
     }
diff --git a/browser/components/preferences/dialogs/permissions.xhtml b/browser/components/preferences/dialogs/permissions.xhtml
index 1b4600cfe2d1..7518b93fdb43 100644
--- a/browser/components/preferences/dialogs/permissions.xhtml
+++ b/browser/components/preferences/dialogs/permissions.xhtml
@@ -40,7 +40,7 @@
     <label id="urlLabel" control="url" data-l10n-id="permissions-address"/>
     <hbox align="start">
       <html:input id="url" type="text"
-                  style="flex: 1;"
+                  style="-moz-box-flex: 1;"
                   oninput="gPermissionManager.onHostInput(event.target);"
                   onkeypress="gPermissionManager.onHostKeyPress(event);"/>
     </hbox>
@@ -60,9 +60,9 @@
     </hbox>
     <separator class="thin"/>
     <listheader>
-      <treecol id="siteCol" data-l10n-id="permissions-site-name" style="flex: 3 3; width: 0"
+      <treecol id="siteCol" data-l10n-id="permissions-site-name" style="-moz-box-flex: 3; width: 0"
                onclick="gPermissionManager.buildPermissionsList(event.target)"/>
-      <treecol id="statusCol" data-l10n-id="permissions-status" style="flex: 1; width: 0"
+      <treecol id="statusCol" data-l10n-id="permissions-status" style="-moz-box-flex: 1; width: 0"
                data-isCurrentSortCol="true"
                onclick="gPermissionManager.buildPermissionsList(event.target);"/>
     </listheader>
diff --git a/browser/components/preferences/dialogs/siteDataSettings.js b/browser/components/preferences/dialogs/siteDataSettings.js
index 5dc4abfbcfbf..f725b19243bf 100644
--- a/browser/components/preferences/dialogs/siteDataSettings.js
+++ b/browser/components/preferences/dialogs/siteDataSettings.js
@@ -41,7 +41,7 @@ let gSiteDataSettings = {
     function addColumnItem(l10n, flexWidth, tooltipText) {
       let box = document.createXULElement("hbox");
       box.className = "item-box";
-      box.setAttribute("style", `flex: ${flexWidth} ${flexWidth};`);
+      box.setAttribute("style", `-moz-box-flex: ${flexWidth}`);
       let label = document.createXULElement("label");
       label.setAttribute("crop", "end");
       if (l10n) {
diff --git a/browser/components/preferences/dialogs/siteDataSettings.xhtml b/browser/components/preferences/dialogs/siteDataSettings.xhtml
index dd5108f1f0b1..65d0db5b316f 100644
--- a/browser/components/preferences/dialogs/siteDataSettings.xhtml
+++ b/browser/components/preferences/dialogs/siteDataSettings.xhtml
@@ -42,11 +42,11 @@
     <separator class="thin"/>
 
     <listheader>
-      <treecol style="flex: 4 4; width: 50px" data-l10n-id="site-data-column-host" id="hostCol"/>
-      <treecol style="flex: 1; width: 50px" data-l10n-id="site-data-column-cookies" id="cookiesCol"/>
+      <treecol style="-moz-box-flex: 4; width: 50px" data-l10n-id="site-data-column-host" id="hostCol"/>
+      <treecol style="-moz-box-flex: 1; width: 50px" data-l10n-id="site-data-column-cookies" id="cookiesCol"/>
       <!-- Sorted by usage so the user can quickly see which sites use the most data. -->
-      <treecol style="flex: 2 2; width: 50px" data-l10n-id="site-data-column-storage" id="usageCol" data-isCurrentSortCol="true"/>
-      <treecol style="flex: 2 2; width: 50px" data-l10n-id="site-data-column-last-used" id="lastAccessedCol" />
+      <treecol style="-moz-box-flex: 2; width: 50px" data-l10n-id="site-data-column-storage" id="usageCol" data-isCurrentSortCol="true"/>
+      <treecol style="-moz-box-flex: 2; width: 50px" data-l10n-id="site-data-column-last-used" id="lastAccessedCol" />
     </listheader>
     <richlistbox seltype="multiple" id="sitesList" orient="vertical" flex="1"/>
   </vbox>
diff --git a/browser/components/preferences/dialogs/sitePermissions.css b/browser/components/preferences/dialogs/sitePermissions.css
index a5eabe7cabcb..2bfd502c0d3d 100644
--- a/browser/components/preferences/dialogs/sitePermissions.css
+++ b/browser/components/preferences/dialogs/sitePermissions.css
@@ -5,7 +5,7 @@
 .website-name {
   overflow: hidden; /* Allows equal sizing combined with width="0" */
   padding-inline-start: 7px;
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #permissionsBox {
diff --git a/browser/components/preferences/dialogs/sitePermissions.js b/browser/components/preferences/dialogs/sitePermissions.js
index 9884bee2e09c..d6c6bff96328 100644
--- a/browser/components/preferences/dialogs/sitePermissions.js
+++ b/browser/components/preferences/dialogs/sitePermissions.js
@@ -353,7 +353,7 @@ var gSitePermissionsManager = {
     let richlistitem = document.createXULElement("richlistitem");
     richlistitem.setAttribute("origin", permission.origin);
     let row = document.createXULElement("hbox");
-    row.setAttribute("style", "flex: 1");
+    row.setAttribute("style", "-moz-box-flex: 1");
 
     let hbox = document.createXULElement("hbox");
     let website = document.createXULElement("label");
@@ -361,11 +361,11 @@ var gSitePermissionsManager = {
     // TODO(bug 1802993): Seems this could be on the hbox instead or something?
     website.setAttribute("style", `width: ${width}`);
     hbox.setAttribute("class", "website-name");
-    hbox.setAttribute("style", `flex: 3 3`);
+    hbox.setAttribute("style", `-moz-box-flex: 3`);
     hbox.appendChild(website);
 
     let menulist = document.createXULElement("menulist");
-    menulist.setAttribute("style", `flex: 1; width: ${width}`);
+    menulist.setAttribute("style", `-moz-box-flex: 1; width: ${width}`);
     menulist.setAttribute("class", "website-status");
     let states = SitePermissions.getAvailableStates(permission.type);
     for (let state of states) {
diff --git a/browser/components/preferences/dialogs/sitePermissions.xhtml b/browser/components/preferences/dialogs/sitePermissions.xhtml
index dfb49cef4457..0f50fae9a2f8 100644
--- a/browser/components/preferences/dialogs/sitePermissions.xhtml
+++ b/browser/components/preferences/dialogs/sitePermissions.xhtml
@@ -49,9 +49,9 @@
     </hbox>
     <separator class="thin"/>
     <listheader>
-      <treecol id="siteCol" data-l10n-id="permissions-site-name" style="flex: 3 3; width: 75px"
+      <treecol id="siteCol" data-l10n-id="permissions-site-name" style="-moz-box-flex: 3; width: 75px"
                onclick="gSitePermissionsManager.buildPermissionsList(event.target)"/>
-      <treecol id="statusCol" data-l10n-id="permissions-status" style="flex: 1; width: 75px"
+      <treecol id="statusCol" data-l10n-id="permissions-status" style="-moz-box-flex: 1; width: 75px"
                data-isCurrentSortCol="true"
                onclick="gSitePermissionsManager.buildPermissionsList(event.target);"/>
     </listheader>
diff --git a/browser/components/preferences/experimental.inc.xhtml b/browser/components/preferences/experimental.inc.xhtml
index 67ba010102c2..3458518cf1f6 100644
--- a/browser/components/preferences/experimental.inc.xhtml
+++ b/browser/components/preferences/experimental.inc.xhtml
@@ -10,7 +10,7 @@
       class="subcategory"
       hidden="true"
       data-category="paneExperimental">
-  <html:h1 style="flex: 1;" data-l10n-id="pane-experimental-title"/>
+  <html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-experimental-title"/>
   <label><html:h2 id="pane-experimental-subtitle" data-l10n-id="pane-experimental-subtitle"/></label>
   <hbox pack="end">
     <button id="experimentalCategory-reset"
diff --git a/browser/components/preferences/home.inc.xhtml b/browser/components/preferences/home.inc.xhtml
index 7385b614b0f1..f72b11280aea 100644
--- a/browser/components/preferences/home.inc.xhtml
+++ b/browser/components/preferences/home.inc.xhtml
@@ -10,7 +10,7 @@
       class="subcategory"
       hidden="true"
       data-category="paneHome">
-  <html:h1 style="flex: 1;" data-l10n-id="pane-home-title"/>
+  <html:h1 style="-moz-box-flex: 1;" data-l10n-id="pane-home-title"/>
   <button id="restoreDefaultHomePageBtn"
           is="highlightable-button"
           class="homepage-button check-home-page-controlled"
@@ -45,7 +45,7 @@
                       type="text"
                       is="autocomplete-input"
                       class="uri-element check-home-page-controlled"
-                      style="flex: 1;"
+                      style="-moz-box-flex: 1;"
                       data-preference-related="browser.startup.homepage"
                       data-l10n-id="home-homepage-custom-url"
                       autocompletepopup="homePageUrlAutocomplete" />
diff --git a/browser/extensions/formautofill/skin/windows/editDialog.css b/browser/extensions/formautofill/skin/windows/editDialog.css
index 334e67cfc776..3217fbe90155 100644
--- a/browser/extensions/formautofill/skin/windows/editDialog.css
+++ b/browser/extensions/formautofill/skin/windows/editDialog.css
@@ -4,7 +4,7 @@
 
 /* The save button should be on the left and cancel on the right for Windows */
 #controlsContainer > #save {
-  order: -1;
+  order: 0;
 }
 
 #controlsContainer > #cancel {
diff --git a/browser/themes/linux/browser.css b/browser/themes/linux/browser.css
index 0591f160dcd0..46089edfbf8f 100644
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -31,7 +31,7 @@
 }
 
 #menubar-items {
-  flex-direction: column; /* for flex hack */
+  -moz-box-orient: vertical; /* for flex hack */
 }
 
 #navigator-toolbox {
@@ -332,7 +332,7 @@ menuitem.bookmark-item {
    * can swallow those events. */
   .titlebar-buttonbox {
     z-index: 1;
-    align-items: center;
+    -moz-box-align: center;
   }
 
   /* Render titlebar command buttons according to system config.
@@ -340,22 +340,22 @@ menuitem.bookmark-item {
   .titlebar-min {
     appearance: auto;
     -moz-default-appearance: -moz-window-button-minimize;
-    order: env(-moz-gtk-csd-minimize-button-position);
+    -moz-box-ordinal-group: env(-moz-gtk-csd-minimize-button-position);
   }
   .titlebar-max {
     appearance: auto;
     -moz-default-appearance: -moz-window-button-maximize;
-    order: env(-moz-gtk-csd-maximize-button-position);
+    -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
   }
   .titlebar-restore {
     appearance: auto;
     -moz-default-appearance: -moz-window-button-restore;
-    order: env(-moz-gtk-csd-maximize-button-position);
+    -moz-box-ordinal-group: env(-moz-gtk-csd-maximize-button-position);
   }
   .titlebar-close {
     appearance: auto;
     -moz-default-appearance: -moz-window-button-close;
-    order: env(-moz-gtk-csd-close-button-position);
+    -moz-box-ordinal-group: env(-moz-gtk-csd-close-button-position);
   }
 
   /* When using lightweight themes, use our own buttons since native ones might
@@ -414,7 +414,7 @@ menuitem.bookmark-item {
 
   @media (-moz-gtk-csd-reversed-placement) {
     .titlebar-buttonbox-container {
-      order: -1;
+      -moz-box-ordinal-group: 0;
     }
   }
 }
diff --git a/browser/themes/linux/places/organizer.css b/browser/themes/linux/places/organizer.css
index 81173ade89e4..9d12862f7b38 100644
--- a/browser/themes/linux/places/organizer.css
+++ b/browser/themes/linux/places/organizer.css
@@ -84,7 +84,7 @@
 
 #placesMenu > menu::after {
   content: "";
-  display: flex;
+  display: -moz-box;
   width: 12px;
   height: 12px;
   content: url("chrome://global/skin/icons/arrow-down-12.svg");
diff --git a/browser/themes/linux/preferences/applications.css b/browser/themes/linux/preferences/applications.css
index ac4e86360010..2627b06d0081 100644
--- a/browser/themes/linux/preferences/applications.css
+++ b/browser/themes/linux/preferences/applications.css
@@ -27,7 +27,7 @@ menuitem[appHandlerIcon="plugin"] {
 }
 
 #appList > richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #appList > richlistitem > image {
diff --git a/browser/themes/osx/browser.css b/browser/themes/osx/browser.css
index bcd2e6a044c1..cd1c535b3a83 100644
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -54,7 +54,7 @@
 */
 #navigator-toolbox::after {
   content: "";
-  display: flex;
+  display: -moz-box;
   appearance: auto;
   -moz-default-appearance: toolbox;
   height: 1px;
@@ -66,7 +66,7 @@
 
 #titlebar {
   /* Centrally align content items vertically */
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 .titlebar-button {
@@ -74,7 +74,7 @@
 }
 
 .titlebar-buttonbox-container {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 /* Hide window controls in fullscreen */
@@ -135,7 +135,7 @@
 
 #nav-bar-customization-target > #wrapper-personal-bookmarks > #personal-bookmarks {
   min-height: 32px;
-  align-items: center;
+  -moz-box-align: center;
 }
 
 /* Workaround for native menubar inheritance */
@@ -333,7 +333,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
 
 #tabbrowser-tabs {
   /* overriding tabbox.css */
-  align-items: stretch;
+  -moz-box-align: stretch;
   margin-bottom: 0;
   position: static;
   z-index: auto;
diff --git a/browser/themes/osx/pageInfo.css b/browser/themes/osx/pageInfo.css
index 9600ba184871..3a8c8fc9bef0 100644
--- a/browser/themes/osx/pageInfo.css
+++ b/browser/themes/osx/pageInfo.css
@@ -9,8 +9,8 @@
   appearance: auto;
   -moz-default-appearance: toolbar;
   -moz-window-dragging: drag;
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 #viewGroup {
@@ -19,8 +19,8 @@
 
 #viewGroup > radio,
 #viewGroup > toolbarbutton {
-  flex-direction: column;
-  align-items: center;
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
   appearance: auto;
   -moz-default-appearance: toolbarbutton;
   font: menu;
diff --git a/browser/themes/osx/preferences/applications.css b/browser/themes/osx/preferences/applications.css
index 4a483525f684..7eb762cefdf3 100644
--- a/browser/themes/osx/preferences/applications.css
+++ b/browser/themes/osx/preferences/applications.css
@@ -45,7 +45,7 @@ menuitem[appHandlerIcon] > .menu-iconic-left > .menu-iconic-icon {
 }
 
 #appList > richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #appList > richlistitem > image {
diff --git a/browser/themes/shared/UITour.css b/browser/themes/shared/UITour.css
index cd8524017f0d..3380e7d4a0bb 100644
--- a/browser/themes/shared/UITour.css
+++ b/browser/themes/shared/UITour.css
@@ -34,11 +34,11 @@
 }
 
 #UITourTooltipBody {
-  align-items: flex-start;
+  -moz-box-align: start;
 }
 
 #UITourTooltipTitleContainer {
-  align-items: flex-start;
+  -moz-box-align: start;
   margin-bottom: 10px;
 }
 
@@ -81,7 +81,7 @@
 }
 
 #UITourTooltipButtons {
-  justify-content: flex-end;
+  -moz-box-pack: end;
   background-color: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
   margin: 10px -16px -16px;
diff --git a/browser/themes/shared/addons/unified-extensions.css b/browser/themes/shared/addons/unified-extensions.css
index 2d2c75ebca36..179c6fd8a090 100644
--- a/browser/themes/shared/addons/unified-extensions.css
+++ b/browser/themes/shared/addons/unified-extensions.css
@@ -142,7 +142,7 @@ unified-extensions-item {
 }
 
 toolbaritem.unified-extensions-item .unified-extensions-item-menu-button.subviewbutton {
-  flex: none;
+  -moz-box-flex: 0;
   margin-inline-start: var(--arrowpanel-menuitem-margin-inline);
   padding: 8px;
   border: 1px solid transparent;
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
index 9d6c89b4c9f1..ddb2ff587476 100644
--- a/browser/themes/shared/browser-shared.css
+++ b/browser/themes/shared/browser-shared.css
@@ -265,7 +265,7 @@ menupopup::part(drop-indicator-container) {
    * probably simplify this substantially, by making the indicator position:
    * absolute or so (which was never properly supported in XUL). The container
    * should become completely unnecessary then. */
-  flex: 1;
+  -moz-box-flex: 1;
   min-width: 0;
   min-height: 0;
 }
@@ -339,7 +339,7 @@ menupopup::part(drop-indicator) {
 /* New Private Browsing Indicator */
 
 #private-browsing-indicator-with-label {
-  align-items: center;
+  -moz-box-align: center;
   margin-inline: 7px;
 }
 
diff --git a/browser/themes/shared/contextmenu.css b/browser/themes/shared/contextmenu.css
index 41dfb5f6cb37..b0ace28d12b8 100644
--- a/browser/themes/shared/contextmenu.css
+++ b/browser/themes/shared/contextmenu.css
@@ -5,9 +5,9 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 #context-navigation > .menuitem-iconic {
-  flex: 1;
-  justify-content: center;
-  align-items: center;
+  -moz-box-flex: 1;
+  -moz-box-pack: center;
+  -moz-box-align: center;
 }
 
 #context-navigation > .menuitem-iconic > .menu-iconic-left {
diff --git a/browser/themes/shared/controlcenter/panel.css b/browser/themes/shared/controlcenter/panel.css
index d994536eb95d..7962ae6bb3d7 100644
--- a/browser/themes/shared/controlcenter/panel.css
+++ b/browser/themes/shared/controlcenter/panel.css
@@ -332,8 +332,8 @@
 }
 
 #protections-popup-trackersView-list.empty {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 .protections-popup-empty-label {
@@ -566,7 +566,7 @@
 .protections-popup-tp-switch-label-box,
 .protections-popup-tp-switch-box {
   min-height: 40px;
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 /* This is needed in order to show a correct height if the 'Site not working?'
diff --git a/browser/themes/shared/ctrlTab.css b/browser/themes/shared/ctrlTab.css
index 645467864db4..0f78e09a5257 100644
--- a/browser/themes/shared/ctrlTab.css
+++ b/browser/themes/shared/ctrlTab.css
@@ -52,7 +52,7 @@
 
 .ctrlTab-favicon-container {
   position: relative;
-  justify-content: flex-end;
+  -moz-box-pack: end;
 }
 
 .ctrlTab-favicon[src] {
@@ -117,7 +117,7 @@
 }
 
 .ctrlTab-label {
-  flex: 1;
-  justify-content: center;
+  -moz-box-flex: 1;
+  -moz-box-pack: center;
   contain: inline-size;
 }
diff --git a/browser/themes/shared/customizableui/customizeMode.css b/browser/themes/shared/customizableui/customizeMode.css
index a3762de7570d..934ba001ab76 100644
--- a/browser/themes/shared/customizableui/customizeMode.css
+++ b/browser/themes/shared/customizableui/customizeMode.css
@@ -286,15 +286,15 @@ toolbarpaletteitem > #search-container > #searchbar > .searchbar-textbox {
 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-out-button,
 #wrapper-edit-controls[place="palette"] > #edit-controls > #cut-button,
 #wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-button {
-  align-items: flex-end;
+  -moz-box-align: end;
 }
 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-in-button,
 #wrapper-edit-controls[place="palette"] > #edit-controls > #paste-button,
 #wrapper-profiler-button[place="palette"] > #profiler-button > #profiler-button-dropmarker {
-  align-items: flex-start;
+  -moz-box-align: start;
 }
 #wrapper-edit-controls[place="palette"] > #edit-controls > #copy-button {
-  flex: none;
+  -moz-box-flex: 0;
 }
 
 #customization-uidensity-touch-spacer {
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
index eaae143e465a..60427241021b 100644
--- a/browser/themes/shared/customizableui/panelUI-shared.css
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -52,7 +52,7 @@
 }
 
 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
-  display: flex;
+  display: -moz-box;
   height: 10px;
   width: 10px;
   background-size: contain;
@@ -139,7 +139,7 @@
 }
 
 panelview {
-  flex-direction: column;
+  -moz-box-orient: vertical;
   background: var(--arrowpanel-background);
   padding: 0;
 }
@@ -155,7 +155,7 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
 .panel-subview-body {
   overflow-y: auto;
   overflow-x: hidden;
-  flex: 1;
+  -moz-box-flex: 1;
   padding: var(--panel-subview-body-padding);
 }
 
@@ -169,7 +169,7 @@ toolbarseparator + .panel-subview-body {
 
 .panel-view-body-unscrollable {
   overflow: hidden;
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .panel-info-button {
@@ -322,7 +322,7 @@ toolbarbutton menupopup[placespopup] menuseparator::before {
 }
 
 #confirmation-hint::part(content) {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #confirmation-hint-checkmark-animation-container {
@@ -473,7 +473,7 @@ panelview[id^=PanelUI-webext-] {
 }
 
 toolbarpaletteitem[place="panel"] > .toolbarbutton-1 {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 /* Help webextension buttons fit in. */
@@ -487,7 +487,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 
 #customization-palette .toolbarbutton-1 {
   appearance: none;
-  flex-direction: column;
+  -moz-box-orient: vertical;
   padding: 12px 0 9px;
   margin: 0;
 }
@@ -514,7 +514,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 
 #appMenu-popup .panel-banner-item,
 #appMenu-popup .addon-banner-item {
-  align-items: flex-start;
+  -moz-box-align: start;
   color: var(--panel-banner-item-color);
   background-color: var(--panel-banner-item-background-color);
   margin-bottom: 4px;
@@ -548,7 +548,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
   width: 16px;
   height: 16px;
   /* Move the icon to appear after the text label. */
-  order: 2;
+  -moz-box-ordinal-group: 2;
 }
 
 .addon-banner-item > .toolbarbutton-icon {
@@ -559,7 +559,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
    added to put their generic notification in. */
 .addon-banner-item::after {
   content: "";
-  display: flex;
+  display: -moz-box;
   background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
   width: 16px;
   height: 16px;
@@ -665,7 +665,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 
 .syncNowBtn {
   visibility: collapse;
-  order: 2;
+  -moz-box-ordinal-group: 2;
 }
 
 .PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
@@ -981,7 +981,7 @@ panelview .toolbarbutton-1,
 
 .subviewbutton {
   /* toolbarbuttons default to centered, but we don't want that for subviews. */
-  justify-content: flex-start;
+  -moz-box-pack: start;
 }
 
 .subviewbutton[disabled="true"] {
@@ -1097,7 +1097,7 @@ panelview .toolbarbutton-1,
 
 .subviewbutton[shortcut]::after {
   content: attr(shortcut);
-  display: flex;
+  display: -moz-box;
   color: var(--panel-shortcut-color);
 }
 
@@ -1108,7 +1108,7 @@ panelview .toolbarbutton-1,
   content: url(chrome://global/skin/icons/arrow-right.svg);
   fill: currentColor;
   fill-opacity: 0.6;
-  display: flex;
+  display: -moz-box;
 }
 
 #protections-popup-mainView .subviewbutton-nav:not(.notFound):-moz-locale-dir(rtl)::after,
@@ -1139,7 +1139,7 @@ panelview .toolbarbutton-1,
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0.6;
-  display: flex;
+  display: -moz-box;
   height: 12px;
   width: 12px;
 }
@@ -1165,8 +1165,8 @@ panelview .toolbarbutton-1,
 
 .toolbaritem-combined-buttons,
 .toolbaritem-menu-buttons {
-  align-items: center;
-  flex-direction: row;
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
   border: 0;
   border-radius: 0;
 }
@@ -1177,13 +1177,13 @@ panelview .toolbarbutton-1,
 }
 
 panelmultiview .toolbaritem-combined-buttons > label {
-  flex: 1;
+  -moz-box-flex: 1;
   margin: 0;
   padding: 4px 0;
 }
 
 .PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton {
-  flex: none;
+  -moz-box-flex: 0;
   height: auto;
   margin-inline-start: 18px;
   min-width: auto;
@@ -1309,14 +1309,14 @@ toolbarpaletteitem[place="palette"] > #search-container {
 ) > toolbarbutton {
   border: 0;
   margin: 0;
-  flex: 1;
+  -moz-box-flex: 1;
   padding-block: var(--arrowpanel-menuitem-padding-block);
-  flex-direction: row;
+  -moz-box-orient: horizontal;
 }
 
 toolbarpaletteitem[place="panel"],
 toolbarpaletteitem[place="panel"] > toolbaritem {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .toolbaritem-combined-buttons[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
@@ -1343,7 +1343,7 @@ toolbarpaletteitem[place="panel"] > toolbaritem {
   [overflowedItem=true]
 ) > separator {
   appearance: none;
-  align-items: stretch;
+  -moz-box-align: stretch;
   margin: .5em 0;
   width: 1px;
   height: auto;
@@ -1361,8 +1361,8 @@ toolbarpaletteitem[place="panel"] > toolbaritem {
 }
 
 .widget-overflow-list .toolbarbutton-1 {
-  align-items: center;
-  flex-direction: row;
+  -moz-box-align: center;
+  -moz-box-orient: horizontal;
 }
 
 toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
@@ -1402,7 +1402,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 }
 
 #panic-button-success-header {
-  align-items: center;
+  -moz-box-align: center;
   margin-bottom: 5px;
 }
 
@@ -1412,7 +1412,7 @@ toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after {
 
 .subviewradio {
   appearance: none;
-  align-items: center;
+  -moz-box-align: center;
   padding: 3px;
   margin: 0 0 2px;
   background-color: transparent;
diff --git a/browser/themes/shared/downloads/allDownloadsView.inc.css b/browser/themes/shared/downloads/allDownloadsView.inc.css
index 66b9c39c3f2f..bbe678fde926 100644
--- a/browser/themes/shared/downloads/allDownloadsView.inc.css
+++ b/browser/themes/shared/downloads/allDownloadsView.inc.css
@@ -42,7 +42,7 @@
 
 .downloadButton {
   appearance: none;
-  align-items: center;
+  -moz-box-align: center;
   background: transparent;
   min-width: 0;
   min-height: 0;
diff --git a/browser/themes/shared/downloads/download-blockedStates.css b/browser/themes/shared/downloads/download-blockedStates.css
index cf35fdcac915..7a68a381c08c 100644
--- a/browser/themes/shared/downloads/download-blockedStates.css
+++ b/browser/themes/shared/downloads/download-blockedStates.css
@@ -49,7 +49,7 @@
 }
 
 #downloadsPanel-blockedSubview-title {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #downloadsPanel-blockedSubview[verdict="PotentiallyUnwanted"] .downloadsPanel-blockedSubview-image,
diff --git a/browser/themes/shared/downloads/progressmeter.css b/browser/themes/shared/downloads/progressmeter.css
index 5f44720aa345..892cea71356d 100644
--- a/browser/themes/shared/downloads/progressmeter.css
+++ b/browser/themes/shared/downloads/progressmeter.css
@@ -41,7 +41,7 @@ toolbar[brighttext]:-moz-lwtheme {
 
 .downloadProgress {
   appearance: none;
-  display: flex;
+  display: -moz-box;
   margin-block: 5px 1px;
   /* This value is kinda odd, it's used to align with the edge of the badge,
    * if shown, which is inside the edge of the image (the image gets 16px
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
index c63db1f3e700..c30d70b8f935 100644
--- a/browser/themes/shared/identity-block/identity-block.css
+++ b/browser/themes/shared/identity-block/identity-block.css
@@ -203,7 +203,7 @@
 #identity-permission-box[open=true],
 #identity-permission-box[hasPermissions],
 #identity-permission-box[hasSharingIcon] {
-  display: flex;
+  display: -moz-box;
 }
 
 /* SHARING ICON */
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
index dbc93ecb589d..4eacaefac4b4 100644
--- a/browser/themes/shared/notification-icons.css
+++ b/browser/themes/shared/notification-icons.css
@@ -207,7 +207,7 @@
 }
 
 #webRTC-preview:not([hidden]) {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 #webRTC-previewVideo {
@@ -348,7 +348,7 @@
 #notification-popup-box[hidden] {
   /* Override display:none to make the pluginBlockedNotification animation work
      when showing the notification repeatedly. */
-  display: flex;
+  display: -moz-box;
   visibility: collapse;
 }
 
diff --git a/browser/themes/shared/places/editBookmark.css b/browser/themes/shared/places/editBookmark.css
index d0163ee0b38f..84524850da5b 100644
--- a/browser/themes/shared/places/editBookmark.css
+++ b/browser/themes/shared/places/editBookmark.css
@@ -34,7 +34,7 @@
 }
 
 .folder-icon > .menu-iconic-left {
-  display: flex;
+  display: -moz-box;
 }
 
 .folder-icon {
@@ -46,7 +46,7 @@
 #editBMPanel_tagsSelector > richlistitem > image {
   appearance: auto;
   -moz-default-appearance: checkbox;
-  align-items: center;
+  -moz-box-align: center;
   margin: 0 2px;
   min-width: 13px;
   min-height: 13px;
diff --git a/browser/themes/shared/places/organizer-shared.css b/browser/themes/shared/places/organizer-shared.css
index d4d697427e63..828b4f642d49 100644
--- a/browser/themes/shared/places/organizer-shared.css
+++ b/browser/themes/shared/places/organizer-shared.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #contentView {
-  flex: 4 4;
+  -moz-box-flex: 4;
 }
 
 #contentView,
diff --git a/browser/themes/shared/places/sidebar.css b/browser/themes/shared/places/sidebar.css
index 7dd005e9d776..c4c7db5701b7 100644
--- a/browser/themes/shared/places/sidebar.css
+++ b/browser/themes/shared/places/sidebar.css
@@ -80,7 +80,7 @@
 
 #viewButton > .button-box > .button-menu-dropmarker {
   appearance: none !important;
-  display: flex;
+  display: -moz-box;
   list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
   width: 12px;
   height: 12px;
diff --git a/browser/themes/shared/preferences/containers-dialog.css b/browser/themes/shared/preferences/containers-dialog.css
index 36e8dfd8f260..870c4141ebde 100644
--- a/browser/themes/shared/preferences/containers-dialog.css
+++ b/browser/themes/shared/preferences/containers-dialog.css
@@ -5,11 +5,11 @@
 @import url("chrome://browser/content/usercontext/usercontext.css");
 
 #name {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .radio-buttons {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
   margin-inline-start: 0.35rem;
 }
 
diff --git a/browser/themes/shared/preferences/containers.css b/browser/themes/shared/preferences/containers.css
index 8528bf794898..43081ce8a41e 100644
--- a/browser/themes/shared/preferences/containers.css
+++ b/browser/themes/shared/preferences/containers.css
@@ -37,7 +37,7 @@
  * by the prefs' find-in-page feature.
  */
 .userContext-label-inprefs {
-  display: flex;
+  display: -moz-box;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/browser/themes/shared/preferences/dialog.css b/browser/themes/shared/preferences/dialog.css
index 92704439bc54..7d9e80125c51 100644
--- a/browser/themes/shared/preferences/dialog.css
+++ b/browser/themes/shared/preferences/dialog.css
@@ -18,7 +18,7 @@ dialog {
 
 .contentPane,
 dialog::part(content-box) {
-  flex: 1;
+  -moz-box-flex: 1;
   /* This allows the focus ring to display fully when scrolling is enabled. */
   padding: 4px;
 }
diff --git a/browser/themes/shared/preferences/preferences.css b/browser/themes/shared/preferences/preferences.css
index c36e29e7b467..e917a33390f7 100644
--- a/browser/themes/shared/preferences/preferences.css
+++ b/browser/themes/shared/preferences/preferences.css
@@ -30,8 +30,8 @@
 
 #preferences-body {
   vertical-align: top; /* See bug 1606130 */
-  display: flex;
-  flex-direction: column;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 
   --main-pane-width: 664px;
 }
@@ -174,7 +174,7 @@ checkbox {
 }
 
 .ac-site-icon {
-  display: flex;
+  display: -moz-box;
 }
 
 /* Subcategory title */
@@ -309,7 +309,7 @@ checkbox {
 }
 
 #saveWhere {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #saveTo {
@@ -317,7 +317,7 @@ checkbox {
 }
 
 #downloadFolder {
-  flex: 1;
+  -moz-box-flex: 1;
   margin-block: 4px;
   margin-inline-start: 0;
   padding-inline-start: 30px;
@@ -346,7 +346,7 @@ checkbox {
 }
 
 #updateDeck > hbox > label {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .manualLink {
@@ -597,7 +597,7 @@ html|dialog,
   color: var(--in-content-page-color);
   /* `transparent` will use the dialogText color in high-contrast themes and
      when page colors are disabled */
-  display: flex;
+  display: -moz-box;
   margin: 0;
   padding: 0;
   overflow-x: auto;
@@ -657,7 +657,7 @@ html|dialog,
 
 .dialogFrame {
   margin: 10px;
-  flex: 1;
+  -moz-box-flex: 1;
   /* Default dialog dimensions */
   min-width: 66ch;
 }
@@ -723,7 +723,7 @@ html|dialog,
 }
 
 #fxaSyncComputerName {
-  flex: 1;
+  -moz-box-flex: 1;
   margin-block: 4px;
   margin-inline-start: 0;
 }
@@ -830,7 +830,7 @@ dialog > .sync-engines-list + hbox {
 }
 
 .sync-engines-list .checkbox-label-box {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 .sync-engines-list {
@@ -1001,7 +1001,7 @@ dialog > .sync-engines-list + hbox {
 }
 
 .sticky-inner-container {
-  flex: 1;
+  -moz-box-flex: 1;
   max-width: var(--main-pane-width);
 }
 
@@ -1056,7 +1056,7 @@ dialog > .sync-engines-list + hbox {
 }
 
 menulist[indicator=true] > menupopup menuitem:not([image]) > .menu-iconic-left {
-  display: flex;
+  display: -moz-box;
   min-width: auto; /* Override the min-width defined in menu.css */
   margin-inline-end: 6px;
 }
@@ -1193,11 +1193,11 @@ richlistitem .text-link:hover {
 
 .featureGateCheckbox {
   font-size: 1.14em;
-  align-items: center;
+  -moz-box-align: center;
 }
 
 .featureGateCheckbox > .checkbox-label-box {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 .featureGateDescription {
diff --git a/browser/themes/shared/preferences/privacy.css b/browser/themes/shared/preferences/privacy.css
index 5a5b853ffd10..0bdbb4a36983 100644
--- a/browser/themes/shared/preferences/privacy.css
+++ b/browser/themes/shared/preferences/privacy.css
@@ -302,7 +302,7 @@
 }
 
 #submitHealthReportBox {
-  display: inline-flex;
+  display: -moz-inline-box;
 }
 
 /* Address bar */
diff --git a/browser/themes/shared/preferences/search.css b/browser/themes/shared/preferences/search.css
index 010c8d56794b..65651e558322 100644
--- a/browser/themes/shared/preferences/search.css
+++ b/browser/themes/shared/preferences/search.css
@@ -45,7 +45,7 @@
 
 /* work around a display: none in Linux's menu.css, see bug 1112310 */
 .searchengine-menuitem > .menu-iconic-left {
-  display: flex;
+  display: -moz-box;
 }
 
 #engineList {
diff --git a/browser/themes/shared/preferences/siteDataSettings.css b/browser/themes/shared/preferences/siteDataSettings.css
index 19e393ccecfc..7f2a5dd0b0e5 100644
--- a/browser/themes/shared/preferences/siteDataSettings.css
+++ b/browser/themes/shared/preferences/siteDataSettings.css
@@ -16,12 +16,12 @@
 
 #sitesList > richlistitem > hbox,
 .item-box > label {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .item-box {
   padding: 5px 8px;
-  align-items: center;
+  -moz-box-align: center;
   width: 50px;
 }
 
diff --git a/browser/themes/shared/searchbar.css b/browser/themes/shared/searchbar.css
index f7d14aa5e611..9afb692dddbd 100644
--- a/browser/themes/shared/searchbar.css
+++ b/browser/themes/shared/searchbar.css
@@ -49,7 +49,7 @@
  */
 
 .search-panel-current-engine {
-  align-items: center;
+  -moz-box-align: center;
   border-top: none !important;
   padding-inline: 8px;
 }
@@ -58,7 +58,7 @@
 .search-panel-one-offs-container {
   display: flex;
   flex-direction: row;
-  flex: 1;
+  flex-grow: 1;
 }
 
 .search-panel-one-offs {
@@ -70,7 +70,7 @@
 
 .searchbar-engine-one-off-item {
   appearance: none;
-  display: inline-flex;
+  display: -moz-inline-box;
   background-color: transparent;
   border: none;
   min-width: 32px;
@@ -124,7 +124,7 @@
 }
 
 .search-panel-tree > .autocomplete-richlistitem > .ac-type-icon {
-  display: flex;
+  display: -moz-box;
   width: 14px;
   height: 14px;
   margin-inline-end: 7px;
diff --git a/browser/themes/shared/sidebar.css b/browser/themes/shared/sidebar.css
index f71a0d78ceab..fb879bc73fce 100644
--- a/browser/themes/shared/sidebar.css
+++ b/browser/themes/shared/sidebar.css
@@ -21,11 +21,11 @@
 #sidebar-spacer {
   /* To ensure the button doesn't expand unnecessarily for short labels, the
      spacer should significantly out-flex the button. */
-  flex: 1000 1000;
+  -moz-box-flex: 1000;
 }
 
 #sidebar {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 @media not (-moz-platform: linux) {
@@ -65,7 +65,7 @@
   margin: 0;
   padding: 0;
   padding-inline: 8px 4px;
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #sidebar-switcher-arrow {
@@ -87,7 +87,7 @@
   border-radius: var(--toolbarbutton-border-radius);
   border: 1px solid transparent;
   padding: 2px 4px;
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #sidebar-switcher-target:hover {
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
index c1bab928d074..63236a6014f0 100644
--- a/browser/themes/shared/tabs.css
+++ b/browser/themes/shared/tabs.css
@@ -53,7 +53,7 @@
   padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
   /* Use a bigger flex value than the searchbar to prevent it from
    * taking all the toolbar space. */
-  flex: 1000 1000;
+  -moz-box-flex: 1000;
 }
 
 #tabbrowser-tabpanels {
@@ -95,11 +95,11 @@
   border-width: 0;
   margin: 0;
   padding: 0 2px;
-  align-items: stretch;
+  -moz-box-align: stretch;
   /* Needed so that overflowing content overflows towards the end rather than
      getting centered. That prevents tab opening animation from looking off at
      the start, see bug 1759221. */
-  justify-content: flex-start;
+  -moz-box-pack: start;
   overflow: clip;
   /* Needed to avoid clipping the tab-background shadow, which has a 4px blur
    * (we only have 2px padding in the inline direction) */
diff --git a/browser/themes/shared/toolbarbuttons.css b/browser/themes/shared/toolbarbuttons.css
index c77ccc7df5b9..028efa74fcc3 100644
--- a/browser/themes/shared/toolbarbuttons.css
+++ b/browser/themes/shared/toolbarbuttons.css
@@ -70,7 +70,7 @@ toolbar .toolbarbutton-1 {
   appearance: none;
   margin: 0;
   padding: 0 var(--toolbarbutton-outer-padding);
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 #TabsToolbar .toolbarbutton-1 {
@@ -144,7 +144,7 @@ toolbar .toolbaritem-combined-buttons > .toolbarbutton-1 {
 
 toolbar .toolbaritem-combined-buttons:not(:hover) > separator {
   content: "";
-  display: flex;
+  display: -moz-box;
   width: 1px;
   height: 16px;
   margin-inline-end: -1px;
@@ -227,7 +227,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
  * how e.g. combined items work, and maybe we should just remove this.
  */
 #PersonalToolbar .toolbarbutton-1 {
-  align-items: stretch;
+  -moz-box-align: stretch;
 }
 #PersonalToolbar .toolbarbutton-1 > .toolbarbutton-icon {
   height: auto;
@@ -264,7 +264,7 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
 
 /* Force the display of the label for bookmarks */
 .bookmark-item > .toolbarbutton-text {
-  display: flex !important;
+  display: -moz-box !important;
 }
 
 #personal-bookmarks,
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
index f2762943892d..b0fe7e7a7bc8 100644
--- a/browser/themes/shared/urlbar-searchbar.css
+++ b/browser/themes/shared/urlbar-searchbar.css
@@ -75,7 +75,7 @@
 #urlbar-input,
 #urlbar-scheme,
 .searchbar-textbox {
-  flex: 1;
+  -moz-box-flex: 1;
   background-color: transparent;
   color: inherit;
   border: none;
@@ -264,12 +264,12 @@
 }
 
 #urlbar-container {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #urlbar-container,
 #wrapper-urlbar-container {
-  flex: 400 400;
+  -moz-box-flex: 400;
 }
 
 #urlbar-search-splitter {
@@ -513,7 +513,7 @@
   transition-property: background-color, mask-position-x, width, margin-inline-end;
   transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
   transition-duration: var(--cfr-animation-duration);
-  align-items: center;
+  -moz-box-align: center;
   margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
 }
 #cfr-label-container:-moz-locale-dir(rtl) {
@@ -626,7 +626,7 @@
 }
 
 #urlbar-zoom-button > .toolbarbutton-text {
-  display: flex;
+  display: -moz-box;
 }
 
 #urlbar-zoom-button > .toolbarbutton-icon {
@@ -641,12 +641,12 @@
 
 #search-container,
 #wrapper-search-container {
-  flex: 175 175;
+  -moz-box-flex: 175;
 }
 
 #search-container[width] {
   /* Take something closer to the explicit width when requested */
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 #search-container[cui-areatype="panel"] > #searchbar:-moz-lwtheme {
@@ -663,7 +663,7 @@
 }
 
 .searchbar-search-button {
-  align-items: center;
+  -moz-box-align: center;
   fill: currentColor;
 }
 
@@ -720,7 +720,7 @@ moz-input-box > menupopup .context-menu-add-engine:not([image]) {
 moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left::after {
   content: "";
   position: relative;
-  display: flex;
+  display: -moz-box;
   background: url(chrome://browser/skin/search-indicator-badge-add.svg) no-repeat center;
   height: 11px;
   width: 11px;
diff --git a/browser/themes/shared/webRTC-legacy-indicator.css b/browser/themes/shared/webRTC-legacy-indicator.css
index c8071eebe08a..5c6443fba12e 100644
--- a/browser/themes/shared/webRTC-legacy-indicator.css
+++ b/browser/themes/shared/webRTC-legacy-indicator.css
@@ -44,7 +44,7 @@ window {
 }
 
 window[sharingscreen] > #screenShareButton {
-  display: flex;
+  display: -moz-box;
 }
 
 #audioVideoButton {
@@ -60,7 +60,7 @@ window[sharingscreen] > #audioVideoButton {
 /* Single icon button: */
 window[sharingvideo] > #audioVideoButton,
 window[sharingaudio] > #audioVideoButton {
-  display: flex;
+  display: -moz-box;
   background-position: center center;
   background-size: 16px;
   min-width: 26px;
@@ -113,7 +113,7 @@ window[sharingaudio][sharingvideo] > #audioVideoButton {
 
 window[sharingscreen][sharingvideo] > #shareSeparator,
 window[sharingscreen][sharingaudio] > #shareSeparator {
-  display: flex;
+  display: -moz-box;
 }
 
 :is(#audioVideoButton, #screenShareButton, #firefoxButton):-moz-focusring {
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 9354ad9efa1e..85c04bf085b9 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -26,7 +26,7 @@
 }
 
 #menubar-items {
-  flex-direction: column; /* for flex hack */
+  -moz-box-orient: vertical; /* for flex hack */
 }
 
 #main-menubar > menu {
@@ -212,14 +212,14 @@
 }
 
 .titlebar-buttonbox-container {
-  align-items: stretch;
+  -moz-box-align: stretch;
 }
 
 @media (-moz-platform: windows-win7),
        (-moz-platform: windows-win8) {
   /* Preserve window control buttons position at the top of the button box. */
   .titlebar-buttonbox-container {
-    align-items: flex-start;
+    -moz-box-align: start;
   }
 }
 
@@ -524,11 +524,11 @@ menupopup[touchmode] :is(menu, menuitem, menucaption) {
    * will stretch to pick up the extra space. In that case, the outer icons
    * should align to the start/end of their containing <menuitem>: */
   #context-navigation > .menuitem-iconic:first-child {
-    justify-content: flex-start;
+    -moz-box-pack: start;
   }
 
   #context-navigation > .menuitem-iconic:last-child {
-    justify-content: flex-end;
+    -moz-box-pack: end;
   }
 
   #context-navigation > .menuitem-iconic:last-child,
diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css
index bd019d141576..2ff372d9e7df 100644
--- a/browser/themes/windows/preferences/applications.css
+++ b/browser/themes/windows/preferences/applications.css
@@ -27,7 +27,7 @@ menuitem[appHandlerIcon="plugin"] {
 }
 
 #appList > richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #appList > richlistitem > image {
diff --git a/devtools/client/shared/sourceeditor/test/browser_css_getInfo.js b/devtools/client/shared/sourceeditor/test/browser_css_getInfo.js
index 9fe52516e795..a55e37dff3dc 100644
--- a/devtools/client/shared/sourceeditor/test/browser_css_getInfo.js
+++ b/devtools/client/shared/sourceeditor/test/browser_css_getInfo.js
@@ -15,7 +15,7 @@ const source = [
   "#devtools-menu.devtools-menulist,",
   ".devtools-toolbarbutton#devtools-menu {",
   "  -moz-appearance: none;",
-  "  align-items: center;",
+  "  -moz-box-align: center;",
   "  min-width: 78px;",
   "  min-height: 22px;",
   "  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);",
@@ -28,7 +28,7 @@ const source = [
   "}",
   "",
   ".devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {",
-  "  flex-direction: row;",
+  "  -moz-box-orient: horizontal;",
   "}",
   "",
   ".devtools-menulist:active,",
diff --git a/devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css b/devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css
index d2c51a84133d..b3149030fd3b 100644
--- a/devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css
+++ b/devtools/client/shared/sourceeditor/test/css_statemachine_testcases.css
@@ -11,7 +11,7 @@
 #devtools-menu.devtools-menulist,
 .devtools-toolbarbutton#devtools-menu {
   -moz-appearance: none;
-  align-items: center;
+  -moz-box-align: center;
   min-width: 78px;
   min-height: 22px;
   text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
@@ -24,7 +24,7 @@
 }
 
 .devtools-toolbarbutton > hbox.toolbarbutton-menubutton-button {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
 }
 
 .devtools-menulist:active,
diff --git a/devtools/client/shared/toolbarbutton.css b/devtools/client/shared/toolbarbutton.css
index 294900c7b7e2..b343f12a733a 100644
--- a/devtools/client/shared/toolbarbutton.css
+++ b/devtools/client/shared/toolbarbutton.css
@@ -14,6 +14,7 @@
   border: none;
   border-radius: 2px;
   color: var(--theme-body-color);
+  -moz-box-align: center;
   text-shadow: none;
   padding: 2px;
   margin: 1px;
diff --git a/devtools/client/styleeditor/StyleEditorUI.sys.mjs b/devtools/client/styleeditor/StyleEditorUI.sys.mjs
index 84534abfd89d..1b6c9601bf26 100644
--- a/devtools/client/styleeditor/StyleEditorUI.sys.mjs
+++ b/devtools/client/styleeditor/StyleEditorUI.sys.mjs
@@ -416,7 +416,7 @@ export class StyleEditorUI extends EventEmitter {
     const visibleElements = Array.from(
       this.#nav.querySelectorAll(`li:not(.${FILTERED_CLASSNAME})`)
     );
-    // Elements have a different visual order (due to the use of order), so
+    // Elements have a different visual order (due to the use of MozBoxOrdinalGroup), so
     // we need to sort them by their data-ordinal attribute
     visibleElements.sort(
       (a, b) => a.getAttribute("data-ordinal") - b.getAttribute("data-ordinal")
@@ -863,7 +863,7 @@ export class StyleEditorUI extends EventEmitter {
 
     let ordinal = editor.styleSheet.styleSheetIndex;
     ordinal = ordinal == -1 ? Number.MAX_SAFE_INTEGER : ordinal;
-    summary.style.order = ordinal;
+    summary.style.MozBoxOrdinalGroup = ordinal;
     summary.setAttribute("data-ordinal", ordinal);
 
     const isSystem = !!editor.styleSheet.system;
diff --git a/devtools/client/themes/common.css b/devtools/client/themes/common.css
index dc8cfa9b3695..72da70accc5f 100644
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -311,7 +311,7 @@ checkbox:-moz-focusring {
   border-radius: 2px;
   color: var(--theme-body-color);
   transition: background-color 0.05s ease-in-out;
-  align-items: center;
+  -moz-box-align: center;
   text-shadow: none;
   padding: 2px;
   margin: 1px;
diff --git a/devtools/client/themes/splitview.css b/devtools/client/themes/splitview.css
index 08ccb05d6931..09e008afc18e 100644
--- a/devtools/client/themes/splitview.css
+++ b/devtools/client/themes/splitview.css
@@ -13,8 +13,8 @@
 
 box,
 .splitview-nav {
-  flex: 1;
-  flex-direction: column;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
   min-width: 0;
   min-height: 0;
 }
@@ -25,21 +25,21 @@ box,
   margin: 0;
   background-color: var(--theme-sidebar-background);
 
-  display: flex;
+  display: -moz-box;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .splitview-nav > li {
   padding-inline-end: 8px;
-  align-items: center;
+  -moz-box-align: center;
   outline: 0;
   vertical-align: bottom;
   border-bottom: 1px solid var(--theme-splitter-color);
 }
 
 .placeholder {
-  flex: 1;
+  -moz-box-flex: 1;
   text-align: center;
 }
 
@@ -72,7 +72,7 @@ box,
 }
 
 .splitview-nav-container {
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 .loading .splitview-nav-container > .placeholder {
@@ -81,7 +81,7 @@ box,
 
 .splitview-controller,
 .splitview-main {
-  flex: none;
+  -moz-box-flex: 0;
 }
 
 .splitview-controller {
@@ -99,7 +99,7 @@ box,
 
 /* only the active details pane is shown */
 .splitview-side-details > .splitview-active {
-  display: flex;
+  display: -moz-box;
 }
 
 /* filtered items are hidden */
@@ -115,12 +115,12 @@ ol.splitview-nav > li.splitview-filtered {
 }
 .splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
 .splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-  display: flex;
+  display: -moz-box;
 }
 
 @media (width >= 700px) {
   .splitview-root {
-    flex-direction: row;
+    -moz-box-orient: horizontal;
   }
   .splitview-controller {
     max-height: none;
@@ -131,7 +131,7 @@ ol.splitview-nav > li.splitview-filtered {
     display: none;
   }
   .splitview-details.splitview-active {
-    display: flex;
+    display: -moz-box;
   }
 }
 
diff --git a/devtools/client/themes/storage.css b/devtools/client/themes/storage.css
index 47998e2e8d78..8fff1f81e421 100644
--- a/devtools/client/themes/storage.css
+++ b/devtools/client/themes/storage.css
@@ -91,7 +91,7 @@ a {
 /* Text input in storage table */
 #storage-table input {
   appearance: none;
-  flex: 1;
+  -moz-box-flex: 1;
   /* make sure the outline is not cut off */
   position: relative;
   box-sizing: border-box;
@@ -123,11 +123,11 @@ a {
   properly with XUL. Force XUL flexbox instead.
 */
 #storage-toolbar {
-  display: flex;
+  display: -moz-box;
 }
 
 #storage-searchbox {
-  flex: 1;
+  -moz-box-flex: 1;
   margin-inline-start: -3px;
   margin-inline-end: 1px;
 }
diff --git a/devtools/client/themes/styleeditor.css b/devtools/client/themes/styleeditor.css
index 52958906fe38..e75fd28f8717 100644
--- a/devtools/client/themes/styleeditor.css
+++ b/devtools/client/themes/styleeditor.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #style-editor-chrome {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .splitview-nav > li,
@@ -12,11 +12,11 @@
 .stylesheet-rule-count,
 li.splitview-active > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton,
 li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
-  display: flex;
+  display: -moz-box;
 }
 
 .devtools-toolbar > spacer {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .style-editor-newButton {
@@ -28,7 +28,7 @@ li:hover > hgroup > .stylesheet-more > h3 > .stylesheet-saveButton {
 }
 
 .stylesheet-details-container {
-  flex: 1;
+  -moz-box-flex: 1;
   min-width: 0;
   min-height: 0;
 }
@@ -63,15 +63,15 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 }
 
 .stylesheet-info > h1 {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .splitview-nav > li > hgroup.stylesheet-info {
-  justify-content: center;
+  -moz-box-pack: center;
 }
 
 .stylesheet-more > spacer {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .stylesheet-title,
@@ -103,13 +103,13 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 }
 
 .splitview-nav > li {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
 }
 
 .splitview-nav > li > hgroup {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
 }
 
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
@@ -159,7 +159,7 @@ li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
 }
 
 .stylesheet-toggle {
-  display: flex;
+  display: -moz-box;
   cursor: pointer;
   padding: 8px 0;
   margin: 0 8px;
@@ -259,9 +259,9 @@ h3 {
   }
 
   .splitview-nav > li > hgroup.stylesheet-info {
-    align-items: baseline;
-    flex-direction: row;
-    flex: 1;
+    -moz-box-align: baseline;
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
   }
 
   .stylesheet-sidebar {
@@ -269,11 +269,11 @@ h3 {
   }
 
   .stylesheet-more {
-    flex: 1;
-    justify-content: flex-end;
+    -moz-box-flex: 1;
+    -moz-box-pack: end;
   }
 
   .stylesheet-more > spacer {
-    flex: none;
+    -moz-box-flex: 0;
   }
 }
diff --git a/devtools/client/themes/toolbars.css b/devtools/client/themes/toolbars.css
index 3c310b960446..5eb3cce991a9 100644
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -119,7 +119,7 @@
   text-align: center;
   background-color: transparent;
   color: inherit;
-  flex: 1;
+  -moz-box-flex: 1;
   border-width: 0;
   border-inline-start-width: 1px;
   border-style: solid;
diff --git a/devtools/client/themes/toolbox.css b/devtools/client/themes/toolbox.css
index b7ddb98b87e9..48626f45884f 100644
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -572,8 +572,8 @@
 /* Toolbox panels */
 
 .toolbox-panel {
-  display: flex;
-  flex: 1;
+  display: -moz-box;
+  -moz-box-flex: 1;
   visibility: collapse;
 }
 
@@ -594,7 +594,7 @@
 
 #toolbox-panel-webconsole {
   min-height: 75px;
-  flex: 1 auto;
+  -moz-box-flex: 1;
 }
 
 #toolbox-panel-webconsole[collapsed],
@@ -623,7 +623,7 @@
 }
 
 #toolbox-container {
-  flex: 1;
+  -moz-box-flex: 1;
   /* Let the component gain focus when a click hits an empty area */
   -moz-user-focus: normal;
 }
@@ -634,7 +634,7 @@
      height set to a small value without flexing to fill up extra
      space. There must be a flex on both to ensure that the console
      panel itself is sized properly */
-  flex: 10000 10000;
+  -moz-box-flex: 10000;
 }
 
 #toolbox-container:focus {
diff --git a/devtools/client/themes/tooltips.css b/devtools/client/themes/tooltips.css
index 2c93300ab015..3929d742eab9 100644
--- a/devtools/client/themes/tooltips.css
+++ b/devtools/client/themes/tooltips.css
@@ -503,7 +503,7 @@ strong {
 }
 
 .tooltip-container[type="doorhanger"] .tooltip-panel ul {
-  /* Override the display: flex declaration in xul.css
+  /* Override the display: -moz-box declaration in xul.css
    * or else menu items won't stack. */
   display: block;
 }
diff --git a/devtools/client/themes/widgets.css b/devtools/client/themes/widgets.css
index b94889545996..2af4e97bf199 100644
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -36,7 +36,7 @@
 .devtools-responsive-container {
   min-width: 0;
   min-height: 0;
-  flex-direction: row;
+  -moz-box-orient: horizontal;
 }
 
 .devtools-main-content {
@@ -62,7 +62,7 @@
 
 @media (max-width: 700px) {
   .devtools-responsive-container {
-    flex-direction: column;
+    -moz-box-orient: vertical;
   }
 
   .devtools-responsive-container > .devtools-side-splitter {
@@ -237,11 +237,11 @@
 /* Aligned values */
 
 .variables-view-container[aligned-values] .title > .separator {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .variables-view-container[aligned-values] .title > .value {
-  flex: none;
+  -moz-box-flex: 0;
   width: 70vw;
 }
 
@@ -252,29 +252,29 @@
 /* Actions first */
 
 .variables-view-open-inspector {
-  order: 1;
+  -moz-box-ordinal-group: 1;
 }
 
 .variables-view-edit,
 .variables-view-add-property {
-  order: 2;
+  -moz-box-ordinal-group: 2;
 }
 
 .variable-or-property-frozen-label,
 .variable-or-property-sealed-label,
 .variable-or-property-non-extensible-label,
 .variable-or-property-non-writable-icon {
-  order: 3;
+  -moz-box-ordinal-group: 3;
 }
 
 .variables-view-delete {
-  order: 4;
+  -moz-box-ordinal-group: 4;
 }
 
 .variables-view-container[actions-first] .variables-view-delete,
 .variables-view-container[actions-first] .variables-view-add-property,
 .variables-view-container[actions-first] .variables-view-open-inspector {
-  order: 0;
+  -moz-box-ordinal-group: 0;
 }
 
 .variables-view-container[actions-first] [invisible] {
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
index 17784af9d30a..a7f0408f3759 100644
--- a/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-one-grouped.xhtml
@@ -6,7 +6,7 @@
   function run() {
     var c = document.getElementById("C");
     getComputedStyle(c, "").width; // flush
-    c.style.order = "2";
+    c.style.MozBoxOrdinalGroup = "2";
     document.documentElement.removeAttribute("class");
   }
 
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
index f6ad6fcd3e0a..6ef73bc2723d 100644
--- a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-1.xhtml
@@ -6,12 +6,12 @@
   function run() {
     var c = document.getElementById("C");
     getComputedStyle(c, "").width; // flush
-    c.style.order = "2";
+    c.style.MozBoxOrdinalGroup = "2";
     document.documentElement.removeAttribute("class");
   }
 
   ]]></script>
-  <label id="B" value="B" style="order: 2" />
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
   <label id="C" value="C" />
   <label id="A" value="A" />
 </window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
index 726de7f46384..3c04293df840 100644
--- a/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-add-to-two-grouped-2.xhtml
@@ -6,12 +6,12 @@
   function run() {
     var b = document.getElementById("B");
     getComputedStyle(b, "").width; // flush
-    b.style.order = "2";
+    b.style.MozBoxOrdinalGroup = "2";
     document.documentElement.removeAttribute("class");
   }
 
   ]]></script>
   <label id="B" value="B" />
-  <label id="C" value="C" style="order: 2" />
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
   <label id="A" value="A" />
 </window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
index 5842ae54aae8..d3c444291dab 100644
--- a/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-none-grouped.xhtml
@@ -6,12 +6,12 @@
   function run() {
     var b = document.getElementById("B");
     getComputedStyle(b, "").width; // flush
-    b.style.order = "";
+    b.style.MozBoxOrdinalGroup = "";
     document.documentElement.removeAttribute("class");
   }
 
   ]]></script>
   <label id="A" value="A" />
-  <label id="B" value="B" style="order: 2" />
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
   <label id="C" value="C" />
 </window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
index 7c6f09f5de7e..f2f285734251 100644
--- a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-1.xhtml
@@ -6,12 +6,12 @@
   function run() {
     var b = document.getElementById("B");
     getComputedStyle(b, "").width; // flush
-    b.style.order = "";
+    b.style.MozBoxOrdinalGroup = "";
     document.documentElement.removeAttribute("class");
   }
 
   ]]></script>
-  <label id="C" value="C" style="order: 2" />
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
   <label id="A" value="A" />
-  <label id="B" value="B" style="order: 2" />
+  <label id="B" value="B" style="-moz-box-ordinal-group: 2" />
 </window>
diff --git a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
index e7604eba9212..1fb09c05be04 100644
--- a/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
+++ b/layout/reftests/box-ordinal/dynamic-1-remove-to-one-grouped-2.xhtml
@@ -6,12 +6,12 @@
   function run() {
     var a = document.getElementById("A");
     getComputedStyle(a, "").width; // flush
-    a.style.order = "";
+    a.style.MozBoxOrdinalGroup = "";
     document.documentElement.removeAttribute("class");
   }
 
   ]]></script>
-  <label id="C" value="C" style="order: 2" />
-  <label id="A" value="A" style="order: 2" />
+  <label id="C" value="C" style="-moz-box-ordinal-group: 2" />
+  <label id="A" value="A" style="-moz-box-ordinal-group: 2" />
   <label id="B" value="B" />
 </window>
diff --git a/layout/style/crashtests/416461-1.xhtml b/layout/style/crashtests/416461-1.xhtml
index 1624dbc29ceb..1986cda91e6c 100644
--- a/layout/style/crashtests/416461-1.xhtml
+++ b/layout/style/crashtests/416461-1.xhtml
@@ -2,5 +2,5 @@
   <wizard>
     <msqrt xmlns="http://www.w3.org/1998/Math/MathML"/>
   </wizard>
-  <menupopup style="display: inline; order: 2147483646;"/>
-</window>
+  <menupopup style="display: inline; -moz-box-ordinal-group: 2147483646;"/>
+</window>
\ No newline at end of file
diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css
index d05914c8346b..7f21fd1c3fda 100644
--- a/layout/style/res/ua.css
+++ b/layout/style/res/ua.css
@@ -193,6 +193,7 @@
   mask: inherit;
   opacity: inherit;
   text-decoration: inherit;
+  -moz-box-ordinal-group: inherit;
   overflow-clip-box: inherit;
   unicode-bidi: inherit;
   user-select: inherit;
diff --git a/layout/xul/nsSplitterFrame.cpp b/layout/xul/nsSplitterFrame.cpp
index 57a977251b1c..0a2ee336f131 100644
--- a/layout/xul/nsSplitterFrame.cpp
+++ b/layout/xul/nsSplitterFrame.cpp
@@ -570,7 +570,7 @@ nsresult nsSplitterFrameInner::MouseDown(Event* aMouseEvent) {
       mParentBox, FrameChildListID::Principal,
       CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
       CSSOrderAwareFrameIterator::OrderState::Unknown,
-      CSSOrderAwareFrameIterator::OrderingProperty::Order);
+      CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
   for (; !iter.AtEnd(); iter.Next()) {
     nsIFrame* childBox = iter.get();
     if (childBox == mOuter) {
diff --git a/layout/xul/nsSprocketLayout.cpp b/layout/xul/nsSprocketLayout.cpp
index 00cdb6656173..bb3ed0726336 100644
--- a/layout/xul/nsSprocketLayout.cpp
+++ b/layout/xul/nsSprocketLayout.cpp
@@ -32,7 +32,9 @@ static Maybe<CSSOrderAwareFrameIterator> IterFor(nsIFrame* aBoxFrame) {
   Maybe<CSSOrderAwareFrameIterator> ret;
   if (aBoxFrame->IsXULBoxFrame()) {
     ret.emplace(aBoxFrame, FrameChildListID::Principal,
-                CSSOrderAwareFrameIterator::ChildFilter::IncludeAll);
+                CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
+                CSSOrderAwareFrameIterator::OrderState::Unknown,
+                CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
   }
   return ret;
 }
diff --git a/layout/xul/tree/nsTreeColumns.cpp b/layout/xul/tree/nsTreeColumns.cpp
index 62a8299c6fb5..8ec3376b92a9 100644
--- a/layout/xul/tree/nsTreeColumns.cpp
+++ b/layout/xul/tree/nsTreeColumns.cpp
@@ -440,7 +440,9 @@ void nsTreeColumns::EnsureColumns() {
     // Enumerate the columns in visible order
     CSSOrderAwareFrameIterator iter(
         colFrame, FrameChildListID::Principal,
-        CSSOrderAwareFrameIterator::ChildFilter::IncludeAll);
+        CSSOrderAwareFrameIterator::ChildFilter::IncludeAll,
+        CSSOrderAwareFrameIterator::OrderState::Unknown,
+        CSSOrderAwareFrameIterator::OrderingProperty::BoxOrdinalGroup);
     for (; !iter.AtEnd(); iter.Next()) {
       nsIFrame* colFrame = iter.get();
       nsIContent* colContent = colFrame->GetContent();
diff --git a/toolkit/components/alerts/alert.css b/toolkit/components/alerts/alert.css
index 273646f399a6..fd392a94d454 100644
--- a/toolkit/components/alerts/alert.css
+++ b/toolkit/components/alerts/alert.css
@@ -19,8 +19,8 @@
 }
 
 #alertTitleBox {
-  justify-content: center;
-  align-items: center;
+  -moz-box-pack: center;
+  -moz-box-align: center;
 }
 
 .alertText {
diff --git a/toolkit/components/normandy/skin/shared/Heartbeat.css b/toolkit/components/normandy/skin/shared/Heartbeat.css
index fdf5f1b75cb8..21c77bc1a50e 100644
--- a/toolkit/components/normandy/skin/shared/Heartbeat.css
+++ b/toolkit/components/normandy/skin/shared/Heartbeat.css
@@ -72,24 +72,24 @@
 
 /* Heartbeat UI Rating Star Classes */
 #star-rating-container {
-  display: flex;
+  display: -moz-box;
   margin-bottom: 4px;
 }
 
 #star-rating-container > #star5 {
-  order: 5;
+  -moz-box-ordinal-group: 5;
 }
 
 #star-rating-container > #star4 {
-  order: 4;
+  -moz-box-ordinal-group: 4;
 }
 
 #star-rating-container > #star3 {
-  order: 3;
+  -moz-box-ordinal-group: 3;
 }
 
 #star-rating-container > #star2 {
-  order: 2;
+  -moz-box-ordinal-group: 2;
 }
 
 #star-rating-container > .star-x {
diff --git a/toolkit/components/prompts/content/tabprompts.css b/toolkit/components/prompts/content/tabprompts.css
index 539e8792ccf4..9d9147d05ddd 100644
--- a/toolkit/components/prompts/content/tabprompts.css
+++ b/toolkit/components/prompts/content/tabprompts.css
@@ -5,8 +5,8 @@
 /* Tab Modal Prompt boxes */
 
 .tabModalBackground {
-  justify-content: center;
-  flex-direction: column;
+  -moz-box-pack: center;
+  -moz-box-orient: vertical;
 }
 
 .tabModalBackground,
diff --git a/toolkit/content/autocomplete.css b/toolkit/content/autocomplete.css
index d6bef6a63deb..93a7fe342560 100644
--- a/toolkit/content/autocomplete.css
+++ b/toolkit/content/autocomplete.css
@@ -13,7 +13,7 @@
 }
 
 .autocomplete-richlistbox > richlistitem {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
   overflow: hidden;
 }
 
diff --git a/toolkit/content/tests/chrome/test_bug562554.xhtml b/toolkit/content/tests/chrome/test_bug562554.xhtml
index a822bf59dd47..05d678afd772 100644
--- a/toolkit/content/tests/chrome/test_bug562554.xhtml
+++ b/toolkit/content/tests/chrome/test_bug562554.xhtml
@@ -9,7 +9,7 @@
   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
 
-  <toolbarbutton type="menu" id="toolbarmenu" style="height: 200px; justify-content: flex-start; align-items: flex-start">
+  <toolbarbutton type="menu" id="toolbarmenu" style="height: 200px; -moz-box-pack: start; -moz-box-align: start">
     <menupopup id="menupopup" onpopupshowing="eventReceived('popupshowing'); return false;"/>
     <stack style="pointer-events: none">
       <button style="pointer-events: auto; width: 100px; height: 30px; margin-left: 0; margin-top: 0;" allowevents="true"
diff --git a/toolkit/content/tests/chrome/test_tree_hier.xhtml b/toolkit/content/tests/chrome/test_tree_hier.xhtml
index fd4198c8047f..5c91d1bfb4ae 100644
--- a/toolkit/content/tests/chrome/test_tree_hier.xhtml
+++ b/toolkit/content/tests/chrome/test_tree_hier.xhtml
@@ -16,7 +16,7 @@
   <treecols>
     <treecol id="name" label="Name" primary="true"
              sort="label" properties="one two" flex="1"/>
-    <treecol id="address" label="Address" style="flex-grow: 2; flex-shrink: 2"/>
+    <treecol id="address" label="Address" style="-moz-box-flex: 2"/>
     <treecol id="planet" label="Planet" flex="1"/>
     <treecol id="gender" label="Gender" flex="1" cycler="true"/>
   </treecols>
diff --git a/toolkit/content/tests/widgets/tree_shared.js b/toolkit/content/tests/widgets/tree_shared.js
index c65e03810bb3..fad5737e3ea9 100644
--- a/toolkit/content/tests/widgets/tree_shared.js
+++ b/toolkit/content/tests/widgets/tree_shared.js
@@ -1811,8 +1811,8 @@ function getSortedColumnArray(aTree) {
   }
 
   array.sort(function(a, b) {
-    var o1 = parseInt(a.element.style.order);
-    var o2 = parseInt(b.element.style.order);
+    var o1 = parseInt(a.element.style.MozBoxOrdinalGroup);
+    var o2 = parseInt(b.element.style.MozBoxOrdinalGroup);
     return o1 - o2;
   });
   return array;
diff --git a/toolkit/content/widgets/tree.js b/toolkit/content/widgets/tree.js
index b61244b3d22a..9da3f635fffe 100644
--- a/toolkit/content/widgets/tree.js
+++ b/toolkit/content/widgets/tree.js
@@ -234,7 +234,7 @@
       menuitem.addEventListener("command", e => {
         let tree = this.parentNode.parentNode;
         tree.stopEditing(true);
-        this.style.order = "";
+        this.style.MozBoxOrdinalGroup = "";
         tree._ensureColumnOrder(tree.NATURAL_ORDER);
         e.preventDefault();
       });
@@ -394,7 +394,7 @@
       this.appendChild(this.constructor.fragment);
       this.initializeAttributeInheritance();
       if (this.hasAttribute("ordinal")) {
-        this.style.order = this.getAttribute("ordinal");
+        this.style.MozBoxOrdinalGroup = this.getAttribute("ordinal");
       }
 
       this._resizeObserver = new ResizeObserver(() => {
@@ -413,12 +413,12 @@
     }
 
     set ordinal(val) {
-      this.style.order = val;
+      this.style.MozBoxOrdinalGroup = val;
       this.setAttribute("ordinal", val);
     }
 
     get ordinal() {
-      var val = this.style.order;
+      var val = this.style.MozBoxOrdinalGroup;
       if (val == "") {
         return "1";
       }
@@ -1186,7 +1186,7 @@
         // they are in between columns
         var splitters = this.getElementsByTagName("splitter");
         for (let i = 0; i < splitters.length; ++i) {
-          splitters[i].style.order = (i + 1) * 2;
+          splitters[i].style.MozBoxOrdinalGroup = (i + 1) * 2;
         }
       }
     }
diff --git a/toolkit/content/widgets/wizard.js b/toolkit/content/widgets/wizard.js
index 1b761ab3f425..646fcf78de53 100644
--- a/toolkit/content/widgets/wizard.js
+++ b/toolkit/content/widgets/wizard.js
@@ -66,7 +66,7 @@
         <html:link rel="stylesheet" href="chrome://global/skin/button.css"/>
         <html:link rel="stylesheet" href="chrome://global/skin/wizard.css"/>
         <hbox class="wizard-header"></hbox>
-        <html:slot name="wizardpage" class="wizard-page-box" style="display: grid; flex: 1;"/>
+        <html:slot name="wizardpage" class="wizard-page-box" style="display: grid; -moz-box-flex: 1;"/>
         <html:slot/>
         <wizard-buttons class="wizard-buttons"></wizard-buttons>
     `)
diff --git a/toolkit/content/xul.css b/toolkit/content/xul.css
index 28f45aa392fe..618c2db1b671 100644
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -17,12 +17,8 @@
 
 * {
   -moz-user-focus: ignore;
-  display: flex;
+  display: -moz-box;
   box-sizing: border-box;
-  /* By default XUL content isn't allowed to shrink. This is legacy (result of
-   * -moz-box-flex defaulting to zero) and could be removed with some amount of
-   * effort. */
-  flex-shrink: 0;
 }
 
 /* hide the content and destroy the frame */
@@ -40,7 +36,7 @@
  */
 *|*:root {
   --animation-easing-function: cubic-bezier(.07, .95, 0, 1);
-  flex: 1;
+  -moz-box-flex: 1;
   -moz-box-collapse: legacy;
 }
 
@@ -133,13 +129,13 @@ tab:focus {
 
 window {
   overflow: clip;
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 /******** box *******/
 
 vbox {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 /********** label **********/
@@ -159,12 +155,12 @@ label html|span.accesskey {
 
 description:where([value]) {
   /* Preserves legacy behavior, maybe could be removed */
-  display: flex;
+  display: -moz-box;
 }
 
 label:where([value]) {
   /* Preserves legacy behavior, maybe could be removed */
-  display: inline-flex;
+  display: -moz-inline-box;
 }
 
 :is(label, description)[value] {
@@ -215,8 +211,8 @@ label[value=""]::before {
 /********** toolbarbutton **********/
 
 toolbarbutton {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 toolbarbutton.tabbable {
@@ -284,7 +280,7 @@ browser {
 
 /*********** popup notification ************/
 popupnotification {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 .popup-notification-menubutton:not([label]) {
@@ -294,13 +290,13 @@ popupnotification {
 /********** radio **********/
 
 radiogroup {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 /******** groupbox *********/
 
 groupbox {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 /******** draggable elements *********/
@@ -331,7 +327,7 @@ titlebar {
 /******* toolbar *******/
 
 toolbox {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 @media (-moz-platform: macos) {
@@ -342,7 +338,7 @@ toolbox {
 }
 
 toolbarspring {
-  flex: 1000 1000;
+  -moz-box-flex: 1000;
 }
 
 /********* menu ***********/
@@ -352,14 +348,14 @@ menubar > menu:empty {
 }
 
 .menu-text {
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 /********* menupopup, panel, & tooltip ***********/
 
 menupopup,
 panel {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 menupopup,
@@ -378,7 +374,7 @@ tooltip {
   -moz-default-appearance: tooltip;
   -moz-font-smoothing-background-color: -moz-mac-tooltip;
 
-  flex-direction: column;
+  -moz-box-orient: vertical;
   white-space: pre-wrap;
 
   background-color: InfoBackground;
@@ -513,16 +509,16 @@ panel[type="arrow"][animating] {
 /******** tree ******/
 
 treecolpicker {
-  order: 2147483646;
+  -moz-box-ordinal-group: 2147483646;
 }
 
 treechildren {
-  display: flex;
-  flex: 1;
+  display: -moz-box;
+  -moz-box-flex: 1;
 }
 
 tree {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 tree[hidecolumnpicker="true"] treecolpicker {
@@ -531,14 +527,11 @@ tree[hidecolumnpicker="true"] treecolpicker {
 
 treecol {
   min-width: 16px;
-  /* This preserves the behavior of -moz-box-ordinal-group. To change this we'd
-   * need to migrate the persisted ordinal values etc. */
-  order: 1;
 }
 
 treecol[hidden="true"] {
   visibility: collapse;
-  display: flex;
+  display: -moz-box;
 }
 
 /* ::::: lines connecting cells ::::: */
@@ -595,7 +588,7 @@ stack > *|*:not(:-moz-native-anonymous) {
 /********** tabbox *********/
 
 tabbox {
-  flex-direction: column;
+  -moz-box-orient: vertical;
   min-height: 0;
 }
 
@@ -604,12 +597,12 @@ tabpanels {
 }
 
 tabs {
-  flex-direction: row;
+  -moz-box-orient: horizontal;
 }
 
 tab {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 /********** tooltip *********/
@@ -623,11 +616,10 @@ tooltip[titletip="true"] {
  ********** to an insertion point parent that holds the real kids **************/
 
 .box-inherit {
-  align-items: inherit;
-  justify-content: inherit;
-  flex-grow: inherit;
-  flex-shrink: inherit;
-  flex-direction: inherit;
+  -moz-box-orient: inherit;
+  -moz-box-pack: inherit;
+  -moz-box-align: inherit;
+  -moz-box-direction: inherit;
 }
 
 /********** textbox **********/
@@ -646,12 +638,12 @@ search-textbox {
 .autocomplete-richlistbox {
   -moz-user-focus: ignore;
   overflow-x: hidden !important;
-  flex: 1;
+  -moz-box-flex: 1;
 }
 
 .autocomplete-richlistitem {
-  flex-direction: column;
-  align-items: center;
+  -moz-box-orient: vertical;
+  -moz-box-align: center;
   overflow: clip;
 }
 
@@ -686,7 +678,7 @@ menulist[popuponly] {
   min-width: 8px;
   appearance: none !important;
   border: none !important;
-  order: 2147483646;
+  -moz-box-ordinal-group: 2147483646;
   z-index: 2147483646;
 }
 
@@ -721,15 +713,15 @@ stringbundleset {
 /********** dialog **********/
 
 dialog {
-  flex: 1;
-  flex-direction: column;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
 }
 
 /********** wizard **********/
 
 wizard {
-  flex: 1;
-  flex-direction: column;
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
   contain: inline-size;
   min-width: 40em;
   min-height: 30em;
@@ -745,14 +737,14 @@ wizard > wizardpage:not(.selected) {
 }
 
 wizardpage {
-  flex-direction: column;
+  -moz-box-orient: vertical;
   overflow: auto;
 }
 
 /********** Rich Listbox ********/
 
 richlistbox {
-  flex-direction: column;
+  -moz-box-orient: vertical;
   overflow: auto;
   min-width: 0;
   min-height: 0;
@@ -766,7 +758,7 @@ findbar {
 
 /* Some elements that in HTML blocks should be inline-level by default */
 button, image {
-  display: inline-flex;
+  display: -moz-inline-box;
 }
 
 .menu-iconic-highlightable-text:not([highlightable="true"]),
@@ -774,18 +766,18 @@ button, image {
   display: none;
 }
 
-[orient="vertical"] { flex-direction: column !important; }
-[orient="horizontal"] { flex-direction: row !important; }
+[orient="vertical"] { -moz-box-orient: vertical !important; }
+[orient="horizontal"] { -moz-box-orient: horizontal !important; }
 
-[align="start"] { align-items: flex-start !important; }
-[align="center"] { align-items: center !important; }
-[align="end"] { align-items: flex-end !important; }
-[align="baseline"] { align-items: baseline !important; }
-[align="stretch"] { align-items: stretch !important; }
+[align="start"] { -moz-box-align: start !important; }
+[align="center"] { -moz-box-align: center !important; }
+[align="end"] { -moz-box-align: end !important; }
+[align="baseline"] { -moz-box-align: baseline !important; }
+[align="stretch"] { -moz-box-align: stretch !important; }
 
-[pack="start"] { justify-content: start !important; }
-[pack="center"] { justify-content: center !important; }
-[pack="end"] { justify-content: flex-end !important; }
+[pack="start"] { -moz-box-pack: start !important; }
+[pack="center"] { -moz-box-pack: center !important; }
+[pack="end"] { -moz-box-pack: end !important; }
 
-[flex="0"] { flex: none !important; }
-[flex="1"] { flex-grow: 1 !important; flex-shrink: 1 !important }
+[flex="0"] { -moz-box-flex: 0 !important; }
+[flex="1"] { -moz-box-flex: 1 !important; }
diff --git a/toolkit/modules/FinderHighlighter.sys.mjs b/toolkit/modules/FinderHighlighter.sys.mjs
index 71f2bb784eeb..425146646af6 100644
--- a/toolkit/modules/FinderHighlighter.sys.mjs
+++ b/toolkit/modules/FinderHighlighter.sys.mjs
@@ -67,7 +67,7 @@ const kModalStyles = {
     ["border-radius", `${kOutlineBoxBorderRadius}px`],
     ["box-shadow", `0 2px 0 0 rgba(0,0,0,.1)`],
     ["color", "#000"],
-    ["display", "flex"],
+    ["display", "-moz-box"],
     [
       "margin",
       `-${kOutlineBoxBorderSize}px 0 0 -${kOutlineBoxBorderSize}px !important`,
diff --git a/toolkit/mozapps/preferences/changemp.xhtml b/toolkit/mozapps/preferences/changemp.xhtml
index ba8c444b65b4..424888b77214 100644
--- a/toolkit/mozapps/preferences/changemp.xhtml
+++ b/toolkit/mozapps/preferences/changemp.xhtml
@@ -47,7 +47,7 @@
     </hbox>
   </vbox>
 
-  <html:label for="pwmeter" style="display: flex;" data-l10n-id="set-password-meter"></html:label>
+  <html:label for="pwmeter" style="display: -moz-box;" data-l10n-id="set-password-meter"></html:label>
   <html:progress id="pwmeter" value="0" max="100"/>
 
   <description control="pw2" class="header" data-l10n-id="primary-password-warning"></description>
diff --git a/toolkit/themes/linux/global/menu.css b/toolkit/themes/linux/global/menu.css
index 3488b37a0d99..ae67135d0870 100644
--- a/toolkit/themes/linux/global/menu.css
+++ b/toolkit/themes/linux/global/menu.css
@@ -22,7 +22,7 @@ menuitem,
 menucaption {
   appearance: auto;
   -moz-default-appearance: menuitem;
-  align-items: center;
+  -moz-box-align: center;
   padding: 4px 6px;
   max-width: 42em;
   list-style-image: none;
@@ -112,7 +112,7 @@ menulist > menupopup > :is(menuitem, menucaption, menu) {
 }
 
 .menu-accel-container {
-  justify-content: flex-end;
+  -moz-box-pack: end;
 }
 
 .menu-iconic-left {
diff --git a/toolkit/themes/linux/global/menulist.css b/toolkit/themes/linux/global/menulist.css
index 51170786200f..fbaa50b9c386 100644
--- a/toolkit/themes/linux/global/menulist.css
+++ b/toolkit/themes/linux/global/menulist.css
@@ -37,8 +37,8 @@ label {
 #label-box[native] {
   appearance: auto;
   -moz-default-appearance: menulist-text;
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   color: inherit;
 }
 
diff --git a/toolkit/themes/linux/global/popup.css b/toolkit/themes/linux/global/popup.css
index b17c4e21e4ca..61483db4a261 100644
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@@ -37,8 +37,7 @@ menupopup > menu > menupopup {
 }
 
 :is(panel, menupopup)::part(content) {
-  display: flex;
-  /* TODO: Remove -moz-box-flex once bug 1809084 lands */
+  display: -moz-box;
   -moz-box-flex: 1;
   padding: var(--panel-padding);
   color: var(--panel-color);
@@ -54,7 +53,7 @@ menupopup > menu > menupopup {
 }
 
 :is(panel, menupopup)[orient=vertical]::part(content) {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 panel[type="arrow"].panel-no-padding::part(content) {
diff --git a/toolkit/themes/linux/global/radio.css b/toolkit/themes/linux/global/radio.css
index c7ce72053172..2da8b45877b9 100644
--- a/toolkit/themes/linux/global/radio.css
+++ b/toolkit/themes/linux/global/radio.css
@@ -13,7 +13,7 @@
 radio {
   appearance: auto;
   -moz-default-appearance: radio-container;
-  align-items: center;
+  -moz-box-align: center;
   margin: 2px 4px;
 }
 
diff --git a/toolkit/themes/linux/global/splitter.css b/toolkit/themes/linux/global/splitter.css
index 75f829fa31d4..312e72272d63 100644
--- a/toolkit/themes/linux/global/splitter.css
+++ b/toolkit/themes/linux/global/splitter.css
@@ -13,8 +13,8 @@
 splitter {
   appearance: auto;
   -moz-default-appearance: splitter;
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   cursor: ew-resize;
 }
 
diff --git a/toolkit/themes/linux/mozapps/update/updates.css b/toolkit/themes/linux/mozapps/update/updates.css
index 17dfd1730c82..77e69e46cda1 100644
--- a/toolkit/themes/linux/mozapps/update/updates.css
+++ b/toolkit/themes/linux/mozapps/update/updates.css
@@ -60,7 +60,7 @@ update {
 }
 
 .update-label-column {
-  align-items: flex-end;
+  -moz-box-align: end;
 }
 
 .update-type {
@@ -80,10 +80,10 @@ update {
 
 #historyItems .update {
   padding: 5px;
-  display: flex;
-  flex-direction: column;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
 
 .update-name {
-  flex: 1;
+  -moz-box-flex: 1;
 }
diff --git a/toolkit/themes/osx/global/menu.css b/toolkit/themes/osx/global/menu.css
index 72d5539770a8..ab6066a70f8d 100644
--- a/toolkit/themes/osx/global/menu.css
+++ b/toolkit/themes/osx/global/menu.css
@@ -12,7 +12,7 @@ menucaption {
   appearance: auto;
   -moz-default-appearance: menuitem;
   -moz-font-smoothing-background-color: -moz-mac-menuitem;
-  align-items: center;
+  -moz-box-align: center;
   list-style-image: none;
   padding: 2px 21px;
 }
@@ -69,7 +69,7 @@ menuitem[image] > .menu-iconic-left > .menu-iconic-icon {
 .menu-right,
 .menu-accel-container {
   margin-inline: 21px -9px;
-  justify-content: flex-end;
+  -moz-box-pack: end;
 }
 
 .menu-right {
diff --git a/toolkit/themes/osx/global/menulist.css b/toolkit/themes/osx/global/menulist.css
index 5fa73182b4ba..d2b1fbbf77d6 100644
--- a/toolkit/themes/osx/global/menulist.css
+++ b/toolkit/themes/osx/global/menulist.css
@@ -33,8 +33,8 @@ label:not([native]) {
 #label-box[native] {
   appearance: auto;
   -moz-default-appearance: menulist-text;
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   margin-bottom: 1px;
 }
 
diff --git a/toolkit/themes/osx/global/popup.css b/toolkit/themes/osx/global/popup.css
index dbaf5ff5f208..7b8440490e5d 100644
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -45,8 +45,7 @@ panel[titlebar] {
 }
 
 :is(panel, menupopup)::part(content) {
-  display: flex;
-  /* TODO: Remove -moz-box-flex once bug 1809084 lands */
+  display: -moz-box;
   -moz-box-flex: 1;
   -moz-font-smoothing-background-color: var(--panel-background, -moz-mac-menupopup);
   background: var(--panel-background);
@@ -61,7 +60,7 @@ panel[titlebar] {
 }
 
 :is(panel, menupopup)[orient=vertical]::part(content) {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 :is(panel, menupopup)[type="arrow"]::part(content) {
diff --git a/toolkit/themes/osx/global/radio.css b/toolkit/themes/osx/global/radio.css
index 9f3a9e670dc8..2b291773ac20 100644
--- a/toolkit/themes/osx/global/radio.css
+++ b/toolkit/themes/osx/global/radio.css
@@ -12,7 +12,7 @@ radiogroup {
 radio {
   appearance: auto;
   -moz-default-appearance: radio-container;
-  align-items: center;
+  -moz-box-align: center;
   margin: 4px 2px;
   -moz-user-focus: ignore;
 }
diff --git a/toolkit/themes/osx/global/splitter.css b/toolkit/themes/osx/global/splitter.css
index 8718ddc3d8c9..8a9680851c8d 100644
--- a/toolkit/themes/osx/global/splitter.css
+++ b/toolkit/themes/osx/global/splitter.css
@@ -7,8 +7,8 @@
 /* ::::: splitter (vertical) ::::: */
 
 splitter {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   cursor: ew-resize;
   min-width: 9px;
   min-height: 9px;
diff --git a/toolkit/themes/osx/global/tabbox.css b/toolkit/themes/osx/global/tabbox.css
index f08bbe1eca23..00609257e830 100644
--- a/toolkit/themes/osx/global/tabbox.css
+++ b/toolkit/themes/osx/global/tabbox.css
@@ -21,7 +21,7 @@ tabpanels {
 }
 
 tabs {
-  align-items: center;
+  -moz-box-align: center;
   font: menu;
   padding: 0 10px;
   margin-bottom: -12px;
@@ -60,5 +60,5 @@ tab:where([visuallyselected="true"]:not(:-moz-window-inactive)) {
 
 .tabs-left,
 .tabs-right  {
-  flex: 1;
+  -moz-box-flex: 1;
 }
diff --git a/toolkit/themes/osx/mozapps/downloads/unknownContentType.css b/toolkit/themes/osx/mozapps/downloads/unknownContentType.css
index 96145f1f2c12..100c8509b09b 100644
--- a/toolkit/themes/osx/mozapps/downloads/unknownContentType.css
+++ b/toolkit/themes/osx/mozapps/downloads/unknownContentType.css
@@ -16,7 +16,7 @@ description {
 }
 
 #type {
-  flex: 1;
+  -moz-box-flex: 1;
   background-color: transparent;
   color: inherit;
 }
diff --git a/toolkit/themes/osx/mozapps/handling/handling.css b/toolkit/themes/osx/mozapps/handling/handling.css
index 1f18f18ba549..bea9212b1b2a 100644
--- a/toolkit/themes/osx/mozapps/handling/handling.css
+++ b/toolkit/themes/osx/mozapps/handling/handling.css
@@ -8,7 +8,7 @@ richlistitem[type] {
  }
 
 richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 richlistbox {
diff --git a/toolkit/themes/osx/mozapps/update/updates.css b/toolkit/themes/osx/mozapps/update/updates.css
index 3f8fb569fcb1..eee3db4450ab 100644
--- a/toolkit/themes/osx/mozapps/update/updates.css
+++ b/toolkit/themes/osx/mozapps/update/updates.css
@@ -75,7 +75,7 @@ update {
 }
 
 .update-label-column {
-  align-items: flex-end;
+  -moz-box-align: end;
 }
 
 .update-type {
@@ -95,10 +95,10 @@ update {
 
 #historyItems .update {
   padding: 5px;
-  display: flex;
-  flex-direction: column;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
 
 .update-name {
-  flex: 1;
+  -moz-box-flex: 1;
 }
diff --git a/toolkit/themes/shared/alert.css b/toolkit/themes/shared/alert.css
index e4c86fe15a99..af50381f17a7 100644
--- a/toolkit/themes/shared/alert.css
+++ b/toolkit/themes/shared/alert.css
@@ -145,14 +145,14 @@
 }
 
 .alertTitle {
-  flex: 1;
+  -moz-box-flex: 1;
   font-weight: bold;
   padding: 6px 8px 0;
   width: 255px;
 }
 
 #alertFooter {
-  align-items: flex-start;
+  -moz-box-align: start;
 }
 
 #alertBox:not([hasOrigin]) > box > #alertTextBox,
@@ -161,7 +161,7 @@
 }
 
 #alertSourceLabel {
-  flex: 1;
+  -moz-box-flex: 1;
   font-size: 83.334%;
   color: GrayText;
 }
diff --git a/toolkit/themes/shared/appPicker.css b/toolkit/themes/shared/appPicker.css
index aa4b905797a7..b132a26bd5b1 100644
--- a/toolkit/themes/shared/appPicker.css
+++ b/toolkit/themes/shared/appPicker.css
@@ -16,7 +16,7 @@
 }
 
 #app-picker-listbox > richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 #content-icon,
diff --git a/toolkit/themes/shared/checkbox.css b/toolkit/themes/shared/checkbox.css
index 725c995a4d41..a4bda91c1db6 100644
--- a/toolkit/themes/shared/checkbox.css
+++ b/toolkit/themes/shared/checkbox.css
@@ -7,7 +7,7 @@
 
 checkbox {
   appearance: none;
-  align-items: center;
+  -moz-box-align: center;
   margin: 4px 2px;
 }
 
@@ -95,7 +95,7 @@ checkbox:not([native]):focus-visible > .checkbox-check {
   checkbox:where([native]) {
     appearance: auto;
     -moz-default-appearance: checkbox-container;
-    align-items: center;
+    -moz-box-align: center;
     margin: 2px 4px;
     padding-top: 1px;
     padding-bottom: 1px;
@@ -131,7 +131,7 @@ checkbox:not([native]):focus-visible > .checkbox-check {
   .checkbox-check[native] {
     appearance: auto;
     -moz-default-appearance: checkbox;
-    align-items: center;
+    -moz-box-align: center;
     margin-inline-end: 5px;
   }
 }
@@ -140,7 +140,7 @@ checkbox:not([native]):focus-visible > .checkbox-check {
   checkbox:where([native]) {
     appearance: auto;
     -moz-default-appearance: checkbox-container;
-    align-items: center;
+    -moz-box-align: center;
     margin: 4px 2px;
   }
 
@@ -173,7 +173,7 @@ checkbox:not([native]):focus-visible > .checkbox-check {
   checkbox:where([native]) {
     appearance: auto;
     -moz-default-appearance: checkbox-container;
-    align-items: center;
+    -moz-box-align: center;
     margin: 2px 4px;
   }
 
diff --git a/toolkit/themes/shared/findbar.css b/toolkit/themes/shared/findbar.css
index 95915e60f584..2db1e5e79f48 100644
--- a/toolkit/themes/shared/findbar.css
+++ b/toolkit/themes/shared/findbar.css
@@ -16,7 +16,7 @@ findbar {
 
 findbar[hidden] {
   /* Override display:none to make the transition work. */
-  display: flex;
+  display: -moz-box;
   visibility: collapse;
   margin-bottom: -1em;
   opacity: 0;
diff --git a/toolkit/themes/shared/in-content/common-shared.css b/toolkit/themes/shared/in-content/common-shared.css
index ed06414254a2..c88471068bca 100644
--- a/toolkit/themes/shared/in-content/common-shared.css
+++ b/toolkit/themes/shared/in-content/common-shared.css
@@ -579,7 +579,7 @@ xul|menulist::part(dropmarker) {
   border: none;
   background-color: transparent;
   list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg");
-  align-items: center;
+  -moz-box-align: center;
   -moz-context-properties: fill;
   fill: currentColor;
 }
@@ -1073,7 +1073,7 @@ html|*#categories[last-input-type="mouse"] > html|button.category:focus-visible
   margin-inline-end: 4px; /* add the 4px end-margin of other elements */
   margin-bottom: 15px;
   padding-bottom: 15px;
-  align-items: baseline;
+  -moz-box-align: baseline;
 }
 
 .header-name {
@@ -1258,7 +1258,7 @@ xul|treechildren::-moz-tree-image(selected) {
   background-color: var(--in-content-box-info-background);
   border-radius: 4px;
   min-height: 32px;
-  align-items: center;
+  -moz-box-align: center;
   padding: 4px;
 }
 
@@ -1378,8 +1378,8 @@ input[type="text"][warning]:enabled:not(:focus) {
 }
 
 xul|*.sidebar-footer-link {
-  display: flex;
-  align-items: center;
+  display: -moz-box;
+  -moz-box-align: center;
 }
 
 .sidebar-footer-link:hover {
@@ -1417,7 +1417,7 @@ xul|*.sidebar-footer-link {
 @media (max-width: 830px) {
   .sidebar-footer-list {
     margin-inline-start: 40px;
-    align-items: flex-start;
+    -moz-box-align: start;
   }
 
   .sidebar-footer-link {
diff --git a/toolkit/themes/shared/menulist-shared.css b/toolkit/themes/shared/menulist-shared.css
index b775b66cbf37..e67094fc2152 100644
--- a/toolkit/themes/shared/menulist-shared.css
+++ b/toolkit/themes/shared/menulist-shared.css
@@ -43,8 +43,8 @@
 }
 
 #label-box:not([native]) {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   font-weight: 600;
 }
 
@@ -53,7 +53,7 @@ dropmarker {
 }
 
 dropmarker:not([native]) {
-  display: flex;
+  display: -moz-box;
   appearance: none;
   width: 12px;
   height: unset;
diff --git a/toolkit/themes/shared/popupnotification.css b/toolkit/themes/shared/popupnotification.css
index e188d2903901..1c0790075484 100644
--- a/toolkit/themes/shared/popupnotification.css
+++ b/toolkit/themes/shared/popupnotification.css
@@ -17,8 +17,7 @@
 .popup-notification-panel > popupnotification:not([hidden]) {
   /* Since the anonymous parent (::part(content)) has display: flex, sizing
    * computations work better with display: block; than with the XUL default
-   * display: flex;
-   * TODO(emilio): we can probably remove this. */
+   * display: -moz-box; */
   display: block;
 }
 
@@ -112,7 +111,7 @@ popupnotificationcontent {
 .popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
   /* This is to override the linux !important */
   appearance: none !important;
-  display: flex;
+  display: -moz-box;
   padding: 0;
   margin: 0;
 }
diff --git a/toolkit/themes/shared/search-textbox.css b/toolkit/themes/shared/search-textbox.css
index 7b23d9b338b7..7c6c2710b529 100644
--- a/toolkit/themes/shared/search-textbox.css
+++ b/toolkit/themes/shared/search-textbox.css
@@ -33,7 +33,7 @@ input {
   font: inherit;
   text-shadow: inherit;
   box-sizing: border-box;
-  flex: 1;
+  -moz-box-flex: 1;
   text-align: inherit;
   min-width: 0;
 }
diff --git a/toolkit/themes/shared/tree.css b/toolkit/themes/shared/tree.css
index 5632a360399f..f02aed5a4e80 100644
--- a/toolkit/themes/shared/tree.css
+++ b/toolkit/themes/shared/tree.css
@@ -121,8 +121,8 @@ treecol,
 .tree-columnpicker-button {
   appearance: auto;
   -moz-default-appearance: treeheadercell;
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   color: -moz-ColHeaderText;
   padding: 0 4px;
   margin: 0;
@@ -219,7 +219,7 @@ html|input.tree-input {
   top: 0;
   left: 0;
   appearance: none;
-  flex: 1;
+  -moz-box-flex: 1;
   border: 0;
   border-radius: 2px;
   outline: var(--focus-outline);
diff --git a/toolkit/themes/windows/global/menu.css b/toolkit/themes/windows/global/menu.css
index 7b2f345269a7..fd3ff43d1828 100644
--- a/toolkit/themes/windows/global/menu.css
+++ b/toolkit/themes/windows/global/menu.css
@@ -22,7 +22,7 @@ menuitem,
 menucaption {
   appearance: auto;
   -moz-default-appearance: menuitem;
-  align-items: center;
+  -moz-box-align: center;
   list-style-image: none;
 }
 
diff --git a/toolkit/themes/windows/global/menulist.css b/toolkit/themes/windows/global/menulist.css
index 44198fb6f0f0..2c33e0b44ab4 100644
--- a/toolkit/themes/windows/global/menulist.css
+++ b/toolkit/themes/windows/global/menulist.css
@@ -26,8 +26,8 @@ label {
 /* Label box */
 
 #label-box[native] {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
 }
 
 :host([native]:not([open="true"]):focus) > #label-box {
diff --git a/toolkit/themes/windows/global/popup.css b/toolkit/themes/windows/global/popup.css
index f3b153d279f7..e54ced7e9c51 100644
--- a/toolkit/themes/windows/global/popup.css
+++ b/toolkit/themes/windows/global/popup.css
@@ -77,8 +77,7 @@ menupopup > menu > menupopup {
 }
 
 :is(panel, menupopup)::part(content) {
-  display: flex;
-  /* TODO: Remove -moz-box-flex once bug 1809084 lands */
+  display: -moz-box;
   -moz-box-flex: 1;
   padding: var(--panel-padding);
   margin: var(--panel-shadow-margin);
@@ -93,7 +92,7 @@ menupopup > menu > menupopup {
 }
 
 :is(panel, menupopup)[orient=vertical]::part(content) {
-  flex-direction: column;
+  -moz-box-orient: vertical;
 }
 
 panel[type="arrow"].panel-no-padding::part(content) {
diff --git a/toolkit/themes/windows/global/radio.css b/toolkit/themes/windows/global/radio.css
index 56c792fc49ed..8e8813a5eea9 100644
--- a/toolkit/themes/windows/global/radio.css
+++ b/toolkit/themes/windows/global/radio.css
@@ -13,7 +13,7 @@
 radio {
   appearance: auto;
   -moz-default-appearance: radio-container;
-  align-items: center;
+  -moz-box-align: center;
   margin: 2px 4px;
   padding-top: 1px;
   padding-bottom: 1px;
diff --git a/toolkit/themes/windows/global/splitter.css b/toolkit/themes/windows/global/splitter.css
index 0baa8e7b8c2b..15e7e9241d57 100644
--- a/toolkit/themes/windows/global/splitter.css
+++ b/toolkit/themes/windows/global/splitter.css
@@ -11,8 +11,8 @@
 /* ::::: splitter (vertical) ::::: */
 
 splitter {
-  align-items: center;
-  justify-content: center;
+  -moz-box-align: center;
+  -moz-box-pack: center;
   cursor: ew-resize;
   border-width: 0 1px;
   border-style: solid;
diff --git a/toolkit/themes/windows/mozapps/downloads/unknownContentType.css b/toolkit/themes/windows/mozapps/downloads/unknownContentType.css
index 53e2f0ce00f6..1cd71418a0c0 100644
--- a/toolkit/themes/windows/mozapps/downloads/unknownContentType.css
+++ b/toolkit/themes/windows/mozapps/downloads/unknownContentType.css
@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #type {
-  flex: 1;
+  -moz-box-flex: 1;
   background-color: transparent;
   color: inherit;
 }
diff --git a/toolkit/themes/windows/mozapps/handling/handling.css b/toolkit/themes/windows/mozapps/handling/handling.css
index 1f18f18ba549..bea9212b1b2a 100644
--- a/toolkit/themes/windows/mozapps/handling/handling.css
+++ b/toolkit/themes/windows/mozapps/handling/handling.css
@@ -8,7 +8,7 @@ richlistitem[type] {
  }
 
 richlistitem {
-  align-items: center;
+  -moz-box-align: center;
 }
 
 richlistbox {
diff --git a/toolkit/themes/windows/mozapps/update/updates.css b/toolkit/themes/windows/mozapps/update/updates.css
index f99070979c97..ab95e5329e1b 100644
--- a/toolkit/themes/windows/mozapps/update/updates.css
+++ b/toolkit/themes/windows/mozapps/update/updates.css
@@ -60,7 +60,7 @@ update {
 }
 
 .update-label-column {
-  align-items: flex-end;
+  -moz-box-align: end;
 }
 
 .update-type {
@@ -80,10 +80,10 @@ update {
 
 #historyItems .update {
   padding: 5px;
-  display: flex;
-  flex-direction: column;
+  display: -moz-box;
+  -moz-box-orient: vertical;
 }
 
 .update-name {
-  flex: 1;
+  -moz-box-flex: 1;
 }