--- a/layout/base/nsLayoutUtils.cpp
+++ b/layout/base/nsLayoutUtils.cpp
@@ -233,48 +233,72 @@ WebkitPrefixEnabledPrefChangeCallback(co
 {
   MOZ_ASSERT(strncmp(aPrefName, WEBKIT_PREFIXES_ENABLED_PREF_NAME,
                      ArrayLength(WEBKIT_PREFIXES_ENABLED_PREF_NAME)) == 0,
              "We only registered this callback for a single pref, so it "
              "should only be called for that pref");
 
   static int32_t sIndexOfWebkitBoxInDisplayTable;
   static int32_t sIndexOfWebkitInlineBoxInDisplayTable;
-  static bool sAreWebkitBoxKeywordIndicesInitialized; // initialized to false
+  static int32_t sIndexOfWebkitFlexInDisplayTable;
+  static int32_t sIndexOfWebkitInlineFlexInDisplayTable;
+
+  static bool sAreKeywordIndicesInitialized; // initialized to false
 
   bool isWebkitPrefixSupportEnabled =
     Preferences::GetBool(WEBKIT_PREFIXES_ENABLED_PREF_NAME, false);
-  if (!sAreWebkitBoxKeywordIndicesInitialized) {
-    // First run: find the position of "-webkit-box" and "-webkit-inline-box"
-    // in kDisplayKTable.
+  if (!sAreKeywordIndicesInitialized) {
+    // First run: find the position of the keywords in kDisplayKTable.
     sIndexOfWebkitBoxInDisplayTable =
       nsCSSProps::FindIndexOfKeyword(eCSSKeyword__webkit_box,
                                      nsCSSProps::kDisplayKTable);
     MOZ_ASSERT(sIndexOfWebkitBoxInDisplayTable >= 0,
                "Couldn't find -webkit-box in kDisplayKTable");
     sIndexOfWebkitInlineBoxInDisplayTable =
       nsCSSProps::FindIndexOfKeyword(eCSSKeyword__webkit_inline_box,
                                      nsCSSProps::kDisplayKTable);
     MOZ_ASSERT(sIndexOfWebkitInlineBoxInDisplayTable >= 0,
                "Couldn't find -webkit-inline-box in kDisplayKTable");
-    sAreWebkitBoxKeywordIndicesInitialized = true;
-  }
-
-  // OK -- now, stomp on or restore the "-webkit-box" entries in kDisplayKTable,
-  // depending on whether the webkit prefix pref is enabled vs. disabled.
+
+    sIndexOfWebkitFlexInDisplayTable =
+      nsCSSProps::FindIndexOfKeyword(eCSSKeyword__webkit_flex,
+                                     nsCSSProps::kDisplayKTable);
+    MOZ_ASSERT(sIndexOfWebkitFlexInDisplayTable >= 0,
+               "Couldn't find -webkit-flex in kDisplayKTable");
+    sIndexOfWebkitInlineFlexInDisplayTable =
+      nsCSSProps::FindIndexOfKeyword(eCSSKeyword__webkit_inline_flex,
+                                     nsCSSProps::kDisplayKTable);
+    MOZ_ASSERT(sIndexOfWebkitInlineFlexInDisplayTable >= 0,
+               "Couldn't find -webkit-inline-flex in kDisplayKTable");
+    sAreKeywordIndicesInitialized = true;
+  }
+
+  // OK -- now, stomp on or restore the "-webkit-{box|flex}" entries in
+  // kDisplayKTable, depending on whether the webkit prefix pref is enabled
+  // vs. disabled.
   if (sIndexOfWebkitBoxInDisplayTable >= 0) {
     nsCSSProps::kDisplayKTable[sIndexOfWebkitBoxInDisplayTable].mKeyword =
       isWebkitPrefixSupportEnabled ?
       eCSSKeyword__webkit_box : eCSSKeyword_UNKNOWN;
   }
   if (sIndexOfWebkitInlineBoxInDisplayTable >= 0) {
     nsCSSProps::kDisplayKTable[sIndexOfWebkitInlineBoxInDisplayTable].mKeyword =
       isWebkitPrefixSupportEnabled ?
       eCSSKeyword__webkit_inline_box : eCSSKeyword_UNKNOWN;
   }
+  if (sIndexOfWebkitFlexInDisplayTable >= 0) {
+    nsCSSProps::kDisplayKTable[sIndexOfWebkitFlexInDisplayTable].mKeyword =
+      isWebkitPrefixSupportEnabled ?
+      eCSSKeyword__webkit_flex : eCSSKeyword_UNKNOWN;
+  }
+  if (sIndexOfWebkitInlineFlexInDisplayTable >= 0) {
+    nsCSSProps::kDisplayKTable[sIndexOfWebkitInlineFlexInDisplayTable].mKeyword =
+      isWebkitPrefixSupportEnabled ?
+      eCSSKeyword__webkit_inline_flex : eCSSKeyword_UNKNOWN;
+  }
 }
 
 // When the pref "layout.css.display-contents.enabled" changes, this function is
 // invoked to let us update kDisplayKTable, to selectively disable or restore
 // the entries for "contents" in that table.
 static void
 DisplayContentsEnabledPrefChangeCallback(const char* aPrefName, void* aClosure)
 {

--- a/layout/style/nsCSSKeywordList.h
+++ b/layout/style/nsCSSKeywordList.h
@@ -121,17 +121,19 @@ CSS_KEY(-moz-text, _moz_text)
 CSS_KEY(-moz-use-system-font, _moz_use_system_font)
 CSS_KEY(-moz-use-text-color, _moz_use_text_color)
 CSS_KEY(-moz-visitedhyperlinktext, _moz_visitedhyperlinktext)
 CSS_KEY(-moz-window, _moz_window)
 CSS_KEY(-moz-workspace, _moz_workspace)
 CSS_KEY(-moz-zoom-in, _moz_zoom_in)
 CSS_KEY(-moz-zoom-out, _moz_zoom_out)
 CSS_KEY(-webkit-box, _webkit_box)
+CSS_KEY(-webkit-flex, _webkit_flex)
 CSS_KEY(-webkit-inline-box, _webkit_inline_box)
+CSS_KEY(-webkit-inline-flex, _webkit_inline_flex)
 CSS_KEY(absolute, absolute)
 CSS_KEY(active, active)
 CSS_KEY(activeborder, activeborder)
 CSS_KEY(activecaption, activecaption)
 CSS_KEY(add, add)
 CSS_KEY(additive, additive)
 CSS_KEY(alias, alias)
 CSS_KEY(all, all)

--- a/layout/style/nsCSSProps.cpp
+++ b/layout/style/nsCSSProps.cpp
@@ -1279,19 +1279,21 @@ KTableEntry nsCSSProps::kDisplayKTable[]
   { eCSSKeyword_ruby,                NS_STYLE_DISPLAY_RUBY },
   { eCSSKeyword_ruby_base,           NS_STYLE_DISPLAY_RUBY_BASE },
   { eCSSKeyword_ruby_base_container, NS_STYLE_DISPLAY_RUBY_BASE_CONTAINER },
   { eCSSKeyword_ruby_text,           NS_STYLE_DISPLAY_RUBY_TEXT },
   { eCSSKeyword_ruby_text_container, NS_STYLE_DISPLAY_RUBY_TEXT_CONTAINER },
   // The next two entries are controlled by the layout.css.grid.enabled pref.
   { eCSSKeyword_grid,                NS_STYLE_DISPLAY_GRID },
   { eCSSKeyword_inline_grid,         NS_STYLE_DISPLAY_INLINE_GRID },
-  // The next two entries are controlled by the layout.css.prefixes.webkit pref.
+  // The next 4 entries are controlled by the layout.css.prefixes.webkit pref.
   { eCSSKeyword__webkit_box,         NS_STYLE_DISPLAY_WEBKIT_BOX },
   { eCSSKeyword__webkit_inline_box,  NS_STYLE_DISPLAY_WEBKIT_INLINE_BOX },
+  { eCSSKeyword__webkit_flex,        NS_STYLE_DISPLAY_FLEX },
+  { eCSSKeyword__webkit_inline_flex, NS_STYLE_DISPLAY_INLINE_FLEX },
   // The next entry is controlled by the layout.css.display-contents.enabled
   // pref.
   { eCSSKeyword_contents,            NS_STYLE_DISPLAY_CONTENTS },
   { eCSSKeyword_UNKNOWN,             -1 }
 };
 
 const KTableEntry nsCSSProps::kEmptyCellsKTable[] = {
   { eCSSKeyword_show,                 NS_STYLE_TABLE_EMPTY_CELLS_SHOW },

--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -304,9 +304,10 @@ skip-if = buildapp == 'b2g' || toolkit =
 skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
 [test_visited_lying.html]
 skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
 [test_visited_pref.html]
 skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
 [test_visited_reftests.html]
 skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
 [test_webkit_device_pixel_ratio.html]
+[test_webkit_flex_display.html]
 [test_asyncopen2.html]

new file mode 100644
--- /dev/null
+++ b/layout/style/test/test_webkit_flex_display.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<html>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=1274096
+-->
+<head>
+  <title>Test for Bug 1274096</title>
+  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1274096">Mozilla Bug 1274096</a>
+<div id="content" style="display: none">
+  <div id="testElem"></div>
+</div>
+<script type="text/javascript">
+</script>
+<pre id="test">
+<script class="testbody" type="application/javascript">
+
+/** Test for Bug 1274096 **/
+
+SimpleTest.waitForExplicitFinish();
+SpecialPowers.pushPrefEnv(
+  {"set": [["layout.css.prefixes.webkit", true]]}
+).then(runTest);
+
+function runTest() {
+  testValue("display", "-webkit-flex", "flex");
+  testValue("display", "-webkit-inline-flex", "inline-flex");
+
+  SimpleTest.finish();
+}
+
+function testValue(propName, specifiedVal, serializedVal) {
+  var testElem = document.getElementById("testElem");
+  testElem.style[propName] = specifiedVal;
+
+  is(testElem.style[propName], serializedVal,
+     `CSS '${propName}:${specifiedVal} should serialize as '${serializedVal}'`);
+  is(window.getComputedStyle(testElem, "")[propName], serializedVal,
+     `CSS 'display:${specifiedVal} should compute to '${serializedVal}'`);
+}
+
+</script>
+</pre>
+</body>
+</html>