From 26b7f5a4c70f4da13da0dc81d0cfd307d7776e53 Mon Sep 17 00:00:00 2001
From: Bredillet Thomas <thoma39@msn.com>
Date: Tue, 3 Mar 2020 16:46:52 +0100
Subject: [PATCH] [docs] Flexbox, add element for show the good effect (#19956)

---
 docs/src/pages/system/flexbox/AlignSelf.js  |  4 ++--
 docs/src/pages/system/flexbox/AlignSelf.tsx |  4 ++--
 docs/src/pages/system/flexbox/FlexWrap.js   | 22 +++++++++++++--------
 docs/src/pages/system/flexbox/FlexWrap.tsx  | 22 +++++++++++++--------
 4 files changed, 32 insertions(+), 20 deletions(-)

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>