MicrosoftDocs · mikehoffms · Jul 16, 2026 · Jul 16, 2026
diff --git a/microsoft-edge/devtools/about-tools.md b/microsoft-edge/devtools/about-tools.md
@@ -40,7 +40,7 @@ By default, the following tools are listed in the **Activity Bar** at the top of
 | ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect** | Use the **Inspect** tool to see information about an item within a rendered webpage.  When the **Inspect** tool is active, you _hover_ over items in the webpage, and DevTools adds an information overlay and grid highlighting on the webpage. | [Analyze pages using the Inspect tool](css/inspect.md) |
 | ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** | Use the **Device Emulation** tool, also called _Device Simulation Mode_ or _Device Mode_, to approximate how your page looks and responds on a mobile device. | [Emulate mobile devices (Device Emulation)](device-mode/index.md) |
 | ![Welcome icon](./about-tools-images/welcome-icon.png) **Welcome** | The **Welcome** tool opens when you first open DevTools.  It displays links to developer docs, latest features, release notes, and an option to contact the Microsoft Edge DevTools team. | [Welcome tool](welcome/welcome-tool.md) |
-| ![Elements icon](./about-tools-images/elements-icon.png) **Elements** | Inspect, edit, and debug your HTML and CSS.  You can edit in the tool while displaying the changes live in the browser.  Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements-tool/elements-tool.md) |
+| ![Elements icon](./about-tools-images/elements-icon.png) **Elements** | Inspect, edit, and debug your HTML and CSS.  You can edit in the tool while displaying the changes live in the browser.  Debug your HTML using the DOM tree, and inspect and work on the CSS for your webpage. | [Inspect, edit, and debug HTML and CSS with the Elements tool](elements/elements-tool.md) |
 | ![Console icon](./about-tools-images/console-icon.png) **Console** | An intelligent, rich command line within DevTools.  A great companion tool to use with others tools.  Provides a powerful way to script functionality, inspect the current webpage, and manipulate the current webpage using JavaScript. | [Console overview](console/index.md) |
 | ![Sources icon](./about-tools-images/sources-icon.png) **Sources** | Use the **Sources** tool to view, modify, and debug front-end JavaScript code, and inspect and edit the HTML and CSS files that make up the current webpage. | [Sources tool overview](sources/index.md) |
 | ![Network icon](./about-tools-images/network-icon.png) **Network** | Use the **Network** tool to make sure that resources are being downloaded or uploaded as expected.  Inspect the properties of an individual resource, such as the HTTP headers, content, or size. | [Inspect network activity](network/index.md) |

diff --git a/microsoft-edge/devtools/console/console-dom-interaction.md b/microsoft-edge/devtools/console/console-dom-interaction.md
@@ -14,7 +14,7 @@ The **Console** tool is a great way to interact with the webpage in the browser.
 
 The **Console** tool can also be used to interact with the DOM by using JavaScript code. For example, you can find elements in the DOM tree and manipulate them by using DOM APIs.
 
-To learn more about the **Inspect** tool, see [Analyze pages using the Inspect tool](../css/inspect.md). To learn more about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements-tool/elements-tool.md).
+To learn more about the **Inspect** tool, see [Analyze pages using the Inspect tool](../css/inspect.md). To learn more about the **Elements** tool, see [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements/elements-tool.md).
 
 
 <!-- ====================================================================== -->

