diff options
Diffstat (limited to '')
| -rw-r--r-- | site/content/docs/5.3/utilities/flex.md (renamed from site/content/docs/5.2/utilities/flex.md) | 100 |
1 files changed, 49 insertions, 51 deletions
diff --git a/site/content/docs/5.2/utilities/flex.md b/site/content/docs/5.3/utilities/flex.md index 567befe..d0a92e5 100644 --- a/site/content/docs/5.2/utilities/flex.md +++ b/site/content/docs/5.3/utilities/flex.md @@ -82,34 +82,34 @@ Use `justify-content` utilities on flexbox containers to change the alignment of <div class="bd-example bd-example-flex"> <div class="d-flex justify-content-start mb-3"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Start</div> </div> <div class="d-flex justify-content-end mb-3"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">End</div> </div> <div class="d-flex justify-content-center mb-3"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Center</div> </div> <div class="d-flex justify-content-between mb-3"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Between</div> </div> <div class="d-flex justify-content-around mb-3"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Around</div> </div> <div class="d-flex justify-content-evenly"> - <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 bd-highlight">Justify</div> + <div class="p-2 bd-highlight">Content</div> + <div class="p-2 bd-highlight">Evenly</div> </div> </div> @@ -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> @@ -464,7 +462,7 @@ Additionally there are also responsive `.order-first` and `.order-last` classes ## Align content -Use `align-content` utilities on flexbox containers to align flex items *together* on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. +Use `align-content` utilities on flexbox containers to align flex items _together_ on the cross axis. Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `stretch`. To demonstrate these utilities, we've enforced `flex-wrap: wrap` and increased the number of flex items. **Heads up!** This property has no effect on single rows of flex items. @@ -657,9 +655,9 @@ And say you want to vertically center the content next to the image: </div> {{< /example >}} -## Sass +## CSS -### Utilities API +### Sass utilities API Flexbox utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) |