diff options
| author | naitsirch <naitsirch@e.mail.de> | 2022-10-11 09:16:22 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2022-10-12 21:45:13 +0300 |
| commit | 7a2f7b06ce082c0a2c11add9f8d5d6a3e18cb275 (patch) | |
| tree | f5253f4f57f39538980658b94d4e047afae4098d /site | |
| parent | 4cb046a6b8b37a0f328fa5b86fbd573ca3f0dc33 (diff) | |
Improve example of .flex-wrap and -reverse
The current example of `.flex-wrap` and `.flex-wrap-reverse` does not really show the difference between those two utilities, because every item is labelled 'Flex item'.
With the added numbers it is more clear what happens and how `.flex-wrap-reverse` works.
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.2/utilities/flex.md | 58 |
1 files changed, 28 insertions, 30 deletions
diff --git a/site/content/docs/5.2/utilities/flex.md b/site/content/docs/5.2/utilities/flex.md index 567befe0ee..014e4ddd78 100644 --- a/site/content/docs/5.2/utilities/flex.md +++ b/site/content/docs/5.2/utilities/flex.md @@ -363,21 +363,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( <div class="bd-example bd-example-flex"> <div class="d-flex flex-wrap"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2">Flex item 1</div> + <div class="p-2">Flex item 2</div> + <div class="p-2">Flex item 3</div> + <div class="p-2">Flex item 4</div> + <div class="p-2">Flex item 5</div> + <div class="p-2">Flex item 6</div> + <div class="p-2">Flex item 7</div> + <div class="p-2">Flex item 8</div> + <div class="p-2">Flex item 9</div> + <div class="p-2">Flex item 10</div> + <div class="p-2">Flex item 11</div> + <div class="p-2">Flex item 12</div> + <div class="p-2">Flex item 13</div> + <div class="p-2">Flex item 14</div> </div> </div> @@ -389,21 +388,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all ( <div class="bd-example bd-example-flex"> <div class="d-flex flex-wrap-reverse"> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> - <div class="p-2">Flex item</div> + <div class="p-2">Flex item 1</div> + <div class="p-2">Flex item 2</div> + <div class="p-2">Flex item 3</div> + <div class="p-2">Flex item 4</div> + <div class="p-2">Flex item 5</div> + <div class="p-2">Flex item 6</div> + <div class="p-2">Flex item 7</div> + <div class="p-2">Flex item 8</div> + <div class="p-2">Flex item 9</div> + <div class="p-2">Flex item 10</div> + <div class="p-2">Flex item 11</div> + <div class="p-2">Flex item 12</div> + <div class="p-2">Flex item 13</div> + <div class="p-2">Flex item 14</div> </div> </div> |