diff --git a/quartz/components/Flex.tsx b/quartz/components/Flex.tsx
index 1cf151e84..a2865e70c 100644
--- a/quartz/components/Flex.tsx
+++ b/quartz/components/Flex.tsx
@@ -21,9 +21,13 @@ export default ((config: FlexConfig) => {
     const direction = config.direction ?? "row"
     const wrap = config.wrap ?? "nowrap"
     const gap = config.gap ?? "1rem"
+    const displayClass = `${props.displayClass ?? ""} flex-component`
 
     return (
-      <div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
+      <div
+        class={`${displayClass}`}
+        style={`flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}
+      >
         {config.components.map((c) => {
           const grow = c.grow ? 1 : 0
           const shrink = (c.shrink ?? true) ? 1 : 0
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 60d2d8fa7..59366ccd2 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -123,16 +123,32 @@ a {
   }
 }
 
+.flex-component {
+  display: flex;
+}
+
 .desktop-only {
   display: initial;
+  &.flex-component {
+    display: flex;
+  }
   @media all and ($mobile) {
+    &.flex-component {
+      display: none;
+    }
     display: none;
   }
 }
 
 .mobile-only {
   display: none;
+  &.flex-component {
+    display: none;
+  }
   @media all and ($mobile) {
+    &.flex-component {
+      display: flex;
+    }
     display: initial;
   }
 }