[docs] Flexbox, add element for show the good effect (mui#19956)

EsoterikStare · Mar 30, 2020 · 26b7f5a · 26b7f5a
1 parent 5aa70ae
commit 26b7f5a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>