.btn-primary:disabled{opacity:.45;cursor:not-allowed}

WHAT IT DOES

This userscript adds a floating Flexbox Inspector panel to any webpage that detects and lists all CSS flexbox properties used across the page. It identifies flex containers (display:flex or inline-flex) and flex items, displaying computed values for flex-direction, flex-wrap, justify-content, align-items, align-content, gap, flex-grow, flex-shrink, flex-basis, order, and align-self. The panel shows the flex layout direction and alignment for each container, making it easy to understand complex flex layouts. A search filter allows you to find specific flex properties by element or property value. You can copy the complete flex CSS for any element to the clipboard. An inspector mode lets you click any element on the page to view its flex container and flex item properties instantly. All panel interactions use the BGPanel component, which automatically persists per-site position and collapse state.

WHERE IT RUNS

The script runs on all websites (*://*/*) through the BotGentz extension. It does not require any special permissions beyond those already granted by the extension. It works in any modern browser that supports the BotGentz userscript environment. The panel appears automatically on every page load, ready to assist with flexbox debugging and layout analysis.

HOW TO USE

The panel appears as a floating bubble in the bottom-right corner of your browser window. Click the bubble to expand the panel. The "Flexbox List" section displays all flex container and flex item elements, showing the element selector, whether it's a container or item, the flex direction, and the justify-content value. Use the search input to filter by element selector or property value. Click any entry in the list to highlight the element on the page and view its detailed flex properties in the "Flexbox Details" section. The details panel shows whether the element is a container or item, along with all computed flex properties. Click the "Copy" button on any entry to copy the complete flex CSS for that element. Click "Inspect Element" to enter inspector mode—then click any element on the page to view its flex properties. Click "Clear Highlight" to remove the outline from the selected element.

COMPUTED FLEXBOX EXTRACTION WITH CONTAINER AND ITEM DETECTION

The script iterates through every visible element on the page using document.querySelectorAll('*'), retrieving computed styles via window.getComputedStyle(). It detects flex containers by checking if display is 'flex' or 'inline-flex', then extracts flex-direction, flex-wrap, justify-content, align-items, align-content, and gap properties. It detects flex items by checking if the parent element is a flex container, then extracts flex-grow, flex-shrink, flex-basis, order, and align-self properties. The inspector mode adds mouseover highlighting and click detection, allowing rapid inspection of elements directly in the page layout. The copy function generates a complete CSS block with all flex properties formatted for immediate use in stylesheets. Elements are labeled as 'Container', 'Item', or 'Container + Item' for clear identification.

THE PANEL

The panel is built using the BGPanel component, which provides a consistent, accessible interface across all BotGentz tools. It supports drag-to-reposition via the header, collapse on click, and stores the panel's position and state per site using GM_setValue. The panel includes a close button (✕) to dismiss it temporarily—the panel reappears on next page load. The settings section includes a dropdown for selecting panel position (bottom-right, top-right, bottom-left, top-left), which is saved globally. The panel has a fixed width of 380px and a maximum height of 80vh, with scrolling for content that overflows. The flexbox list has a maximum height of 250px and the details section has a maximum height of 180px with internal scrolling.

PLEASE NOTE

Requires the free BotGentz extension to run. The script scans all visible elements on the page—on very large pages, this may take a moment. The script does not collect, store, or transmit any personal data. All flexbox data is read from the page and displayed locally. The copy function copies computed flex properties as they appear. Inspector mode uses mouseover and click events that may interfere with some page interactions—disable inspector mode when not needed. The highlight outline may overlap with existing element styles. Elements with display:flex but no flex children are still detected as containers. Grid layouts are not detected by this tool.