mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 04:51:39 +02:00
89 lines
2.6 KiB
Plaintext
89 lines
2.6 KiB
Plaintext
---
|
|
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,
|
|
)
|
|
),
|
|
```
|