diff --git a/components/style/properties/longhands/position.mako.rs b/components/style/properties/longhands/position.mako.rs
index 239c2edd5cb..25354ab19af 100644
--- a/components/style/properties/longhands/position.mako.rs
+++ b/components/style/properties/longhands/position.mako.rs
@@ -72,7 +72,8 @@ ${helpers.predefined_type(
 ${helpers.single_keyword(
     "flex-direction",
     "row row-reverse column column-reverse",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     spec="https://drafts.csswg.org/css-flexbox/#flex-direction-property",
     extra_prefixes="webkit",
     animation_value_type="discrete",
@@ -83,7 +84,8 @@ ${helpers.single_keyword(
 ${helpers.single_keyword(
     "flex-wrap",
     "nowrap wrap wrap-reverse",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     spec="https://drafts.csswg.org/css-flexbox/#flex-wrap-property",
     extra_prefixes="webkit",
     animation_value_type="discrete",
@@ -205,7 +207,8 @@ ${helpers.predefined_type(
     "flex-grow",
     "NonNegativeNumber",
     "From::from(0.0)",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     spec="https://drafts.csswg.org/css-flexbox/#flex-grow-property",
     extra_prefixes="webkit",
     animation_value_type="NonNegativeNumber",
@@ -216,7 +219,8 @@ ${helpers.predefined_type(
     "flex-shrink",
     "NonNegativeNumber",
     "From::from(1.0)",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     spec="https://drafts.csswg.org/css-flexbox/#flex-shrink-property",
     extra_prefixes="webkit",
     animation_value_type="NonNegativeNumber",
@@ -278,7 +282,8 @@ ${helpers.predefined_type(
     "flex-basis",
     "FlexBasis",
     "computed::FlexBasis::auto()",
-    engines="gecko servo-2013",
+    engines="gecko servo-2013 servo-2020",
+    servo_2020_pref="layout.flexbox.enabled",
     spec="https://drafts.csswg.org/css-flexbox/#flex-basis-property",
     extra_prefixes="webkit",
     animation_value_type="FlexBasis",
diff --git a/components/style/properties/shorthands/position.mako.rs b/components/style/properties/shorthands/position.mako.rs
index 48e56e6ef3c..ff9b5cd5790 100644
--- a/components/style/properties/shorthands/position.mako.rs
+++ b/components/style/properties/shorthands/position.mako.rs
@@ -5,7 +5,8 @@
 <%namespace name="helpers" file="/helpers.mako.rs" />
 
 <%helpers:shorthand name="flex-flow"
-                    engines="gecko servo-2013"
+                    engines="gecko servo-2013 servo-2020",
+                    servo_2020_pref="layout.flexbox.enabled",
                     sub_properties="flex-direction flex-wrap"
                     extra_prefixes="webkit"
                     derive_serialize="True"
@@ -45,7 +46,8 @@
 </%helpers:shorthand>
 
 <%helpers:shorthand name="flex"
-                    engines="gecko servo-2013"
+                    engines="gecko servo-2013 servo-2020",
+                    servo_2020_pref="layout.flexbox.enabled",
                     sub_properties="flex-grow flex-shrink flex-basis"
                     extra_prefixes="webkit"
                     derive_serialize="True"