diff --git a/microsoft-edge/devtools/css/flexbox.md b/microsoft-edge/devtools/css/flexbox.md
@@ -0,0 +1,112 @@
+---
+title: Inspect and debug CSS flexbox layouts
+description: Inspect and debug CSS flexbox layouts.
+author: MSEdgeTeam
+ms.author: msedgedevrel
+ms.topic: article
+ms.service: microsoft-edge
+ms.subservice: devtools
+ms.date: 07/15/2026
+---
+# Inspect and debug CSS flexbox layouts
+<!-- https://developer.chrome.com/docs/devtools/css/flexbox -->
+<!-- Copyright Jecelyn Yeen
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       https://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.  -->
+
+This guide shows you how to discover flexbox elements on a page, as well as inspect and modify the flexbox layouts in the **Elements** tool.
+
+The screenshots appearing in this article are from this web page: [Centering a text element with Flexbox](http://jec.fish/demo/css-flexbox). todo Demos repo demo(s)
+
+
+<!-- ====================================================================== -->
+## Discover CSS flexbox
+<!-- https://developer.chrome.com/docs/devtools/css/flexbox#discover -->
+
+When an HTML element on your page has `display: flex` or `display: inline-flex` applied to it, you can see a `flex` badge next to it in the [Elements](https://developer.chrome.com/docs/devtools/open) tool.
+
+![Discover flexbox] todo png
+
+
+<!-- ====================================================================== -->
+## Modify layouts with the flexbox editor
+<!-- https://developer.chrome.com/docs/devtools/css/flexbox#modify -->
+
+You can modify flexbox layouts visually with the **flexbox editor**.  For example, here is how you can center the text `<h1>` of this [demo page](http://jec.fish/demo/css-flexbox) within its container `<div class="container">`.
+
+1. Inspect the container element.
+
+1. In the **Styles** tab of the **Elements** tool, you can see the flexbox editor button next to the display: flex declaration:
+
+   ![flexbox editor button] todo png
+
+1. Click the **flexbox editor** button to open the flexbox editor.
+
+   The editor displays a list of flexbox properties.  Each property's value options are displayed as icon buttons.
+
+   ![flexbox editor] todo png
+
+1. To center the text on the screen, you can click the `justify-content: center` and `align-items: center` buttons.
+
+   ![Center the text in its container] todo png
+
+   The text are centered now.  The `justify-content: center` and `align-items: center` declarations are added in the **Styles** tab.
+
+
+<!-- ====================================================================== -->
+## Examine the flexbox layout
+<!-- https://developer.chrome.com/docs/devtools/css/flexbox#examine -->
+
+You can hover over the flexbox element in the **Elements** tool to visualize the layout.  The overlay appears over the element, laid out with dotted lines to show the position of its content and items.
+
+hover over a flexbox element
+
+Alternatively, you can click the **flex** badge to toggle the display of the flexbox overlay:
+
+![change justify-content to flex-end] todo png
+
+Try changing the value to `justify-content: flex-end`.  The overlay is changed accordingly:
+
+![justify-content: flex-end] todo png
+
+The icons in the **flex editor** are context-aware.  It will change according to the layout direction.  For example, when you change the `flex-direction` to `column`, the icons in the **flex editor** are rotated accordingly.  The overlay is updated immediately too:
+
+![video] todo png for video
+
+
+<!-- ====================================================================== -->
+## Adjust the flexbox overlay color
+<!-- https://developer.chrome.com/docs/devtools/css/flexbox#layout -->
+
+Click the **Layout** tab in the **Elements** tool, and then scroll down to the **Flexbox** section.  You can view all the flexbox elements of the page here:
+
+![Layout pane] todo png
+
+You can toggle the overlay of each flexbox element with the checkbox next to it.  It is the same as you click on the badge in the **DOM tree**.
+
+Apart from that, you can change the color of the overlay by clicking on the color icon next to it.  For example, the color of the `container` overlay is changed to black.
+
+![change overlay color] todo png
+
+To navigate to a flexbox element in the DOM tree, you can click on the selector icon next to it:
+
+![video] todo png for video
+
+
+<!-- ====================================================================== -->
+> [!NOTE]
+> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
+> The original page is found [here](https://developer.chrome.com/docs/devtools/css/flexbox) and is authored by Jecelyn Yeen.
+
+[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0)
+This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0).
diff --git a/...ol/elements-tool-images/elements-tool.png → ...ts/elements-tool-images/elements-tool.png b/...ol/elements-tool-images/elements-tool.png → ...ts/elements-tool-images/elements-tool.png
diff --git a/...e/devtools/elements-tool/elements-tool.md → ...t-edge/devtools/elements/elements-tool.md b/...e/devtools/elements-tool/elements-tool.md → ...t-edge/devtools/elements/elements-tool.md
@@ -36,7 +36,7 @@ The **Elements** tool contains the following tabs:
 * [CSS features reference](../css/reference.md)
 * [Get started viewing and changing CSS](../css/index.md)
 * [Inspect CSS Grid layouts](../css/grid.md)
-* [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../inspect-styles/edit-fonts.md)
 * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md)
 * [Get started viewing and changing the DOM](../dom/index.md)
 * [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a webpage.
diff --git a/microsoft-edge/devtools/experimental-features/index.md b/microsoft-edge/devtools/experimental-features/index.md
@@ -262,7 +262,7 @@ To use the visual **Font Editor**:
 Some browser channels have the checkbox label **Enable new Font Editor tool within the Styles pane.**
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../inspect-styles/edit-fonts.md)
 
 Status:
 * This checkbox is present in Microsoft Edge Canary 144.
@@ -461,7 +461,7 @@ Enables using Copilot in the Microsoft Edge Sidebar to explain HTML elements and
 This experiment is not available when the Sidebar is turned off.
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../elements/elements-tool.md)
 
 Status:
 * This checkbox is present in Microsoft Edge Canary 144.

diff --git a/microsoft-edge/devtools/inspect-styles/edit-fonts.md b/microsoft-edge/devtools/inspect-styles/edit-fonts.md
@@ -1,5 +1,5 @@
 ---
-title: Edit CSS font styles and settings in the Styles pane
+title: Edit CSS font styles and settings in the Styles tab
 description: Learn how to change CSS font styles and settings using the Styles pane in Microsoft Edge DevTools.
 author: MSEdgeTeam
 ms.author: msedgedevrel
@@ -8,7 +8,7 @@ ms.service: microsoft-edge
 no-loc: ["Enable new font editor tool within the Styles pane"]
 ms.date: 03/11/2021
 ---
-# Edit CSS font styles and settings in the Styles pane
+# Edit CSS font styles and settings in the Styles tab
 
 ![This feature is experimental](./edit-fonts-images/experimental-tag.png)
 

diff --git a/microsoft-edge/devtools/sources/index.md b/microsoft-edge/devtools/sources/index.md
@@ -469,7 +469,7 @@ CSS changes take effect immediately; you don't need to manually save the changes
 
 See also:
 * [Get started viewing and changing CSS](../css/index.md).
-* [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../inspect-styles/edit-fonts.md)
 * [Sources tool keyboard shortcuts](../shortcuts/index.md#sources-tool-keyboard-shortcuts) in _Keyboard shortcuts_
 * [Open a demo folder from the Workspace tab in the Sources tool](../../devtools/samples/index.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) in _Sample code for DevTools_.
 

diff --git a/microsoft-edge/devtools/whats-new/2020/03/devtools.md b/microsoft-edge/devtools/whats-new/2020/03/devtools.md
@@ -82,7 +82,7 @@ The Color Picker is a GUI in the **Elements** panel for changing `color` and `ba
 Chromium issue [#963183](https://crbug.com/963183)
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 
 <!-- ------------------------------ -->
@@ -99,7 +99,7 @@ In Microsoft Edge 83, you can now display the properties of the currently select
 Chromium issue [#1050999](https://crbug.com/1050999)
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 
 <!-- ------------------------------ -->

diff --git a/microsoft-edge/devtools/whats-new/2020/05/devtools.md b/microsoft-edge/devtools/whats-new/2020/05/devtools.md
@@ -235,7 +235,7 @@ See also:
 #### Styles pane updates
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 
 
 <!-- ---------- -->
@@ -248,7 +248,7 @@ The autocomplete UI of the **Styles** pane now detects the [revert](https://deve
 Chromium issue [#1075437](https://crbug.com/1075437)
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 
 
 <!-- ---------- -->
@@ -261,7 +261,7 @@ Hover on a `background-image` value in the **Styles** pane to display a preview
 Chromium issue [#1040019](https://crbug.com/1040019)
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 
 
 <!-- ---------- -->

diff --git a/microsoft-edge/devtools/whats-new/2020/08/devtools.md b/microsoft-edge/devtools/whats-new/2020/08/devtools.md
@@ -397,7 +397,7 @@ See also:
 #### Updates to Elements tool and Network tool
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 * [Network features reference](../../../network/reference.md)
 
 
@@ -427,7 +427,7 @@ In the **Elements** tool, the **Properties** pane is back.  The **Properties** p
 Chromium issue: <!-- [#1105205](https://crbug.com/1105205), --> [#1116085](https://crbug.com/1116085)
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 
 <!-- ---------- 
@@ -458,7 +458,7 @@ For example, if `monospace` is a custom font installed on the local machine, it
 Chromium issue: [#1106221](https://crbug.com/1106221)
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 * [CSS features reference](../../../css/reference.md)
 
 
@@ -498,7 +498,7 @@ Click the **Clear** button to remove any inputted text.
 Chromium issue: [#1067184](https://crbug.com/1067184)
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 * [Network features reference](../../../network/reference.md)
 
 

diff --git a/microsoft-edge/devtools/whats-new/2020/11/devtools.md b/microsoft-edge/devtools/whats-new/2020/11/devtools.md
@@ -107,7 +107,7 @@ For example, to display the variable definition for the `--theme-body-background
 ![Viewing the definition of a CSS style that's used by a CSS variable](./devtools-images/css-variable-support-target.png)
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 * [CSS features reference](../../../css/reference.md)
 
 

diff --git a/microsoft-edge/devtools/whats-new/2021/01/devtools.md b/microsoft-edge/devtools/whats-new/2021/01/devtools.md
@@ -69,7 +69,7 @@ For the history of this feature in the Chromium open-source project, see Issue [
 
 See also:
 * [Enable new font editor within the Styles tab](../../../experimental-features/index.md#enable-new-font-editor-within-the-styles-tab) in _Experimental features in Microsoft Edge DevTools_.
-* [Edit CSS font styles and settings in the Styles pane in DevTools](../../../inspect-styles/edit-fonts.md).
+* [Edit CSS font styles and settings in the Styles tab in DevTools](../../../inspect-styles/edit-fonts.md).
 
 
 <!-- ====================================================================== -->
@@ -283,7 +283,7 @@ Use the new **Duplicate element** shortcut to clone an element.  In the **Elemen
 For the history of this feature in the Chromium open-source project, see Issue [1150797](https://crbug.com/1150797).
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 
 ###### Color pickers for custom CSS properties
@@ -444,7 +444,7 @@ For the history of this feature in the Chromium open-source project, see Issues
 
 See also:
 * [Sources tool overview](../../../sources/index.md)
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 <!-- 0 hits on "Copy file name" -->
 
 

diff --git a/microsoft-edge/devtools/whats-new/2021/02/devtools.md b/microsoft-edge/devtools/whats-new/2021/02/devtools.md
@@ -138,7 +138,7 @@ In addition, the **Flexbox** section in the **Layout** pane displays all of the
 For the history of this feature in the Chromium open-source project, see Issues [1166710](https://crbug.com/1166710) and [1175699](https://crbug.com/1175699).
 
 See also:
-* [Edit CSS font styles and settings in the Styles pane](../../../inspect-styles/edit-fonts.md)
+* [Edit CSS font styles and settings in the Styles tab](../../../inspect-styles/edit-fonts.md)
 * [Update .css files from within the Styles tab (CSS mirror editing)](../../../../visual-studio-code/microsoft-edge-devtools-extension/css-mirror-editing-styles-tab.md)<!-- eg "flex-direction" is only mentioned in this extension article -->
 <!-- todo: copy section content to regular docs -->
 
@@ -349,7 +349,7 @@ For the history of this feature in the Chromium open-source project, see Issue [
 
 See also:
 * [Test accessibility using the Accessibility tab](../../../accessibility/accessibility-tab.md)
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 
 <!-- ====================================================================== -->

diff --git a/microsoft-edge/devtools/whats-new/2021/04/devtools.md b/microsoft-edge/devtools/whats-new/2021/04/devtools.md
@@ -260,7 +260,7 @@ For the history of this feature in the Chromium open-source project, see Issue [
 -->
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 <!-- todo: create regular docs for Elements > Badge settings.  FTS 0 hits except this section. -->
 
 
@@ -284,7 +284,7 @@ This information helps you better understand your images and apply optimization.
 For the history of this feature in the Chromium open-source project, see Issues [1149832](https://crbug.com/1149832) and [1170656](https://crbug.com/1170656).
 
 See also:
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 * [Inspect network activity](../../../network/index.md)
 
 

diff --git a/microsoft-edge/devtools/whats-new/2021/05/devtools.md b/microsoft-edge/devtools/whats-new/2021/05/devtools.md
@@ -216,7 +216,7 @@ This displays the details about the `iframe` in the **Application** tool.  In th
 
 See also:
 * [Application tool, to manage storage](../../../storage/application-tool.md)
-* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements-tool/elements-tool.md)
+* [Inspect, edit, and debug HTML and CSS with the Elements tool](../../../elements/elements-tool.md)
 
 For the history of this feature in the Chromium open-source project, see Issue [1192084](https://crbug.com/1192084).