diff --git a/docs/src/pages/system/flexbox/AlignContent.js b/docs/src/pages/system/flexbox/AlignContent.js
index 02cc8c96f0d659..b58a4ead0a12d9 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: '1rem',
+        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..bd37da34449565 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: '1rem',
+        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..b6c24e22b4c76c 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: '1rem',
+        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..a93ca9078ef6d0 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: '1rem',
+        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,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/AlignSelf.js b/docs/src/pages/system/flexbox/AlignSelf.js
index d5263943792a26..99894aaaba66ec 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: '1rem',
+        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..cc1d6d0207fb2a 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: '1rem',
+        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..f1b39fd2408d13 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: '1rem',
+        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..446ff3a9c67dc6 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: '1rem',
+        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..c814adba24100f 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: '1rem',
+        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..9318d6286d9402 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: '1rem',
+        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..eb0864c87ae726 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: '1rem',
+        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..46dfcb571969ee 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: '1rem',
+        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..d0e1463a8ae3be 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: '1rem',
+        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..40de089c8d4067 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: '1rem',
+        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/JustifyContent.js b/docs/src/pages/system/flexbox/JustifyContent.js
index c3907d96d7e4ad..fd276c54a61797 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: '1rem',
+        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..6d0dfef077796d 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: '1rem',
+        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/Order.js b/docs/src/pages/system/flexbox/Order.js
index 8584abecee50a3..554bcdd47f2a51 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: '1rem',
+        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..f2227a4e015da2 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: '1rem',
+        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 b2f0f72b918837..a2299e487fb183 100644
--- a/docs/src/pages/system/flexbox/flexbox.md
+++ b/docs/src/pages/system/flexbox/flexbox.md
@@ -12,59 +12,96 @@ 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
+<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}}
 
 ```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
+<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}}
 
 ```jsx
 <Box sx={{ flexWrap: 'nowrap' }}>…
 <Box sx={{ flexWrap: 'wrap' }}>…
+<Box sx={{ flexWrap: 'wrap-reverse' }}>…
 ```
 
 ### justify-content
 
+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}}
 
 ```jsx
 <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' }}>…
 ```
 
 ### align-items
 
+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}}
 
 ```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
+<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}}
 
 ```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
+<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}}
 
 ```jsx
@@ -75,6 +112,10 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### flex-grow
 
+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}}
 
 ```jsx
@@ -85,6 +126,10 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### flex-shrink
 
+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}}
 
 ```jsx
@@ -95,6 +140,10 @@ If you are **new to or unfamiliar with flexbox**, we encourage you to read this
 
 ### align-self
 
+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}}
 
 ```jsx
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,
       }}