--- a/devtools/client/inspector/markup/views/element-container.js
+++ b/devtools/client/inspector/markup/views/element-container.js
@@ -29,47 +29,66 @@ loader.lazyRequireGetter(this, "setEvent
  *         The markup view that owns this container.
  * @param  {NodeFront} node
  *         The node to display.
  */
 function MarkupElementContainer(markupView, node) {
   MarkupContainer.prototype.initialize.call(this, markupView, node,
     "elementcontainer");
 
+  this.onFlexboxHighlighterChange = this.onFlexboxHighlighterChange.bind(this);
   this.onGridHighlighterChange = this.onGridHighlighterChange.bind(this);
 
+  this.markup.highlighters.on("flexbox-highlighter-hidden",
+    this.onFlexboxHighlighterChange);
+  this.markup.highlighters.on("flexbox-highlighter-shown",
+    this.onFlexboxHighlighterChange);
   this.markup.highlighters.on("grid-highlighter-hidden", this.onGridHighlighterChange);
   this.markup.highlighters.on("grid-highlighter-shown", this.onGridHighlighterChange);
 
   if (node.nodeType === nodeConstants.ELEMENT_NODE) {
     this.editor = new ElementEditor(this, node);
   } else {
     throw new Error("Invalid node for MarkupElementContainer");
   }
 
   this.tagLine.appendChild(this.editor.elt);
 }
 
 MarkupElementContainer.prototype = extend(MarkupContainer.prototype, {
   destroy: function() {
+    this.markup.highlighters.off("flexbox-highlighter-hidden",
+      this.onFlexboxHighlighterChange);
+    this.markup.highlighters.off("flexbox-highlighter-shown",
+      this.onFlexboxHighlighterChange);
     this.markup.highlighters.off("grid-highlighter-hidden", this.onGridHighlighterChange);
     this.markup.highlighters.off("grid-highlighter-shown", this.onGridHighlighterChange);
 
     MarkupContainer.prototype.destroy.call(this);
   },
 
   onContainerClick: function(event) {
     if (!event.target.hasAttribute("data-event")) {
       return;
     }
 
     this._buildEventTooltipContent(event.target);
   },
 
   /**
+   * Handler for "flexbox-highlighter-hidden" and "flexbox-highlighter-shown" event
+   * emitted from the HighlightersOverlay. Toggles the active state of the display badge
+   * if it matches the highlighted flex container node.
+   */
+  onFlexboxHighlighterChange: function() {
+    this.editor.displayBadge.classList.toggle("active",
+      this.markup.highlighters.flexboxHighlighterShown === this.node);
+  },
+
+  /**
    * Handler for "grid-highlighter-hidden" and "grid-highlighter-shown" event emitted from
    * the HighlightersOverlay. Toggles the active state of the display badge if it matches
    * the highlighted grid node.
    */
   onGridHighlighterChange: function() {
     this.editor.displayBadge.classList.toggle("active",
       this.markup.highlighters.gridHighlighterShown === this.node);
   },

--- a/devtools/client/inspector/markup/views/element-editor.js
+++ b/devtools/client/inspector/markup/views/element-editor.js
@@ -290,16 +290,17 @@ ElementEditor.prototype = {
   updateDisplayBadge: function() {
     const showDisplayBadge = this.node.displayType in DISPLAY_TYPES;
     this.displayBadge.textContent = this.node.displayType;
     this.displayBadge.dataset.display = showDisplayBadge ? this.node.displayType : "";
     this.displayBadge.style.display = showDisplayBadge ? "inline-block" : "none";
     this.displayBadge.title = showDisplayBadge ?
       DISPLAY_TYPES[this.node.displayType] : "";
     this.displayBadge.classList.toggle("active",
+      this.highlighters.flexboxHighlighterShown === this.node ||
       this.highlighters.gridHighlighterShown === this.node);
   },
 
   /**
    * Update the inline text editor in case of a single text child node.
    */
   updateTextEditor: function() {
     const node = this.node.inlineTextChild;
@@ -643,21 +644,28 @@ ElementEditor.prototype = {
   /**
    * Called when the display badge is clicked. Toggles on the grid highlighter for the
    * selected node if it is a grid container.
    */
   onDisplayBadgeClick: function(event) {
     event.stopPropagation();
 
     const target = event.target;
-    if (target.dataset.display !== "grid" && target.dataset.display !== "inline-grid") {
+
+    if (target.dataset.display === "flex" || target.dataset.display === "inline-flex") {
+      this.highlighters.toggleFlexboxHighlighter(this.inspector.selection.nodeFront,
+        "markup");
       return;
     }
 
-    this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront, "markup");
+    if (target.dataset.display === "grid" || target.dataset.display === "inline-grid") {
+      this.highlighters.toggleGridHighlighter(this.inspector.selection.nodeFront,
+        "markup");
+      return;
+    }
   },
 
   /**
    * Called when the tag name editor has is done editing.
    */
   onTagEdit: function(newTagName, isCommit) {
     if (!isCommit ||
         newTagName.toLowerCase() === this.node.tagName.toLowerCase() ||

--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -413,19 +413,28 @@ ul.children + .tag-line::before {
 }
 
 .markup-badge.active {
   background-color: var(--markup-badge-active-background-color);
   border-color: var(--theme-selection-color);
   color: var(--theme-selection-color);
 }
 
+.markup-badge[data-display="flex"],
 .markup-badge[data-display="grid"],
+.markup-badge[data-display="inline-flex"],
+.markup-badge[data-display="inline-grid"],
 .markup-badge[data-event] {
   cursor: pointer;
 }
 
+.markup-badge[data-display="flex"]:focus,
+.markup-badge[data-display="flex"]:hover,
 .markup-badge[data-display="grid"]:focus,
 .markup-badge[data-display="grid"]:hover,
+.markup-badge[data-display="inline-flex"]:focus,
+.markup-badge[data-display="inline-flex"]:hover,
+.markup-badge[data-display="inline-grid"]:focus,
+.markup-badge[data-display="inline-grid"]:hover,
 .markup-badge[data-event]:focus,
 .markup-badge[data-event]:hover {
   background-color: var(--markup-badge-hover-background-color);
 }