Document FlexBox gap parameter

doc/tutorials/intermediate/size.md → doc/tutorials/intermediate/advanced_layouts.md

@@ -1,18 +1,16 @@
-# Control the Size
-
-COMING UP
-
-```{pyodide}
-import panel as pn
-pn.extension('tabulator')
-```
+# Advanced Layouts
 
 ## Responsive Layouts with FlexBox
 
 So far when we have talked about responsive layouts we have primarily focused on simple `width`/`height` responsiveness of individual components, i.e. whether they will grow and shrink to fill the available space. For a truly responsive experience however we will need responsive layouts that will reflow the content depending on the size of the screen, browser window or the container they are placed inside of, much like how text wraps when there is insufficient width to accommodate it:
 
 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

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
 ```

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": {

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):