mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-21 03:41:03 +00:00
Code Issues Projects Releases Wiki Activity

Improve example of .flex-wrap and -reverse

Browse Source 
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.
This commit is contained in:
naitsirch 2022-10-11 08:16:22 +02:00 committed by Mark Otto
parent 4cb046a6b8
commit 7a2f7b06ce
1 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
site/content/docs/5.2/utilities/flex.md
View File

@ -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>