From b58127e19cb85b39b4089b9e0d59964376e4f58b Mon Sep 17 00:00:00 2001
From: Mohammad Omar <omar.mo.sid@gmail.com>
Date: Sun, 17 Oct 2021 23:05:05 +0530
Subject: [PATCH 1/5] Add missing examples for justifyContent and update item
 box styling

---
 .../pages/system/flexbox/JustifyContent.js    | 82 +++++++++++++++++--
 .../pages/system/flexbox/JustifyContent.tsx   | 79 +++++++++++++++---
 docs/src/pages/system/flexbox/flexbox.md      |  5 ++
 3 files changed, 147 insertions(+), 19 deletions(-)

diff --git a/docs/src/pages/system/flexbox/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js
index c3907d96d7e4ad..1090432e25ea52 100644
--- a/docs/src/pages/system/flexbox/JustifyContent.js
+++ b/docs/src/pages/system/flexbox/JustifyContent.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function JustifyContent() {
   return (
     <div style={{ width: '100%' }}>
@@ -13,9 +38,9 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -26,9 +51,9 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -39,9 +64,48 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/JustifyContent.tsx b/docs/src/pages/system/flexbox/JustifyContent.tsx
index c3907d96d7e4ad..b41cf519f8b48e 100644
--- a/docs/src/pages/system/flexbox/JustifyContent.tsx
+++ b/docs/src/pages/system/flexbox/JustifyContent.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function JustifyContent() {
   return (
@@ -13,9 +33,9 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -26,9 +46,9 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -39,9 +59,48 @@ export default function JustifyContent() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-around',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md
index b2f0f72b918837..f08effb96b4676 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -40,8 +40,13 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 <Box sx={{ justifyContent: 'flex-start' }}>…
 <Box sx={{ justifyContent: 'flex-end' }}>…
 <Box sx={{ justifyContent: 'center' }}>…
+<Box sx={{ justifyContent: 'space-between' }}>…
+<Box sx={{ justifyContent: 'space-around' }}>…
+<Box sx={{ justifyContent: 'space-evenly' }}>…
 ```
 
+To learn more about `justifyContent` please see [this](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
+
 ### align-items
 
 {{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false, "bg": true}}

From 0f8e871e20e549e811fad70c94389a57f3d48a37 Mon Sep 17 00:00:00 2001
From: Mohammad Omar <omar.mo.sid@gmail.com>
Date: Tue, 19 Oct 2021 11:20:28 +0530
Subject: [PATCH 2/5] Add missing example properties for flexbox -
 alignContent, alignItems, alignSelf, display, flexDirection, flexGrow,
 flexShrink, flexWrap, and Order and update box item styling

---
 docs/src/pages/system/flexbox/AlignContent.js | 137 ++++++++++++++++--
 .../src/pages/system/flexbox/AlignContent.tsx | 134 ++++++++++++++---
 docs/src/pages/system/flexbox/AlignItems.js   |  83 +++++++++--
 docs/src/pages/system/flexbox/AlignItems.tsx  |  76 ++++++++--
 docs/src/pages/system/flexbox/AlignSelf.js    |  33 ++++-
 docs/src/pages/system/flexbox/AlignSelf.tsx   |  30 +++-
 .../system/flexbox/AlignSelf.tsx.preview      |   8 +-
 docs/src/pages/system/flexbox/Display.js      |   7 +-
 docs/src/pages/system/flexbox/Display.tsx     |   7 +-
 .../pages/system/flexbox/Display.tsx.preview  |   7 +-
 .../src/pages/system/flexbox/FlexDirection.js |  65 ++++++++-
 .../pages/system/flexbox/FlexDirection.tsx    |  62 +++++++-
 docs/src/pages/system/flexbox/FlexGrow.js     |  31 +++-
 docs/src/pages/system/flexbox/FlexGrow.tsx    |  28 +++-
 .../pages/system/flexbox/FlexGrow.tsx.preview |   6 +-
 docs/src/pages/system/flexbox/FlexShrink.js   |  31 +++-
 docs/src/pages/system/flexbox/FlexShrink.tsx  |  28 +++-
 .../system/flexbox/FlexShrink.tsx.preview     |   6 +-
 docs/src/pages/system/flexbox/FlexWrap.js     |  66 +++++++--
 docs/src/pages/system/flexbox/FlexWrap.tsx    |  63 ++++++--
 docs/src/pages/system/flexbox/Order.js        |  31 +++-
 docs/src/pages/system/flexbox/Order.tsx       |  28 +++-
 .../pages/system/flexbox/Order.tsx.preview    |   6 +-
 docs/src/pages/system/flexbox/flexbox.md      |  30 +++-
 24 files changed, 862 insertions(+), 141 deletions(-)

diff --git a/docs/src/pages/system/flexbox/AlignContent.js b/docs/src/pages/system/flexbox/AlignContent.js
index 02cc8c96f0d659..1cc458ce8f915d 100644
--- a/docs/src/pages/system/flexbox/AlignContent.js
+++ b/docs/src/pages/system/flexbox/AlignContent.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function AlignContent() {
   return (
     <div style={{ width: '100%' }}>
@@ -12,17 +37,17 @@ export default function AlignContent() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          maxWidth: 300,
+          maxWidth: 380,
           height: 200,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
       </Box>
       <Box
         sx={{
@@ -32,17 +57,97 @@ export default function AlignContent() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          maxWidth: 300,
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'center',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'space-between',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'space-around',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'stretch',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
           height: 200,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignContent.tsx b/docs/src/pages/system/flexbox/AlignContent.tsx
index 02cc8c96f0d659..07f3f704d2de24 100644
--- a/docs/src/pages/system/flexbox/AlignContent.tsx
+++ b/docs/src/pages/system/flexbox/AlignContent.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function AlignContent() {
   return (
@@ -12,17 +32,17 @@ export default function AlignContent() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          maxWidth: 300,
+          maxWidth: 380,
           height: 200,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
       </Box>
       <Box
         sx={{
@@ -32,17 +52,97 @@ export default function AlignContent() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          maxWidth: 300,
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'center',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'space-between',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'space-around',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
+          height: 200,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignContent: 'stretch',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 380,
           height: 200,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+        <Item>Item 7</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignItems.js b/docs/src/pages/system/flexbox/AlignItems.js
index 4bd0a346dfa650..0fd73d20ae650f 100644
--- a/docs/src/pages/system/flexbox/AlignItems.js
+++ b/docs/src/pages/system/flexbox/AlignItems.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function AlignItems() {
   return (
     <div style={{ width: '100%' }}>
@@ -14,9 +39,9 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -28,9 +53,9 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -42,9 +67,49 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'stretch',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          height: 100,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'baseline',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          height: 116,
+        }}
+      >
+        <Item
+          sx={{
+            height: 64,
+          }}
+        >
+          Item 1
+        </Item>
+        <Item
+          sx={{
+            height: 84,
+          }}
+        >
+          Item 2
+        </Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignItems.tsx b/docs/src/pages/system/flexbox/AlignItems.tsx
index 4bd0a346dfa650..2128890b70fd7a 100644
--- a/docs/src/pages/system/flexbox/AlignItems.tsx
+++ b/docs/src/pages/system/flexbox/AlignItems.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function AlignItems() {
   return (
@@ -14,9 +34,9 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -28,9 +48,9 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -42,9 +62,45 @@ export default function AlignItems() {
           height: 100,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'stretch',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          height: 100,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'baseline',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          height: 116,
+        }}
+      >
+        <Item
+          sx={{
+            height: 64
+          }}
+        >Item 1</Item>
+        <Item
+          sx={{
+            height: 84
+          }}
+        >Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignSelf.js b/docs/src/pages/system/flexbox/AlignSelf.js
index d5263943792a26..30d81e4ba0402b 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.js
+++ b/docs/src/pages/system/flexbox/AlignSelf.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function AlignSelf() {
   return (
     <div style={{ width: '100%' }}>
@@ -11,12 +36,12 @@ export default function AlignSelf() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          height: 100,
+          height: 124,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300', alignSelf: 'flex-end' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item sx={{ alignSelf: 'flex-end' }}>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx b/docs/src/pages/system/flexbox/AlignSelf.tsx
index d5263943792a26..c3d97621be44b6 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.tsx
+++ b/docs/src/pages/system/flexbox/AlignSelf.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function AlignSelf() {
   return (
@@ -11,12 +31,12 @@ export default function AlignSelf() {
           p: 1,
           m: 1,
           bgcolor: 'background.paper',
-          height: 100,
+          height: 124,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300', alignSelf: 'flex-end' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item sx={{ alignSelf: 'flex-end' }}>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx.preview b/docs/src/pages/system/flexbox/AlignSelf.tsx.preview
index 6e5cd1a7cbbd9b..fd0571dd7da6ac 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.tsx.preview
+++ b/docs/src/pages/system/flexbox/AlignSelf.tsx.preview
@@ -5,10 +5,10 @@
     p: 1,
     m: 1,
     bgcolor: 'background.paper',
-    height: 100,
+    height: 124,
   }}
 >
-  <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-  <Box sx={{ p: 1, bgcolor: 'grey.300', alignSelf: 'flex-end' }}>Item 2</Box>
-  <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+  <Item>Item 1</Item>
+  <Item sx={{ alignSelf: 'flex-end' }}>Item 2</Item>
+  <Item>Item 3</Item>
 </Box>
\ No newline at end of file
diff --git a/docs/src/pages/system/flexbox/Display.js b/docs/src/pages/system/flexbox/Display.js
index 3d735f52bb4fd5..2dee9dc2fedff5 100644
--- a/docs/src/pages/system/flexbox/Display.js
+++ b/docs/src/pages/system/flexbox/Display.js
@@ -4,8 +4,11 @@ import Box from '@mui/material/Box';
 export default function Display() {
   return (
     <div style={{ width: '100%' }}>
-      <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        {"I'm a flexbox container!"}
+      <Box sx={{ display: 'flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+        {"I'm a flexbox container that uses flex!"}
+      </Box>
+      <Box sx={{ display: 'inline-flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+        {"I'm a flexbox container that uses inline-flex!"}
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/Display.tsx b/docs/src/pages/system/flexbox/Display.tsx
index 3d735f52bb4fd5..2dee9dc2fedff5 100644
--- a/docs/src/pages/system/flexbox/Display.tsx
+++ b/docs/src/pages/system/flexbox/Display.tsx
@@ -4,8 +4,11 @@ import Box from '@mui/material/Box';
 export default function Display() {
   return (
     <div style={{ width: '100%' }}>
-      <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        {"I'm a flexbox container!"}
+      <Box sx={{ display: 'flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+        {"I'm a flexbox container that uses flex!"}
+      </Box>
+      <Box sx={{ display: 'inline-flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+        {"I'm a flexbox container that uses inline-flex!"}
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/Display.tsx.preview b/docs/src/pages/system/flexbox/Display.tsx.preview
index 5a8053690ffb55..1f857a4c6ef194 100644
--- a/docs/src/pages/system/flexbox/Display.tsx.preview
+++ b/docs/src/pages/system/flexbox/Display.tsx.preview
@@ -1,3 +1,6 @@
-<Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-  {"I'm a flexbox container!"}
+<Box sx={{ display: 'flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+  {"I'm a flexbox container that uses flex!"}
+</Box>
+<Box sx={{ display: 'inline-flex', p: 1, m: 1, bgcolor: 'background.paper' }}>
+  {"I'm a flexbox container that uses inline-flex!"}
 </Box>
\ No newline at end of file
diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js
index 3af62cfefa84f8..7cfdf7befa7bb3 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.js
+++ b/docs/src/pages/system/flexbox/FlexDirection.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function FlexDirection() {
   return (
     <div style={{ width: '100%' }}>
@@ -13,9 +38,9 @@ export default function FlexDirection() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -26,9 +51,37 @@ export default function FlexDirection() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          flexDirection: 'column',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column-reverse',
+          alignItems: 'flex-start',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexDirection.tsx b/docs/src/pages/system/flexbox/FlexDirection.tsx
index 3af62cfefa84f8..7b67a89f2a524f 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.tsx
+++ b/docs/src/pages/system/flexbox/FlexDirection.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function FlexDirection() {
   return (
@@ -13,9 +33,9 @@ export default function FlexDirection() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
       <Box
         sx={{
@@ -26,9 +46,37 @@ export default function FlexDirection() {
           bgcolor: 'background.paper',
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'flex-start',
+          flexDirection: 'column',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column-reverse',
+          alignItems: 'flex-start',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexGrow.js b/docs/src/pages/system/flexbox/FlexGrow.js
index 0a88325679df08..a2a3771a0245e7 100644
--- a/docs/src/pages/system/flexbox/FlexGrow.js
+++ b/docs/src/pages/system/flexbox/FlexGrow.js
@@ -1,13 +1,38 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function FlexGrow() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, flexGrow: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ flexGrow: 1 }}>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexGrow.tsx b/docs/src/pages/system/flexbox/FlexGrow.tsx
index 0a88325679df08..174f4a24be1463 100644
--- a/docs/src/pages/system/flexbox/FlexGrow.tsx
+++ b/docs/src/pages/system/flexbox/FlexGrow.tsx
@@ -1,13 +1,33 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function FlexGrow() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, flexGrow: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ flexGrow: 1 }}>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexGrow.tsx.preview b/docs/src/pages/system/flexbox/FlexGrow.tsx.preview
index 0a67e753957872..bbad8bb0860292 100644
--- a/docs/src/pages/system/flexbox/FlexGrow.tsx.preview
+++ b/docs/src/pages/system/flexbox/FlexGrow.tsx.preview
@@ -1,5 +1,5 @@
 <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-  <Box sx={{ p: 1, flexGrow: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-  <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-  <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+  <Item sx={{ flexGrow: 1 }}>Item 1</Item>
+  <Item>Item 2</Item>
+  <Item>Item 3</Item>
 </Box>
\ No newline at end of file
diff --git a/docs/src/pages/system/flexbox/FlexShrink.js b/docs/src/pages/system/flexbox/FlexShrink.js
index 82389bf3ca4593..e22fec3add42c9 100644
--- a/docs/src/pages/system/flexbox/FlexShrink.js
+++ b/docs/src/pages/system/flexbox/FlexShrink.js
@@ -1,13 +1,38 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function FlexShrink() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, width: '100%', bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, flexShrink: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, flexShrink: 0, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ width: '100%' }}>Item 1</Item>
+        <Item sx={{ flexShrink: 1 }}>Item 2</Item>
+        <Item sx={{ flexShrink: 0 }}>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexShrink.tsx b/docs/src/pages/system/flexbox/FlexShrink.tsx
index 82389bf3ca4593..abc197b1248463 100644
--- a/docs/src/pages/system/flexbox/FlexShrink.tsx
+++ b/docs/src/pages/system/flexbox/FlexShrink.tsx
@@ -1,13 +1,33 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function FlexShrink() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, width: '100%', bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, flexShrink: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, flexShrink: 0, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ width: '100%' }}>Item 1</Item>
+        <Item sx={{ flexShrink: 1 }}>Item 2</Item>
+        <Item sx={{ flexShrink: 0 }}>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexShrink.tsx.preview b/docs/src/pages/system/flexbox/FlexShrink.tsx.preview
index 666aee721c2e24..6cfe20a981a55b 100644
--- a/docs/src/pages/system/flexbox/FlexShrink.tsx.preview
+++ b/docs/src/pages/system/flexbox/FlexShrink.tsx.preview
@@ -1,5 +1,5 @@
 <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-  <Box sx={{ p: 1, width: '100%', bgcolor: 'grey.300' }}>Item 1</Box>
-  <Box sx={{ p: 1, flexShrink: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-  <Box sx={{ p: 1, flexShrink: 0, bgcolor: 'grey.300' }}>Item 3</Box>
+  <Item sx={{ width: '100%' }}>Item 1</Item>
+  <Item sx={{ flexShrink: 1 }}>Item 2</Item>
+  <Item sx={{ flexShrink: 0 }}>Item 3</Item>
 </Box>
\ No newline at end of file
diff --git a/docs/src/pages/system/flexbox/FlexWrap.js b/docs/src/pages/system/flexbox/FlexWrap.js
index a1ed8b0874efe9..74bdd2336d4474 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.js
+++ b/docs/src/pages/system/flexbox/FlexWrap.js
@@ -1,6 +1,31 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function FlexWrap() {
   return (
     <div style={{ width: '100%' }}>
@@ -14,12 +39,12 @@ export default function FlexWrap() {
           maxWidth: 300,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 4</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 5</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 6</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
       </Box>
       <Box
         sx={{
@@ -31,12 +56,29 @@ export default function FlexWrap() {
           maxWidth: 300,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 4</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 5</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 6</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap-reverse',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 300,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/FlexWrap.tsx b/docs/src/pages/system/flexbox/FlexWrap.tsx
index a1ed8b0874efe9..caaebc1689a7e9 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.tsx
+++ b/docs/src/pages/system/flexbox/FlexWrap.tsx
@@ -1,5 +1,25 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function FlexWrap() {
   return (
@@ -14,12 +34,12 @@ export default function FlexWrap() {
           maxWidth: 300,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 4</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 5</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 6</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
       </Box>
       <Box
         sx={{
@@ -31,12 +51,29 @@ export default function FlexWrap() {
           maxWidth: 300,
         }}
       >
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 3</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 4</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 5</Box>
-        <Box sx={{ p: 1, bgcolor: 'grey.300' }}>Item 6</Box>
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          flexWrap: 'wrap-reverse',
+          p: 1,
+          m: 1,
+          bgcolor: 'background.paper',
+          maxWidth: 300,
+        }}
+      >
+        <Item>Item 1</Item>
+        <Item>Item 2</Item>
+        <Item>Item 3</Item>
+        <Item>Item 4</Item>
+        <Item>Item 5</Item>
+        <Item>Item 6</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/Order.js b/docs/src/pages/system/flexbox/Order.js
index 8584abecee50a3..7402d0cb028ac6 100644
--- a/docs/src/pages/system/flexbox/Order.js
+++ b/docs/src/pages/system/flexbox/Order.js
@@ -1,13 +1,38 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 
+function Item(props) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
+
+Item.propTypes = {
+  sx: PropTypes.object,
+};
+
 export default function Order() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, order: 2, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, order: 3, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, order: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ order: 2 }}>Item 1</Item>
+        <Item sx={{ order: 3 }}>Item 2</Item>
+        <Item sx={{ order: 1 }}>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/Order.tsx b/docs/src/pages/system/flexbox/Order.tsx
index 8584abecee50a3..9062ef588a38e5 100644
--- a/docs/src/pages/system/flexbox/Order.tsx
+++ b/docs/src/pages/system/flexbox/Order.tsx
@@ -1,13 +1,33 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Box, { BoxProps } from '@mui/material/Box';
+
+function Item(props: BoxProps) {
+  const { sx, ...other } = props;
+  return (
+    <Box
+      sx={{
+        bgcolor: 'primary.main',
+        color: 'white',
+        p: 1,
+        m: 1,
+        borderRadius: 1,
+        textAlign: 'center',
+        fontSize: 19,
+        fontWeight: '700',
+        ...sx,
+      }}
+      {...other}
+    />
+  );
+}
 
 export default function Order() {
   return (
     <div style={{ width: '100%' }}>
       <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-        <Box sx={{ p: 1, order: 2, bgcolor: 'grey.300' }}>Item 1</Box>
-        <Box sx={{ p: 1, order: 3, bgcolor: 'grey.300' }}>Item 2</Box>
-        <Box sx={{ p: 1, order: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+        <Item sx={{ order: 2 }}>Item 1</Item>
+        <Item sx={{ order: 3 }}>Item 2</Item>
+        <Item sx={{ order: 1 }}>Item 3</Item>
       </Box>
     </div>
   );
diff --git a/docs/src/pages/system/flexbox/Order.tsx.preview b/docs/src/pages/system/flexbox/Order.tsx.preview
index 73bc6433ae6581..8258d4aa7e6116 100644
--- a/docs/src/pages/system/flexbox/Order.tsx.preview
+++ b/docs/src/pages/system/flexbox/Order.tsx.preview
@@ -1,5 +1,5 @@
 <Box sx={{ display: 'flex', p: 1, bgcolor: 'background.paper' }}>
-  <Box sx={{ p: 1, order: 2, bgcolor: 'grey.300' }}>Item 1</Box>
-  <Box sx={{ p: 1, order: 3, bgcolor: 'grey.300' }}>Item 2</Box>
-  <Box sx={{ p: 1, order: 1, bgcolor: 'grey.300' }}>Item 3</Box>
+  <Item sx={{ order: 2 }}>Item 1</Item>
+  <Item sx={{ order: 3 }}>Item 2</Item>
+  <Item sx={{ order: 1 }}>Item 3</Item>
 </Box>
\ No newline at end of file
diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md
index f08effb96b4676..15309724ee2184 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -12,28 +12,38 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ```jsx
 <Box sx={{ display: 'flex' }}>…
+<Box sx={{ display: 'inline-flex' }}>…
 ```
 
 ### flex-direction
 
+For more information please see [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) on MDN.
+
 {{"demo": "pages/system/flexbox/FlexDirection.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
 <Box sx={{ flexDirection: 'row' }}>…
 <Box sx={{ flexDirection: 'row-reverse' }}>…
+<Box sx={{ flexDirection: 'column' }}>…
+<Box sx={{ flexDirection: 'column-reverse' }}>…
 ```
 
 ### flex-wrap
 
+For more information please see [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) on MDN.
+
 {{"demo": "pages/system/flexbox/FlexWrap.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
 <Box sx={{ flexWrap: 'nowrap' }}>…
 <Box sx={{ flexWrap: 'wrap' }}>…
+<Box sx={{ flexWrap: 'wrap-reverse' }}>…
 ```
 
 ### justify-content
 
+For more information please see [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) on MDN.
+
 {{"demo": "pages/system/flexbox/JustifyContent.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
@@ -45,31 +55,41 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 <Box sx={{ justifyContent: 'space-evenly' }}>…
 ```
 
-To learn more about `justifyContent` please see [this](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)
-
 ### align-items
 
+For more information please see [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) on MDN.
+
 {{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
 <Box sx={{ alignItems: 'flex-start' }}>…
 <Box sx={{ alignItems: 'flex-end' }}>…
 <Box sx={{ alignItems: 'center' }}>…
+<Box sx={{ alignItems: 'stretch' }}>…
+<Box sx={{ alignItems: 'baseline' }}>…
 ```
 
 ### align-content
 
+For more information please see [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) on MDN.
+
 {{"demo": "pages/system/flexbox/AlignContent.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
 <Box sx={{ alignContent: 'flex-start' }}>…
 <Box sx={{ alignContent: 'flex-end' }}>…
+<Box sx={{ alignContent: 'center' }}>…
+<Box sx={{ alignContent: 'space-between' }}>…
+<Box sx={{ alignContent: 'space-around' }}>…
+<Box sx={{ alignContent: 'stretch' }}>…
 ```
 
 ## Properties for the Children
 
 ### order
 
+For more information please see [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) on MDN.
+
 {{"demo": "pages/system/flexbox/Order.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
@@ -80,6 +100,8 @@ To learn more about `justifyContent` please see [this](https://developer.mozilla
 
 ### flex-grow
 
+For more information please see [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) on MDN.
+
 {{"demo": "pages/system/flexbox/FlexGrow.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
@@ -90,6 +112,8 @@ To learn more about `justifyContent` please see [this](https://developer.mozilla
 
 ### flex-shrink
 
+For more information please see [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) on MDN.
+
 {{"demo": "pages/system/flexbox/FlexShrink.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx
@@ -100,6 +124,8 @@ To learn more about `justifyContent` please see [this](https://developer.mozilla
 
 ### align-self
 
+For more information please see [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) on MDN.
+
 {{"demo": "pages/system/flexbox/AlignSelf.js", "defaultCodeOpen": false, "bg": true}}
 
 ```jsx

From 8f003d2aa5b1e62108f60aa8f67ff1758628b87c Mon Sep 17 00:00:00 2001
From: Mohammad Omar <omar.mo.sid@gmail.com>
Date: Tue, 19 Oct 2021 20:09:20 +0530
Subject: [PATCH 3/5] Fix links so that they open in a new tab

---
 docs/src/pages/system/flexbox/flexbox.md | 36 ++++++++++++++++++------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md
index 15309724ee2184..5dcce37a87cbf3 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -17,7 +17,9 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### flex-direction
 
-For more information please see [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" target="_blank" rel="noopener noreferrer">flex-direction</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/FlexDirection.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -30,7 +32,9 @@ For more information please see [flex-direction](https://developer.mozilla.org/e
 
 ### flex-wrap
 
-For more information please see [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" target="_blank" rel="noopener noreferrer">flex-wrap</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/FlexWrap.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -42,7 +46,9 @@ For more information please see [flex-wrap](https://developer.mozilla.org/en-US/
 
 ### justify-content
 
-For more information please see [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_blank" rel="noopener noreferrer">justify-content</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/JustifyContent.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -57,7 +63,9 @@ For more information please see [justify-content](https://developer.mozilla.org/
 
 ### align-items
 
-For more information please see [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" target="_blank" rel="noopener noreferrer">align-items</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/AlignItems.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -71,7 +79,9 @@ For more information please see [align-items](https://developer.mozilla.org/en-U
 
 ### align-content
 
-For more information please see [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" target="_blank" rel="noopener noreferrer">align-content</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/AlignContent.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -88,7 +98,9 @@ For more information please see [align-content](https://developer.mozilla.org/en
 
 ### order
 
-For more information please see [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order" target="_blank" rel="noopener noreferrer">order</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/Order.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -100,7 +112,9 @@ For more information please see [order](https://developer.mozilla.org/en-US/docs
 
 ### flex-grow
 
-For more information please see [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" target="_blank" rel="noopener noreferrer">flex-grow</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/FlexGrow.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -112,7 +126,9 @@ For more information please see [flex-grow](https://developer.mozilla.org/en-US/
 
 ### flex-shrink
 
-For more information please see [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" target="_blank" rel="noopener noreferrer">flex-shrink</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/FlexShrink.js", "defaultCodeOpen": false, "bg": true}}
 
@@ -124,7 +140,9 @@ For more information please see [flex-shrink](https://developer.mozilla.org/en-U
 
 ### align-self
 
-For more information please see [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) on MDN.
+For more information please see 
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" target="_blank" rel="noopener noreferrer">align-self</a>
+on MDN.
 
 {{"demo": "pages/system/flexbox/AlignSelf.js", "defaultCodeOpen": false, "bg": true}}
 

From 051f8b32fb5a372676b7168d75d079a76ddb9e82 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 20 Oct 2021 10:07:57 +0700
Subject: [PATCH 4/5] run prettier

---
 docs/src/pages/system/flexbox/AlignItems.tsx | 12 ++++++++----
 docs/src/pages/system/flexbox/flexbox.md     | 18 +++++++++---------
 2 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/system/flexbox/AlignItems.tsx b/docs/src/pages/system/flexbox/AlignItems.tsx
index 2128890b70fd7a..23c8403c8c0cbb 100644
--- a/docs/src/pages/system/flexbox/AlignItems.tsx
+++ b/docs/src/pages/system/flexbox/AlignItems.tsx
@@ -92,14 +92,18 @@ export default function AlignItems() {
       >
         <Item
           sx={{
-            height: 64
+            height: 64,
           }}
-        >Item 1</Item>
+        >
+          Item 1
+        </Item>
         <Item
           sx={{
-            height: 84
+            height: 84,
           }}
-        >Item 2</Item>
+        >
+          Item 2
+        </Item>
         <Item>Item 3</Item>
       </Box>
     </div>
diff --git a/docs/src/pages/system/flexbox/flexbox.md b/docs/src/pages/system/flexbox/flexbox.md
index 5dcce37a87cbf3..a2299e487fb183 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -17,7 +17,7 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### flex-direction
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" target="_blank" rel="noopener noreferrer">flex-direction</a>
 on MDN.
 
@@ -32,7 +32,7 @@ on MDN.
 
 ### flex-wrap
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" target="_blank" rel="noopener noreferrer">flex-wrap</a>
 on MDN.
 
@@ -46,7 +46,7 @@ on MDN.
 
 ### justify-content
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_blank" rel="noopener noreferrer">justify-content</a>
 on MDN.
 
@@ -63,7 +63,7 @@ on MDN.
 
 ### align-items
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" target="_blank" rel="noopener noreferrer">align-items</a>
 on MDN.
 
@@ -79,7 +79,7 @@ on MDN.
 
 ### align-content
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" target="_blank" rel="noopener noreferrer">align-content</a>
 on MDN.
 
@@ -98,7 +98,7 @@ on MDN.
 
 ### order
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order" target="_blank" rel="noopener noreferrer">order</a>
 on MDN.
 
@@ -112,7 +112,7 @@ on MDN.
 
 ### flex-grow
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" target="_blank" rel="noopener noreferrer">flex-grow</a>
 on MDN.
 
@@ -126,7 +126,7 @@ on MDN.
 
 ### flex-shrink
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink" target="_blank" rel="noopener noreferrer">flex-shrink</a>
 on MDN.
 
@@ -140,7 +140,7 @@ on MDN.
 
 ### align-self
 
-For more information please see 
+For more information please see
 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" target="_blank" rel="noopener noreferrer">align-self</a>
 on MDN.
 

From 3c10e4b75be97f93c8e6cf7b6cb6904fc745befc Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Wed, 20 Oct 2021 10:11:06 +0700
Subject: [PATCH 5/5] reduce fontSize to '1rem'

---
 docs/src/pages/system/flexbox/AlignContent.js      | 2 +-
 docs/src/pages/system/flexbox/AlignContent.tsx     | 2 +-
 docs/src/pages/system/flexbox/AlignItems.js        | 2 +-
 docs/src/pages/system/flexbox/AlignItems.tsx       | 2 +-
 docs/src/pages/system/flexbox/AlignSelf.js         | 2 +-
 docs/src/pages/system/flexbox/AlignSelf.tsx        | 2 +-
 docs/src/pages/system/flexbox/FlexDirection.js     | 2 +-
 docs/src/pages/system/flexbox/FlexDirection.tsx    | 2 +-
 docs/src/pages/system/flexbox/FlexGrow.js          | 2 +-
 docs/src/pages/system/flexbox/FlexGrow.tsx         | 2 +-
 docs/src/pages/system/flexbox/FlexShrink.js        | 2 +-
 docs/src/pages/system/flexbox/FlexShrink.tsx       | 2 +-
 docs/src/pages/system/flexbox/FlexWrap.js          | 2 +-
 docs/src/pages/system/flexbox/FlexWrap.tsx         | 2 +-
 docs/src/pages/system/flexbox/JustifyContent.js    | 2 +-
 docs/src/pages/system/flexbox/JustifyContent.tsx   | 2 +-
 docs/src/pages/system/flexbox/Order.js             | 2 +-
 docs/src/pages/system/flexbox/Order.tsx            | 2 +-
 docs/src/pages/system/grid/Gap.js                  | 2 +-
 docs/src/pages/system/grid/Gap.tsx                 | 2 +-
 docs/src/pages/system/grid/GridAutoColumns.js      | 2 +-
 docs/src/pages/system/grid/GridAutoColumns.tsx     | 2 +-
 docs/src/pages/system/grid/GridAutoFlow.js         | 2 +-
 docs/src/pages/system/grid/GridAutoFlow.tsx        | 2 +-
 docs/src/pages/system/grid/GridAutoRows.js         | 2 +-
 docs/src/pages/system/grid/GridAutoRows.tsx        | 2 +-
 docs/src/pages/system/grid/GridTemplateColumns.js  | 2 +-
 docs/src/pages/system/grid/GridTemplateColumns.tsx | 2 +-
 docs/src/pages/system/grid/GridTemplateRows.js     | 2 +-
 docs/src/pages/system/grid/GridTemplateRows.tsx    | 2 +-
 docs/src/pages/system/grid/RowAndColumnGap.js      | 2 +-
 docs/src/pages/system/grid/RowAndColumnGap.tsx     | 2 +-
 32 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/src/pages/system/flexbox/AlignContent.js b/docs/src/pages/system/flexbox/AlignContent.js
index 1cc458ce8f915d..b58a4ead0a12d9 100644
--- a/docs/src/pages/system/flexbox/AlignContent.js
+++ b/docs/src/pages/system/flexbox/AlignContent.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/AlignContent.tsx b/docs/src/pages/system/flexbox/AlignContent.tsx
index 07f3f704d2de24..bd37da34449565 100644
--- a/docs/src/pages/system/flexbox/AlignContent.tsx
+++ b/docs/src/pages/system/flexbox/AlignContent.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/AlignItems.js b/docs/src/pages/system/flexbox/AlignItems.js
index 0fd73d20ae650f..b6c24e22b4c76c 100644
--- a/docs/src/pages/system/flexbox/AlignItems.js
+++ b/docs/src/pages/system/flexbox/AlignItems.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/AlignItems.tsx b/docs/src/pages/system/flexbox/AlignItems.tsx
index 23c8403c8c0cbb..a93ca9078ef6d0 100644
--- a/docs/src/pages/system/flexbox/AlignItems.tsx
+++ b/docs/src/pages/system/flexbox/AlignItems.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/AlignSelf.js b/docs/src/pages/system/flexbox/AlignSelf.js
index 30d81e4ba0402b..99894aaaba66ec 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.js
+++ b/docs/src/pages/system/flexbox/AlignSelf.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx b/docs/src/pages/system/flexbox/AlignSelf.tsx
index c3d97621be44b6..cc1d6d0207fb2a 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.tsx
+++ b/docs/src/pages/system/flexbox/AlignSelf.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexDirection.js b/docs/src/pages/system/flexbox/FlexDirection.js
index 7cfdf7befa7bb3..f1b39fd2408d13 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.js
+++ b/docs/src/pages/system/flexbox/FlexDirection.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexDirection.tsx b/docs/src/pages/system/flexbox/FlexDirection.tsx
index 7b67a89f2a524f..446ff3a9c67dc6 100644
--- a/docs/src/pages/system/flexbox/FlexDirection.tsx
+++ b/docs/src/pages/system/flexbox/FlexDirection.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexGrow.js b/docs/src/pages/system/flexbox/FlexGrow.js
index a2a3771a0245e7..c814adba24100f 100644
--- a/docs/src/pages/system/flexbox/FlexGrow.js
+++ b/docs/src/pages/system/flexbox/FlexGrow.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexGrow.tsx b/docs/src/pages/system/flexbox/FlexGrow.tsx
index 174f4a24be1463..9318d6286d9402 100644
--- a/docs/src/pages/system/flexbox/FlexGrow.tsx
+++ b/docs/src/pages/system/flexbox/FlexGrow.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexShrink.js b/docs/src/pages/system/flexbox/FlexShrink.js
index e22fec3add42c9..eb0864c87ae726 100644
--- a/docs/src/pages/system/flexbox/FlexShrink.js
+++ b/docs/src/pages/system/flexbox/FlexShrink.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexShrink.tsx b/docs/src/pages/system/flexbox/FlexShrink.tsx
index abc197b1248463..46dfcb571969ee 100644
--- a/docs/src/pages/system/flexbox/FlexShrink.tsx
+++ b/docs/src/pages/system/flexbox/FlexShrink.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexWrap.js b/docs/src/pages/system/flexbox/FlexWrap.js
index 74bdd2336d4474..d0e1463a8ae3be 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.js
+++ b/docs/src/pages/system/flexbox/FlexWrap.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/FlexWrap.tsx b/docs/src/pages/system/flexbox/FlexWrap.tsx
index caaebc1689a7e9..40de089c8d4067 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.tsx
+++ b/docs/src/pages/system/flexbox/FlexWrap.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js
index 1090432e25ea52..fd276c54a61797 100644
--- a/docs/src/pages/system/flexbox/JustifyContent.js
+++ b/docs/src/pages/system/flexbox/JustifyContent.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/JustifyContent.tsx b/docs/src/pages/system/flexbox/JustifyContent.tsx
index b41cf519f8b48e..6d0dfef077796d 100644
--- a/docs/src/pages/system/flexbox/JustifyContent.tsx
+++ b/docs/src/pages/system/flexbox/JustifyContent.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/Order.js b/docs/src/pages/system/flexbox/Order.js
index 7402d0cb028ac6..554bcdd47f2a51 100644
--- a/docs/src/pages/system/flexbox/Order.js
+++ b/docs/src/pages/system/flexbox/Order.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/flexbox/Order.tsx b/docs/src/pages/system/flexbox/Order.tsx
index 9062ef588a38e5..f2227a4e015da2 100644
--- a/docs/src/pages/system/flexbox/Order.tsx
+++ b/docs/src/pages/system/flexbox/Order.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/Gap.js b/docs/src/pages/system/grid/Gap.js
index 6a182be25e3190..fb8ab45a4bb1f3 100644
--- a/docs/src/pages/system/grid/Gap.js
+++ b/docs/src/pages/system/grid/Gap.js
@@ -12,7 +12,7 @@ function Item(props) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/Gap.tsx b/docs/src/pages/system/grid/Gap.tsx
index 42cfd423a1eccd..6461f119a9d8d7 100644
--- a/docs/src/pages/system/grid/Gap.tsx
+++ b/docs/src/pages/system/grid/Gap.tsx
@@ -11,7 +11,7 @@ function Item(props: BoxProps) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoColumns.js b/docs/src/pages/system/grid/GridAutoColumns.js
index 5ce8bec6ca5ccc..6fed2d4f12ad1c 100644
--- a/docs/src/pages/system/grid/GridAutoColumns.js
+++ b/docs/src/pages/system/grid/GridAutoColumns.js
@@ -12,7 +12,7 @@ function Item(props) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoColumns.tsx b/docs/src/pages/system/grid/GridAutoColumns.tsx
index d1892bdd39c72d..a1c1d453c334ed 100644
--- a/docs/src/pages/system/grid/GridAutoColumns.tsx
+++ b/docs/src/pages/system/grid/GridAutoColumns.tsx
@@ -11,7 +11,7 @@ function Item(props: BoxProps) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoFlow.js b/docs/src/pages/system/grid/GridAutoFlow.js
index b5021147b19ac8..8caf59287918d9 100644
--- a/docs/src/pages/system/grid/GridAutoFlow.js
+++ b/docs/src/pages/system/grid/GridAutoFlow.js
@@ -12,7 +12,7 @@ function Item(props) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoFlow.tsx b/docs/src/pages/system/grid/GridAutoFlow.tsx
index 2c97287af3b29b..bbde60c389e79f 100644
--- a/docs/src/pages/system/grid/GridAutoFlow.tsx
+++ b/docs/src/pages/system/grid/GridAutoFlow.tsx
@@ -11,7 +11,7 @@ function Item(props: BoxProps) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoRows.js b/docs/src/pages/system/grid/GridAutoRows.js
index c2d3d57ec48569..9182f363374214 100644
--- a/docs/src/pages/system/grid/GridAutoRows.js
+++ b/docs/src/pages/system/grid/GridAutoRows.js
@@ -12,7 +12,7 @@ function Item(props) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridAutoRows.tsx b/docs/src/pages/system/grid/GridAutoRows.tsx
index 2ab8b60bdaf7cc..05cb910be27388 100644
--- a/docs/src/pages/system/grid/GridAutoRows.tsx
+++ b/docs/src/pages/system/grid/GridAutoRows.tsx
@@ -11,7 +11,7 @@ function Item(props: BoxProps) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridTemplateColumns.js b/docs/src/pages/system/grid/GridTemplateColumns.js
index ef840cc5211f0c..df8c4bdaa804f5 100644
--- a/docs/src/pages/system/grid/GridTemplateColumns.js
+++ b/docs/src/pages/system/grid/GridTemplateColumns.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridTemplateColumns.tsx b/docs/src/pages/system/grid/GridTemplateColumns.tsx
index 91f3d476538b6d..9dfdc9e4147aa6 100644
--- a/docs/src/pages/system/grid/GridTemplateColumns.tsx
+++ b/docs/src/pages/system/grid/GridTemplateColumns.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridTemplateRows.js b/docs/src/pages/system/grid/GridTemplateRows.js
index 37336730c5e077..2eae238c63f8ef 100644
--- a/docs/src/pages/system/grid/GridTemplateRows.js
+++ b/docs/src/pages/system/grid/GridTemplateRows.js
@@ -13,7 +13,7 @@ function Item(props) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/GridTemplateRows.tsx b/docs/src/pages/system/grid/GridTemplateRows.tsx
index f028c6cc08733b..1f4b4baf98cbf4 100644
--- a/docs/src/pages/system/grid/GridTemplateRows.tsx
+++ b/docs/src/pages/system/grid/GridTemplateRows.tsx
@@ -12,7 +12,7 @@ function Item(props: BoxProps) {
         m: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/RowAndColumnGap.js b/docs/src/pages/system/grid/RowAndColumnGap.js
index cc91b017eabdfc..41c1b083b3c102 100644
--- a/docs/src/pages/system/grid/RowAndColumnGap.js
+++ b/docs/src/pages/system/grid/RowAndColumnGap.js
@@ -12,7 +12,7 @@ function Item(props) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}
diff --git a/docs/src/pages/system/grid/RowAndColumnGap.tsx b/docs/src/pages/system/grid/RowAndColumnGap.tsx
index 012e946534f1c1..2814ca72cb2075 100644
--- a/docs/src/pages/system/grid/RowAndColumnGap.tsx
+++ b/docs/src/pages/system/grid/RowAndColumnGap.tsx
@@ -11,7 +11,7 @@ function Item(props: BoxProps) {
         p: 1,
         borderRadius: 1,
         textAlign: 'center',
-        fontSize: 19,
+        fontSize: '1rem',
         fontWeight: '700',
         ...sx,
       }}