[docs] Add gap property documentation for Flexbox

docs/data/system/flexbox/Gap.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'),
+        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+        border: '1px solid',
+        borderColor: (theme) =>
+          theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
+        p: 1,
+        borderRadius: 2,
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
+    ),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default function Gap() {
+  return (
+    <div style={{ width: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          gap: 2,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+    </div>
+  );
+}

docs/data/system/flexbox/RowAndColumnGap.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import PropTypes from 'prop-types';
+
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'),
+        color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+        border: '1px solid',
+        borderColor: (theme) =>
+          theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
+        p: 1,
+        borderRadius: 2,
+        fontSize: '0.875rem',
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
+    ),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default function RowAndColumnGap() {
+  return (
+    <div style={{ width: '100%' }}>
+      <Box
+        sx={{
+          display: 'flex',
+          columnGap: 3,
+          rowGap: 5,
+          flexWrap: 'wrap',
+          maxWidth: 180,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+      </Box>
+    </div>
+  );
+}

docs/data/system/flexbox/flexbox.md

@@ -94,6 +94,53 @@ on MDN.
 <Box sx={{ alignContent: 'stretch' }}>…
 ```
 
+### gap
+
+The `gap: size` property specifies the gap between the different items inside the flexbox. For more information please see
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap" target="_blank" rel="noopener noreferrer">gap</a>
+on MDN.
+
+{{"demo": "Gap.js", "defaultCodeOpen": false, "bg": true}}
+
+```jsx
+<Box
+  sx={{
+    display: 'flex',
+    gap: 2,
+  }}
+>
+  <Item>Item 1</Item>
+  <Item>Item 2</Item>
+  <Item>Item 3</Item>
+</Box>
+```
+
+### row-gap & column-gap
+
+The `row-gap` and `column-gap` CSS properties allow for specifying the row and column gaps independently. For more information please see
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap" target="_blank" rel="noopener noreferrer">row-gap</a> and
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap" target="_blank" rel="noopener noreferrer">column-gap</a>
+on MDN.
+
+{{"demo": "RowAndColumnGap.js", "bg": true}}
+
+```jsx
+<Box
+  sx={{
+    display: 'flex',
+    columnGap: 3,
+    rowGap: 5,
+    flexWrap: 'wrap',
+    maxWidth: 180,
+  }}
+>
+  <Item>Item 1</Item>
+  <Item>Item 2</Item>
+  <Item>Item 3</Item>
+  <Item>Item 4</Item>
+</Box>
+```
+
 ## Properties for the Children
 
 ### order
@@ -170,3 +217,4 @@ import { flexbox } from '@mui/system';
 | `flexGrow`       | `flexGrow`       | `flex-grow`       | none      |
 | `flexShrink`     | `flexShrink`     | `flex-shrink`     | none      |
 | `alignSelf`      | `alignSelf`      | `align-self`      | none      |
+| `gap`            | `gap`            | `gap`             | none      |