root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity
bootstrap/site/content/docs/5.3/utilities/flex.md

665 lines
22 KiB
Markdown
Raw Normal View History

Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
---
layout: docs
update name
2017-07-02 10:48:24 +08:00
title: Flex
new toc in utils and about and extend
2017-05-29 02:25:59 +08:00
description: Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
group: utilities
new toc in utils and about and extend
2017-05-29 02:25:59 +08:00
toc: true
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
---
## Enable flex behaviors
try out alt responsive variation lists
2016-12-24 03:56:07 +08:00
Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex p-2">I'm a flexbox container!</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.d{{ .abbr }}-flex`
- `.d{{ .abbr }}-inline-flex`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
try out alt responsive variation lists
2016-12-24 03:56:07 +08:00
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
## Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is `row`. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex flex-row mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex flex-column mb-3">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `flex-direction`.
Start to blow out and document more flexbox utilities - Adds new flexbox.md file to utilities docs - Adds a `breakpoints.yml` data file for easier output of responsive classes in the docs. Will put this to use on other pages soon. - Adds hella flex utils. There are some dupes for now, but they'll get removed in time.
2016-12-24 03:48:03 +08:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.flex{{ .abbr }}-row`
- `.flex{{ .abbr }}-row-reverse`
- `.flex{{ .abbr }}-column`
- `.flex{{ .abbr }}-column-reverse`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
try out alt responsive variation lists
2016-12-24 03:56:07 +08:00
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
## Justify content
Add `space-evenly` option for `justify-content` (#30910)
2020-05-30 21:19:10 +08:00
Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex justify-content-start mb-3">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">Start</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex justify-content-end mb-3">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">End</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex justify-content-center mb-3">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">Center</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex justify-content-between mb-3">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">Between</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex justify-content-around mb-3">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">Around</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex justify-content-evenly">
Improve readability in docs flex page (#34647) It's not easy to otherwise correlate the examples with the relevant classes: you'd have to mentally count and correlate them. This obviates that need. Please see the image below to see the usefulness of the above. Co-authored-by: Mark Otto <markdotto@gmail.com>
2022-12-29 05:19:55 +08:00
<div class="p-2 bd-highlight">Justify</div>
<div class="p-2 bd-highlight">Content</div>
<div class="p-2 bd-highlight">Evenly</div>
Add `space-evenly` option for `justify-content` (#30910)
2020-05-30 21:19:10 +08:00
</div>
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
Add `space-evenly` option for `justify-content` (#30910)
2020-05-30 21:19:10 +08:00
<div class="d-flex justify-content-evenly">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `justify-content`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.justify-content{{ .abbr }}-start`
- `.justify-content{{ .abbr }}-end`
- `.justify-content{{ .abbr }}-center`
- `.justify-content{{ .abbr }}-between`
- `.justify-content{{ .abbr }}-around`
Add `space-evenly` option for `justify-content` (#30910)
2020-05-30 21:19:10 +08:00
- `.justify-content{{ .abbr }}-evenly`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
more flexbox docs
2016-12-27 05:23:07 +08:00
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
## Align items
align-self docs
2016-12-24 05:23:11 +08:00
Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-items-start mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex align-items-end mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex align-items-center mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex align-items-baseline mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex align-items-stretch" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
</div>
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
change presentation of those utils docs
2016-12-24 05:15:55 +08:00
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `align-items`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.align-items{{ .abbr }}-start`
- `.align-items{{ .abbr }}-end`
- `.align-items{{ .abbr }}-center`
- `.align-items{{ .abbr }}-baseline`
- `.align-items{{ .abbr }}-stretch`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
more flexbox docs
2016-12-27 05:23:07 +08:00
align-self docs
2016-12-24 05:23:11 +08:00
## Align self
Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-start p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
align-self docs
2016-12-24 05:23:11 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-end p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
align-self docs
2016-12-24 05:23:11 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-center p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
align-self docs
2016-12-24 05:23:11 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex mb-3" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-baseline p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
align-self docs
2016-12-24 05:23:11 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex" style="height: 100px">
<div class="p-2">Flex item</div>
<div class="align-self-stretch p-2">Aligned flex item</div>
<div class="p-2">Flex item</div>
align-self docs
2016-12-24 05:23:11 +08:00
</div>
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
align-self docs
2016-12-24 05:23:11 +08:00
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
align-self docs
2016-12-24 05:23:11 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `align-self`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.align-self{{ .abbr }}-start`
- `.align-self{{ .abbr }}-end`
- `.align-self{{ .abbr }}-center`
- `.align-self{{ .abbr }}-baseline`
- `.align-self{{ .abbr }}-stretch`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
more flexbox docs
2016-12-27 05:23:07 +08:00
Document .flex-fill class in flex utils
2018-01-21 08:44:38 +08:00
## Fill
Remove trailing space.
2018-10-30 17:38:13 +08:00
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.
Document .flex-fill class in flex utils
2018-01-21 08:44:38 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex">
<div class="p-2 flex-fill">Flex item with a lot of content</div>
<div class="p-2 flex-fill">Flex item</div>
<div class="p-2 flex-fill">Flex item</div>
Document .flex-fill class in flex utils
2018-01-21 08:44:38 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Document .flex-fill class in flex utils
2018-01-21 08:44:38 +08:00
Responsive variations also exist for `flex-fill`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.flex{{ .abbr }}-fill`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
Document .flex-fill class in flex utils
2018-01-21 08:44:38 +08:00
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
## Grow and shrink
Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill available space. In the example below, the `.flex-grow-1` elements uses all available space it can, while allowing the remaining two flex items their necessary space.
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex">
<div class="p-2 flex-grow-1">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Third flex item</div>
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
Fix typo (#30745) (#30746) Use possessive form of it (cherry picked from commit d63b651f3708e878814d4c98dd85a759f80fefc4) Co-authored-by: Quy <quy@fluxbb.org>
2020-05-06 14:12:26 +08:00
Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if necessary. In the example below, the second flex item with `.flex-shrink-1` is forced to wrap its contents to a new line, "shrinking" to allow more space for the previous flex item with `.w-100`.
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex">
<div class="p-2 w-100">Flex item</div>
<div class="p-2 flex-shrink-1">Flex item</div>
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
Responsive variations also exist for `flex-grow` and `flex-shrink`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.flex{{ .abbr }}-{grow|shrink}-0`
- `.flex{{ .abbr }}-{grow|shrink}-1`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
Add new .flex-grow and .flex-shrink utils
2018-04-01 05:22:01 +08:00
reorder docs
2016-12-25 10:03:16 +08:00
## Auto margins
docs(examples): new cheatsheet and RTL examples
2020-06-09 21:44:20 +08:00
Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
document it all, add align items examples
2016-12-25 10:11:57 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
Update docs for IE10+IE11 support of auto margins (#24427) IE10 and IE11 do not properly support the use of margin-auto on flex parents with a justify-content value other than flex-start. This PR removes the examples showcasing those two classes at play together in favor of simpler ones with _just_ the margin-auto utilities. More details can be found at https://stackoverflow.com/a/37535548, which has been linked to from the docs as well. Closes #24319 and closes #24413.
2017-10-19 14:16:18 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex mb-3">
<div class="me-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
reorder docs
2016-12-25 10:03:16 +08:00
</div>
document it all, add align items examples
2016-12-25 10:11:57 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex mb-3">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ms-auto p-2">Flex item</div>
document it all, add align items examples
2016-12-25 10:11:57 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
document it all, add align items examples
2016-12-25 10:11:57 +08:00
### With align-items
Update docs for IE10+IE11 support of auto margins (#24427) IE10 and IE11 do not properly support the use of margin-auto on flex parents with a justify-content value other than flex-start. This PR removes the examples showcasing those two classes at play together in favor of simpler ones with _just_ the margin-auto utilities. More details can be found at https://stackoverflow.com/a/37535548, which has been linked to from the docs as well. Closes #24319 and closes #24413.
2017-10-19 14:16:18 +08:00
Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
document it all, add align items examples
2016-12-25 10:11:57 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
document it all, add align items examples
2016-12-25 10:11:57 +08:00
</div>
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
document it all, add align items examples
2016-12-25 10:11:57 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
reorder docs
2016-12-25 10:03:16 +08:00
## Wrap
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with `.flex-nowrap`, wrapping with `.flex-wrap`, or reverse wrapping with `.flex-wrap-reverse`.
reorder docs
2016-12-25 10:03:16 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex flex-nowrap" style="width: 8rem;">
<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>
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
</div>
reorder docs
2016-12-25 10:03:16 +08:00
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
<div class="d-flex flex-nowrap">
...
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
reorder docs
2016-12-25 10:03:16 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex flex-wrap">
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.
2022-10-11 14:16:22 +08:00
<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>
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
</div>
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
<div class="d-flex flex-wrap">
...
reorder docs
2016-12-25 10:03:16 +08:00
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex flex-wrap-reverse">
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.
2022-10-11 14:16:22 +08:00
<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>
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
</div>
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
<div class="d-flex flex-wrap-reverse">
...
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
follow up to #21436 to add docs for the .flex-row-reverse , .flex-column-reverse, and .flex-wrap-reverse
2016-12-27 05:17:50 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `flex-wrap`.
reorder docs
2016-12-25 10:03:16 +08:00
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.flex{{ .abbr }}-nowrap`
- `.flex{{ .abbr }}-wrap`
- `.flex{{ .abbr }}-wrap-reverse`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
reorder docs
2016-12-25 10:03:16 +08:00
add order docs
2016-12-25 04:33:42 +08:00
## Order
Decrease number of order utilities (#28874)
2019-06-18 13:02:14 +08:00
Change the _visual_ order of specific flex items with a handful of `order` utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As `order` takes any integer value from 0 to 5, add custom CSS for any additional values needed.
add order docs
2016-12-25 04:33:42 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
{{< example class="bd-example-flex" >}}
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
add order docs
2016-12-25 04:33:42 +08:00
</div>
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< /example >}}
add order docs
2016-12-25 04:33:42 +08:00
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `order`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $bp := $.Site.Data.breakpoints -}}
Docs: simplify a few Hugo `range`s. (#29333)
2019-09-02 17:31:02 +08:00
{{- range (seq 0 5) }}
- `.order{{ $bp.abbr }}-{{ . }}`
Decrease number of order utilities (#28874)
2019-06-18 13:02:14 +08:00
{{- end -}}
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
Fix Typos across Bootstrap repository (#29082)
2019-07-20 17:53:02 +08:00
Additionally there are also responsive `.order-first` and `.order-last` classes that change the `order` of an element by applying `order: -1` and `order: 6`, respectively.
Decrease number of order utilities (#28874)
2019-06-18 13:02:14 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $bp := $.Site.Data.breakpoints -}}
Docs: simplify a few Hugo `range`s. (#29333)
2019-09-02 17:31:02 +08:00
{{- range (slice "first" "last") }}
- `.order{{ $bp.abbr }}-{{ . }}`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{- end -}}
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
more flexbox docs
2016-12-27 05:23:07 +08:00
document align-content utils
2016-12-24 05:16:13 +08:00
## Align content
Markdownlint fixes (#37255)
2022-10-26 02:37:36 +08:00
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.
document align-content utils
2016-12-24 05:16:13 +08:00
Fix flex order generated code and a typo.
2017-08-09 23:09:28 +08:00
**Heads up!** This property has no effect on single rows of flex items.
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-start flex-wrap">
...
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-end flex-wrap">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
document justify-content and align-items utils
2016-12-24 04:54:01 +08:00
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-center flex-wrap">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-between flex-wrap">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-around flex-wrap">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
document align-content utils
2016-12-24 05:16:13 +08:00
Refactor some docs examples CSS (#36194) * Fix some more borders and margins * Flex utilities docs: remove .bd-highlight class from snippets * Explicit close target * Reorder to keep base class up top * Fix custom position example * Tooltips: add code snippet, use scss-docs ref for custom tooltip * Tweak text for pagination examples * Modals: move custom styles to utilities * Grid docs: Combine selectors and share coloring * Refactor tons of little things
2022-04-20 02:21:43 +08:00
<div class="bd-example bd-example-flex">
<div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
<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>
document align-content utils
2016-12-24 05:16:13 +08:00
</div>
</div>
Minor Markdown consistency cleanup. (#24605)
2017-10-31 05:53:57 +08:00
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```html
document align-content utils
2016-12-24 05:16:13 +08:00
<div class="d-flex align-content-stretch flex-wrap">...</div>
docs: switch to fenced codeblocks (#31806)
2020-10-19 17:56:49 +08:00
```
more flexbox docs
2016-12-27 05:23:07 +08:00
Responsive variations also exist for `align-content`.
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
{{< markdown >}}
{{< flex.inline >}}
{{- range $.Site.Data.breakpoints }}
- `.align-content{{ .abbr }}-start`
- `.align-content{{ .abbr }}-end`
- `.align-content{{ .abbr }}-center`
docs: Add responsive variations for align-content-between (#35532) Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-12-15 04:29:35 +08:00
- `.align-content{{ .abbr }}-between`
Switch to Hugo. No more Ruby dependency and most important more than 10 times less build time (at least on Windows)!
2019-01-09 00:33:28 +08:00
- `.align-content{{ .abbr }}-around`
- `.align-content{{ .abbr }}-stretch`
{{- end -}}
{{< /flex.inline >}}
{{< /markdown >}}
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 11:29:59 +08:00
Add an example of v4's media component in the flex utils docs (#33207) * Add an example of v4's media component in the flex utils docs * Link to new example from Migration guide Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-03-02 22:08:32 +08:00
## Media object
Looking to replicate the [media object component](https://getbootstrap.com/docs/4.6/components/media-object/) from Bootstrap 4? Recreate it in no time with a few flex utilities that allow even more flexibility and customization than before.
{{< example >}}
<div class="d-flex">
<div class="flex-shrink-0">
{{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
{{< /example >}}
And say you want to vertically center the content next to the image:
{{< example >}}
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
{{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="Image" >}}
</div>
<div class="flex-grow-1 ms-3">
This is some content from a media component. You can replace this with any content and adjust it as needed.
</div>
</div>
{{< /example >}}
Add Sass docs (variables, mixins, and loops) to most pages (#32747) * WIP: Mention variables, mixins, and loops in docs * Add Sass sections to component pages * add sass docs for forms and content * Update buttons.md * Remove empty mixins sections * Massive update to utilities and some consistency changes Co-authored-by: XhmikosR <xhmikosr@gmail.com>
2021-02-11 11:29:59 +08:00
## 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" >}})
{{< scss-docs name="utils-flex" file="scss/_utilities.scss" >}}