diff --git a/doc/tutorials/intermediate/size.md b/doc/tutorials/intermediate/advanced_layouts.md
similarity index 99%
rename from doc/tutorials/intermediate/size.md
rename to doc/tutorials/intermediate/advanced_layouts.md
index 395fe88404..0f06471f9b 100644
--- a/doc/tutorials/intermediate/size.md
+++ b/doc/tutorials/intermediate/advanced_layouts.md
@@ -1,11 +1,4 @@
-# Control the Size
-
-COMING UP
-
-```{pyodide}
-import panel as pn
-pn.extension('tabulator')
-```
+# Advanced Layouts
 
 ## Responsive Layouts with FlexBox
 
@@ -13,6 +6,11 @@ So far when we have talked about responsive layouts we have primarily focused on
 
 Panel offers one such component out of the box, the [`FlexBox`](../../reference/layouts/FlexBox.ipynb) layout.
 
+```{pyodide}
+import panel as pn
+pn.extension('tabulator')
+```
+
 ```{pyodide}
 import panel as pn
 import random
diff --git a/doc/tutorials/intermediate/index.md b/doc/tutorials/intermediate/index.md
index 205e53fe94..1158719d7a 100644
--- a/doc/tutorials/intermediate/index.md
+++ b/doc/tutorials/intermediate/index.md
@@ -60,7 +60,7 @@ Embark on a deeper exploration of supplementary topics to further hone your Pane
 
 - **[Efficient Development in Editors](develop_editor.md):** Streamline the debugging process within your preferred editor environment.
 - **[Serving Panel Apps](serve.md):** Serve multi-page apps effortlessly while customizing the Panel server to suit your needs.
-- **[Advanced Layouts](size.md):** Attain responsive sizing with ease using FlexBox and media queries.
+- **[Advanced Layouts](advanced_layouts.md):** Attain responsive sizing with ease using FlexBox and media queries.
 
 ## Projects
 
@@ -83,7 +83,7 @@ interactivity
 structure_data_store
 develop_editor
 serve
-size
+advanced_layouts
 build_todo
 test_todo
 ```
diff --git a/examples/reference/layouts/FlexBox.ipynb b/examples/reference/layouts/FlexBox.ipynb
index f84228f827..2466fc9f0f 100644
--- a/examples/reference/layouts/FlexBox.ipynb
+++ b/examples/reference/layouts/FlexBox.ipynb
@@ -26,6 +26,7 @@
     "* **``align_items``** (str): Defines the default behavior for how flex items are laid out along the cross axis on the current line. Same options as `align_content`.\n",
     "* **``flex_direction``** (str): This establishes the main-axis, thus defining the direction flex items are placed in the flex container. One of 'row', 'row-reverse', 'column', 'column-reverse'.\n",
     "* **``flex_wrap``** (str): Whether and how to wrap items in the flex container. One of 'nowrap', 'wrap', 'wrap-reverse'.\n",
+    "* **``gap``** (str): Defines the spacing between flex items, supporting various units (px, em, rem, %, vw/vh)\n",
     "* **``justify_content``** (str): Defines the alignment along the main axis. One of 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'start', 'end', 'left', 'right'.\n",
     "* **``objects``** (list): The list of objects to display in the WidgetBox. Should not generally be modified directly except when replaced in its entirety.\n",
     "\n",
@@ -125,6 +126,17 @@
    "source": [
     "In general a ``FlexBox`` does not have to be given a ``width``, ``height`` or ``sizing_mode``, allowing it to adapt to the size of its contents."
    ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## References\n",
+    "\n",
+    "### Tutorials\n",
+    "\n",
+    "- [Advanced Layouts](../../tutorials/intermediate/advanced_layouts.md)"
+   ]
   }
  ],
  "metadata": {
diff --git a/panel/layout/flex.py b/panel/layout/flex.py
index b1f2e0515c..09571fc506 100644
--- a/panel/layout/flex.py
+++ b/panel/layout/flex.py
@@ -51,14 +51,14 @@ class FlexBox(ListLike, ReactiveHTML):
         'nowrap', 'wrap', 'wrap-reverse'], doc="""
         Whether and how to wrap items in the flex container.""")
 
+    gap = param.String(default='', doc="""
+        Defines the spacing between flex items, supporting various units (px, em, rem, %, vw/vh).""")
+
     justify_content = param.Selector(default='flex-start', objects=[
         'flex-start', 'flex-end', 'center', 'space-between', 'space-around',
         'space-evenly', 'start', 'end', 'left', 'right'], doc="""
         Defines the alignment along the main axis.""")
 
-    gap = param.String(default='', doc="""
-        Defines the spacing between flex items, supporting various units (px, em, rem, %, vw/vh).""")
-
     _template = (Path(__file__).parent / 'flexbox.html').read_text('utf-8')
 
     def __init__(self, *objects, **params):