System and editor-button plugin for Joomla that lets content authors build real flexbox layouts — rows, cells, alignment, spacing, responsive behavior — visually inside any TinyMCE editor, without writing a line of CSS or installing a heavy page builder. Perfect for multi-column articles, sidebar-and-content pages, feature grids, call-to-action rows, and any content that needs to break out of a single column.

The Flexbox Layout plugin attaches to every TinyMCE instance in Joomla and turns an empty flex box into a fully editable layout. Insert a Flexbox from the editor's CMS Content menu — or type /flex — then shape it from on-canvas handles: a blue handle for the row, a green handle for each cell. Every setting maps to a small, namespaced CSS class (or a clean inline value for custom sizes), so the markup stays readable and portable. Because the plugin ships its own ~2 KB stylesheet, it works on any template, with or without Bootstrap.

Authors work entirely through context toolbars — no dialogs to hunt through, no source view. The row handle exposes layout presets, direction, spacing and responsive switches; the cell handle exposes width, alignment and ordering. Rows nest inside cells for complex, magazine-style compositions, and toggleable, editor-only visual aids reveal structure and depth while you work without ever touching the saved output.

Administrators enable the plugin once — no per-editor-profile configuration required — and can optionally switch off all front-end output so a developer styles the flx-* classes from their own stylesheet. Custom widths, gaps, margins, min-heights and orders are written as real inline styles that always survive saving, and Backspace/Delete are guarded at cell boundaries so the structure can't be broken by accident.

Key Features

Insert Anywhere - A single "Flexbox" button in the CMS Content menu plus a /flex slash command; nested rows can be inserted straight from a cell's toolbar
Layout Presets - One-click 2/3/4 columns, sidebar+content, content+sidebar, and asymmetric splits, applied without losing existing content
Flex Direction - Row, column, and both reversed variants, straight from the row handle
Distribute & Align - Full justify-content and align-items control, including a "hug" mode that makes distribution actually visible
Spacing Controls - Gap between cells, spacing below the row, and row min-height — each with presets and a custom pixel value
Cell Width - Fill, weighted grow, hug-to-content, fixed-rem presets, or a custom px/% value entered in a dialog
Responsive Order - Set a different visual order per cell for desktop and mobile, plus mobile stacking and no-wrap switches
Custom Row ID - Assign a sanitized id to any row for CSS targeting or anchor links
Nested Layouts - Rows inside cells with clean output, boundary-safe editing, and depth-aware visual guides you can toggle off
Framework-Free CSS - Ships a ~2 KB stylesheet; no Bootstrap or other framework required
Clean Front-End - Only the small stylesheet on public pages, or nothing at all if you disable front-end output; namespaced classes, no stray paragraphs, no JavaScript
Multilingual Support - Complete Hungarian and English editor and admin interface
Simple Installation - Upload the package ZIP, enable the two bundled plugins, start building