diff --git a/docs/src/pages/system/flexbox/AlignSelf.js b/docs/src/pages/system/flexbox/AlignSelf.js
index a86b3c879667c9..e8cb76053d0086 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.js
+++ b/docs/src/pages/system/flexbox/AlignSelf.js
@@ -16,10 +16,10 @@ export default function AlignSelf() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300" alignSelf="flex-end">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
     </div>
diff --git a/docs/src/pages/system/flexbox/AlignSelf.tsx b/docs/src/pages/system/flexbox/AlignSelf.tsx
index a86b3c879667c9..e8cb76053d0086 100644
--- a/docs/src/pages/system/flexbox/AlignSelf.tsx
+++ b/docs/src/pages/system/flexbox/AlignSelf.tsx
@@ -16,10 +16,10 @@ export default function AlignSelf() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300" alignSelf="flex-end">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
       </Box>
     </div>
diff --git a/docs/src/pages/system/flexbox/FlexWrap.js b/docs/src/pages/system/flexbox/FlexWrap.js
index da39f48ad72abe..0d8f541f5a60e2 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.js
+++ b/docs/src/pages/system/flexbox/FlexWrap.js
@@ -16,16 +16,19 @@ export default function FlexWrap() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 4
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 5
+        </Box>
+        <Box p={1} bgcolor="grey.300">
+          Item 6
         </Box>
       </Box>
       <Box
@@ -40,16 +43,19 @@ export default function FlexWrap() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 4
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 5
+        </Box>
+        <Box p={1} bgcolor="grey.300">
+          Item 6
         </Box>
       </Box>
     </div>
diff --git a/docs/src/pages/system/flexbox/FlexWrap.tsx b/docs/src/pages/system/flexbox/FlexWrap.tsx
index da39f48ad72abe..0d8f541f5a60e2 100644
--- a/docs/src/pages/system/flexbox/FlexWrap.tsx
+++ b/docs/src/pages/system/flexbox/FlexWrap.tsx
@@ -16,16 +16,19 @@ export default function FlexWrap() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 4
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 5
+        </Box>
+        <Box p={1} bgcolor="grey.300">
+          Item 6
         </Box>
       </Box>
       <Box
@@ -40,16 +43,19 @@ export default function FlexWrap() {
           Item 1
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 2
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 3
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 4
         </Box>
         <Box p={1} bgcolor="grey.300">
-          Item 1
+          Item 5
+        </Box>
+        <Box p={1} bgcolor="grey.300">
+          Item 6
         </Box>
       </Box>
     </div>