diff --git a/servo/components/layout/incremental.rs b/servo/components/layout/incremental.rs
index e0c5d8042951..a95a60e002a1 100644
--- a/servo/components/layout/incremental.rs
+++ b/servo/components/layout/incremental.rs
@@ -220,8 +220,15 @@ pub fn compute_damage(old: Option<&Arc<ServoComputedValues>>, new: &ServoCompute
         get_inheritedtable.border_spacing,
         get_column.column_gap,
         get_position.flex_direction,
+        get_position.flex_wrap,
+        get_position.justify_content,
+        get_position.align_items,
+        get_position.align_content,
+        get_position.order,
         get_position.flex_basis,
-        get_position.order
+        get_position.flex_grow,
+        get_position.flex_shrink,
+        get_position.align_self
     ]) || add_if_not_equal!(old, new, damage,
                             [ REPAINT, STORE_OVERFLOW, REFLOW_OUT_OF_FLOW ], [
         get_position.top, get_position.left,
diff --git a/servo/components/script/dom/webidls/CSSStyleDeclaration.webidl b/servo/components/script/dom/webidls/CSSStyleDeclaration.webidl
index 567167024ee9..1d1d5223183b 100644
--- a/servo/components/script/dom/webidls/CSSStyleDeclaration.webidl
+++ b/servo/components/script/dom/webidls/CSSStyleDeclaration.webidl
@@ -310,7 +310,21 @@ partial interface CSSStyleDeclaration {
 
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexDirection;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-direction;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexWrap;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-wrap;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString justifyContent;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString justify-content;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignItems;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-items;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignContent;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-content;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexBasis;
   [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-basis;
-  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString order;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexGrow;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-grow;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flexShrink;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString flex-shrink;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString alignSelf;
+  [SetterThrows, TreatNullAs=EmptyString] attribute DOMString align-self;
 };
diff --git a/servo/components/style/properties/longhand/position.mako.rs b/servo/components/style/properties/longhand/position.mako.rs
index c4ea596758d7..bc93a6614e56 100644
--- a/servo/components/style/properties/longhand/position.mako.rs
+++ b/servo/components/style/properties/longhand/position.mako.rs
@@ -63,10 +63,34 @@
 // Flex container properties
 ${helpers.single_keyword("flex-direction", "row row-reverse column column-reverse", experimental=True)}
 
-// Flex item properties
-${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", products="gecko")}
+${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", experimental=True)}
 
-${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", products="gecko")}
+// FIXME(stshine): The type of 'justify-content' and 'align-content' is uint16_t in gecko
+// FIXME(stshine): Its higher bytes are used to store fallback value. Disable them in geckolib for now
+${helpers.single_keyword("justify-content", "flex-start flex-end center space-between space-around",
+                         experimental=True,
+                         gecko_constant_prefix="NS_STYLE_JUSTIFY",
+                         products="servo")}
+
+${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline",
+                         experimental=True,
+                         need_clone=True,
+                         gecko_constant_prefix="NS_STYLE_ALIGN")}
+
+${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
+                         experimental=True,
+                         gecko_constant_prefix="NS_STYLE_ALIGN",
+                         products="servo")}
+
+// Flex item properties
+${helpers.predefined_type("flex-grow", "Number", "0.0", "parse_non_negative", experimental=True)}
+
+${helpers.predefined_type("flex-shrink", "Number", "1.0", "parse_non_negative", experimental=True)}
+
+${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
+                         experimental=True,
+                         need_clone=True,
+                         gecko_constant_prefix="NS_STYLE_ALIGN")}
 
 // https://drafts.csswg.org/css-flexbox/#propdef-order
 <%helpers:longhand name="order">
@@ -94,8 +118,6 @@ ${helpers.predefined_type("flex-basis",
                           "LengthOrPercentageOrAutoOrContent",
                           "computed::LengthOrPercentageOrAutoOrContent::Auto")}
 
-${helpers.single_keyword("flex-wrap", "nowrap wrap wrap-reverse", products="gecko")}
-
 ${helpers.predefined_type("width",
                           "LengthOrPercentageOrAuto",
                           "computed::LengthOrPercentageOrAuto::Auto",
diff --git a/servo/components/style/properties/properties.mako.rs b/servo/components/style/properties/properties.mako.rs
index 4f1d6427f677..3d41c30366b0 100644
--- a/servo/components/style/properties/properties.mako.rs
+++ b/servo/components/style/properties/properties.mako.rs
@@ -1166,6 +1166,13 @@ pub mod style_structs {
                 fn outline_has_nonzero_width(&self) -> bool {
                     self.outline_width != ::app_units::Au(0)
                 }
+            % elif style_struct.trait_name == "Position":
+                fn clone_align_items(&self) -> longhands::align_items::computed_value::T {
+                    self.align_items.clone()
+                }
+                fn clone_align_self(&self) -> longhands::align_self::computed_value::T {
+                    self.align_self.clone()
+                }
             % elif style_struct.trait_name == "Text":
                 <% text_decoration_field = 'text_decoration' if product == 'servo' else 'text_decoration_line' %>
                 fn has_underline(&self) -> bool {
@@ -1892,6 +1899,23 @@ pub fn cascade<C: ComputedValues>(
         }
     }
 
+    {
+        use self::style_struct_traits::Position;
+        use computed_values::align_self::T as align_self;
+        use computed_values::align_items::T as align_items;
+        if style.get_position().clone_align_self() == computed_values::align_self::T::auto && !positioned {
+            let self_align =
+                match context.inherited_style.get_position().clone_align_items() {
+                    align_items::stretch => align_self::stretch,
+                    align_items::baseline => align_self::baseline,
+                    align_items::flex_start => align_self::flex_start,
+                    align_items::flex_end => align_self::flex_end,
+                    align_items::center => align_self::center,
+                };
+            style.mutate_position().set_align_self(self_align);
+        }
+    }
+
     // The initial value of border-*-width may be changed at computed value time.
     % for side in ["top", "right", "bottom", "left"]:
         // Like calling to_computed_value, which wouldn't type check.