mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 04:51:39 +02:00
Split the flex.mdx file into separate pages
This commit is contained in:
Mark Otto
@@ -117,6 +117,9 @@
|
|||||||
icon_color: red
|
icon_color: red
|
||||||
pages:
|
pages:
|
||||||
- title: API
|
- title: API
|
||||||
|
- title: Align content
|
||||||
|
- title: Align items
|
||||||
|
- title: Align self
|
||||||
- title: Aspect ratio
|
- title: Aspect ratio
|
||||||
- title: Background
|
- title: Background
|
||||||
- title: Border
|
- title: Border
|
||||||
@@ -126,10 +129,13 @@
|
|||||||
- title: Flex
|
- title: Flex
|
||||||
- title: Float
|
- title: Float
|
||||||
- title: Interactions
|
- title: Interactions
|
||||||
|
- title: Justify content
|
||||||
|
- title: Justify items
|
||||||
- title: Link
|
- title: Link
|
||||||
- title: Object fit
|
- title: Object fit
|
||||||
- title: Opacity
|
- title: Opacity
|
||||||
- title: Overflow
|
- title: Overflow
|
||||||
|
- title: Place items
|
||||||
- title: Position
|
- title: Position
|
||||||
- title: Shadows
|
- title: Shadows
|
||||||
- title: Sizing
|
- title: Sizing
|
||||||
|
|||||||
212
site/src/content/docs/utilities/align-content.mdx
Normal file
212
site/src/content/docs/utilities/align-content.mdx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
---
|
||||||
|
title: Align content
|
||||||
|
description: Use align-content utilities to align flex items together on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
### Start
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-start flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-start flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### End
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-end flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-end flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Center
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-center flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-center flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Between
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-between flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-between flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Around
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-around flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-around flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stretch
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex align-content-stretch flex-wrap" 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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-flex align-content-stretch flex-wrap">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-content`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-between</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-around</code></li>
|
||||||
|
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align content 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
|
||||||
|
"align-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
88
site/src/content/docs/utilities/align-items.mdx
Normal file
88
site/src/content/docs/utilities/align-items.mdx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
---
|
||||||
|
title: Align items
|
||||||
|
description: Use align-items utilities to change the alignment of flex items on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
|
||||||
|
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align items 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
|
||||||
|
"align-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-items,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
89
site/src/content/docs/utilities/align-self.mdx
Normal file
89
site/src/content/docs/utilities/align-self.mdx
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
---
|
||||||
|
title: Align self
|
||||||
|
description: Use align-self utilities to individually change the alignment of flex items on the cross axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
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).
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `align-self`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
|
||||||
|
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Align self 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
|
||||||
|
"align-self": (
|
||||||
|
responsive: true,
|
||||||
|
property: align-self,
|
||||||
|
values: (
|
||||||
|
auto: auto,
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
baseline: baseline,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
@@ -49,7 +49,7 @@ Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-r
|
|||||||
<div class="p-2">Flex item 3</div>
|
<div class="p-2">Flex item 3</div>
|
||||||
</div>`} />
|
</div>`} />
|
||||||
|
|
||||||
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
|
Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to start the vertical direction from the opposite side.
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex flex-column mb-3">
|
<Example class="bd-example-flex" code={`<div class="d-flex flex-column mb-3">
|
||||||
<div class="p-2">Flex item 1</div>
|
<div class="p-2">Flex item 1</div>
|
||||||
@@ -65,191 +65,14 @@ Use `.flex-column` to set a vertical direction, or `.flex-column-reverse` to st
|
|||||||
Responsive variations also exist for `flex-direction`.
|
Responsive variations also exist for `flex-direction`.
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
{getSequence(0, 5).map((i) => (
|
||||||
return (
|
<Fragment key={i}>
|
||||||
<Fragment>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-row</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-row</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-row-reverse</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-row-reverse</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-column</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-column</code></li>
|
<li><code>.flex{getData('breakpoints')[i].abbr}-column-reverse</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-column-reverse</code></li>
|
</Fragment>
|
||||||
</Fragment>
|
))}
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Justify content
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex">
|
|
||||||
<div class="d-flex justify-content-start mb-3">
|
|
||||||
<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 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 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 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 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 bd-highlight">Justify</div>
|
|
||||||
<div class="p-2 bd-highlight">Content</div>
|
|
||||||
<div class="p-2 bd-highlight">Evenly</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<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>
|
|
||||||
<div class="d-flex justify-content-evenly">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `justify-content`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-between</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-around</code></li>
|
|
||||||
<li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## Align items
|
|
||||||
|
|
||||||
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).
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<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>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-baseline</code></li>
|
|
||||||
<li><code>.align-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## 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).
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<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>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-self`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-baseline</code></li>
|
|
||||||
<li><code>.align-self{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Fill
|
## Fill
|
||||||
@@ -267,14 +90,14 @@ Responsive variations also exist for `flex-fill`.
|
|||||||
<ul>
|
<ul>
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
return (
|
return (
|
||||||
<li><code>.flex{breakpoint.abbr}-fill</code></li>
|
<li key={breakpoint.abbr}><code>.flex{breakpoint.abbr}-fill</code></li>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Grow and shrink
|
## 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.
|
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.
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex">
|
<Example class="bd-example-flex" code={`<div class="d-flex">
|
||||||
<div class="p-2 flex-grow-1">Flex item</div>
|
<div class="p-2 flex-grow-1">Flex item</div>
|
||||||
@@ -282,7 +105,7 @@ Use `.flex-grow-*` utilities to toggle a flex item’s ability to grow to fill a
|
|||||||
<div class="p-2">Third flex item</div>
|
<div class="p-2">Third flex item</div>
|
||||||
</div>`} />
|
</div>`} />
|
||||||
|
|
||||||
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`.
|
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`.
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<div class="d-flex">
|
<Example class="bd-example-flex" code={`<div class="d-flex">
|
||||||
<div class="p-2 w-100">Flex item</div>
|
<div class="p-2 w-100">Flex item</div>
|
||||||
@@ -294,52 +117,16 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
|
|||||||
<ul>
|
<ul>
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment key={breakpoint.abbr}>
|
||||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-0</code></li>
|
<li><code>.flex{breakpoint.abbr}-grow-0</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-{'{'}grow|shrink{'}'}-1</code></li>
|
<li><code>.flex{breakpoint.abbr}-grow-1</code></li>
|
||||||
|
<li><code>.flex{breakpoint.abbr}-shrink-0</code></li>
|
||||||
|
<li><code>.flex{breakpoint.abbr}-shrink-1</code></li>
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Auto margins
|
|
||||||
|
|
||||||
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`).
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
### With align-items
|
|
||||||
|
|
||||||
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`.
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<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>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
## Wrap
|
## Wrap
|
||||||
|
|
||||||
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`.
|
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`.
|
||||||
@@ -415,7 +202,7 @@ Responsive variations also exist for `flex-wrap`.
|
|||||||
<ul>
|
<ul>
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment key={breakpoint.abbr}>
|
||||||
<li><code>.flex{breakpoint.abbr}-nowrap</code></li>
|
<li><code>.flex{breakpoint.abbr}-nowrap</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-wrap</code></li>
|
<li><code>.flex{breakpoint.abbr}-wrap</code></li>
|
||||||
<li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
|
<li><code>.flex{breakpoint.abbr}-wrap-reverse</code></li>
|
||||||
@@ -424,335 +211,10 @@ Responsive variations also exist for `flex-wrap`.
|
|||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
## Order
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
<Example class="bd-example-flex" code={`<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>
|
|
||||||
</div>`} />
|
|
||||||
|
|
||||||
Responsive variations also exist for `order`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => getSequence(0, 5).map((value) => {
|
|
||||||
return (
|
|
||||||
<li><code>.order{breakpoint.abbr}-{value}</code></li>
|
|
||||||
)
|
|
||||||
}))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => ['first', 'last'].map((value) => {
|
|
||||||
return (
|
|
||||||
<li><code>.order{breakpoint.abbr}-{value}</code></li>
|
|
||||||
)
|
|
||||||
}))}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## 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.
|
|
||||||
|
|
||||||
**Heads up!** This property has no effect on single rows of flex items.
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-start flex-wrap">
|
|
||||||
...
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-end flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-center flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-between flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-around flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-flex align-content-stretch flex-wrap">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `align-content`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-between</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-around</code></li>
|
|
||||||
<li><code>.align-content{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## CSS Grid utilities
|
|
||||||
|
|
||||||
While most of the utilities above apply to flexbox containers, Bootstrap also includes utilities specifically for CSS Grid layouts.
|
|
||||||
|
|
||||||
### Justify items
|
|
||||||
|
|
||||||
Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex vstack gap-3">
|
|
||||||
<div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-grid justify-items-start">...</div>
|
|
||||||
<div class="d-grid justify-items-end">...</div>
|
|
||||||
<div class="d-grid justify-items-center">...</div>
|
|
||||||
<div class="d-grid justify-items-stretch">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `justify-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
### Place items
|
|
||||||
|
|
||||||
Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
|
||||||
|
|
||||||
<div class="bd-example bd-example-flex vstack gap-3">
|
|
||||||
<div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
<div class="p-2">Grid item</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
```html
|
|
||||||
<div class="d-grid place-items-start">...</div>
|
|
||||||
<div class="d-grid place-items-end">...</div>
|
|
||||||
<div class="d-grid place-items-center">...</div>
|
|
||||||
<div class="d-grid place-items-stretch">...</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Responsive variations also exist for `place-items`.
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{getData('breakpoints').map((breakpoint) => {
|
|
||||||
return (
|
|
||||||
<Fragment>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-start</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-end</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-center</code></li>
|
|
||||||
<li><code>.place-items{breakpoint.abbr}-stretch</code></li>
|
|
||||||
</Fragment>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
## 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 code={`<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>`} />
|
|
||||||
|
|
||||||
And say you want to vertically center the content next to the image:
|
|
||||||
|
|
||||||
<Example code={`<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>`} />
|
|
||||||
|
|
||||||
## CSS
|
## CSS
|
||||||
|
|
||||||
### Sass utilities API
|
### Sass utilities API
|
||||||
|
|
||||||
Flexbox and CSS Grid utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]([[docsref:/utilities/api#using-the-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]])
|
||||||
|
|
||||||
<ScssDocs name="utils-flex" file="scss/_utilities.scss" />
|
<ScssDocs name="utils-flex" file="scss/_utilities.scss" />
|
||||||
|
|||||||
96
site/src/content/docs/utilities/justify-content.mdx
Normal file
96
site/src/content/docs/utilities/justify-content.mdx
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
---
|
||||||
|
title: Justify content
|
||||||
|
description: Use justify-content utilities to change the alignment of flex items on the main axis.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
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`.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex">
|
||||||
|
<div class="d-flex justify-content-start mb-3">
|
||||||
|
<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 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 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 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 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 bd-highlight">Justify</div>
|
||||||
|
<div class="p-2 bd-highlight">Content</div>
|
||||||
|
<div class="p-2 bd-highlight">Evenly</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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>
|
||||||
|
<div class="d-flex justify-content-evenly">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `justify-content`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-between</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-around</code></li>
|
||||||
|
<li><code>.justify-content{breakpoint.abbr}-evenly</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Justify content 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
|
||||||
|
"justify-content": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-content,
|
||||||
|
values: (
|
||||||
|
start: flex-start,
|
||||||
|
end: flex-end,
|
||||||
|
center: center,
|
||||||
|
between: space-between,
|
||||||
|
around: space-around,
|
||||||
|
evenly: space-evenly,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
82
site/src/content/docs/utilities/justify-items.mdx
Normal file
82
site/src/content/docs/utilities/justify-items.mdx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
title: Justify items
|
||||||
|
description: Use justify-items utilities to control the alignment of grid items along the inline axis (horizontally, in most writing modes).
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `justify-items` utilities on CSS Grid containers to change the alignment of grid items along the inline (row) axis. This property controls how grid items are positioned horizontally within their grid areas.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Use `justify-items` utilities to control the horizontal alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex vstack gap-3">
|
||||||
|
<div class="d-grid gap-3 justify-items-start" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-end" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-center" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 justify-items-stretch" style="grid-template-columns: 1fr 1fr 1fr;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-grid justify-items-start">...</div>
|
||||||
|
<div class="d-grid justify-items-end">...</div>
|
||||||
|
<div class="d-grid justify-items-center">...</div>
|
||||||
|
<div class="d-grid justify-items-stretch">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `justify-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.justify-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Justify items 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
|
||||||
|
"justify-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: justify-items,
|
||||||
|
values: (
|
||||||
|
start: start,
|
||||||
|
end: end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
82
site/src/content/docs/utilities/place-items.mdx
Normal file
82
site/src/content/docs/utilities/place-items.mdx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
---
|
||||||
|
title: Place items
|
||||||
|
description: Use place-items utilities to control the alignment of grid items within their grid areas on both the block and inline axes simultaneously.
|
||||||
|
toc: true
|
||||||
|
mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getData } from '@libs/data'
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Use `place-items` utilities on CSS Grid containers as a shorthand to set both `align-items` and `justify-items` at once. This property controls how grid items are positioned within their grid areas on both axes.
|
||||||
|
|
||||||
|
## Basic usage
|
||||||
|
|
||||||
|
Use `place-items` utilities to control the alignment of grid items. Choose from `start`, `end`, `center`, or `stretch` (browser default).
|
||||||
|
|
||||||
|
<div class="bd-example bd-example-flex vstack gap-3">
|
||||||
|
<div class="d-grid gap-3 place-items-start" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-end" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-center" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-3 place-items-stretch" style="grid-template-columns: 1fr 1fr 1fr; height: 150px;">
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
<div class="p-2">Grid item</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="d-grid place-items-start">...</div>
|
||||||
|
<div class="d-grid place-items-end">...</div>
|
||||||
|
<div class="d-grid place-items-center">...</div>
|
||||||
|
<div class="d-grid place-items-stretch">...</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Responsive
|
||||||
|
|
||||||
|
Responsive variations also exist for `place-items`.
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
{getData('breakpoints').map((breakpoint) => {
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-start</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-end</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-center</code></li>
|
||||||
|
<li><code>.place-items{breakpoint.abbr}-stretch</code></li>
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
## CSS
|
||||||
|
|
||||||
|
### Sass utilities API
|
||||||
|
|
||||||
|
Place items 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
|
||||||
|
"place-items": (
|
||||||
|
responsive: true,
|
||||||
|
property: place-items,
|
||||||
|
values: (
|
||||||
|
start: start,
|
||||||
|
end: end,
|
||||||
|
center: center,
|
||||||
|
stretch: stretch,
|
||||||
|
)
|
||||||
|
),
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user