Skip to content

align-content.mdx

Latest commit

 

History

History
201 lines (171 loc) · 6.01 KB

align-content.mdx

File metadata and controls

201 lines (171 loc) · 6.01 KB
Raw
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
utility
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

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-start flex-wrap">...</div>

End

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-end flex-wrap">...</div>

Center

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-center flex-wrap">...</div>

Between

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-between flex-wrap">...</div>

Around

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-around flex-wrap">...</div>

Stretch

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
<div class="d-flex align-content-stretch flex-wrap">...</div>

Responsive

Responsive variations also exist for align-content.

    {getData('breakpoints').map((breakpoint) => { return (
  • .{breakpoint.abbr}align-content-start
  • .{breakpoint.abbr}align-content-end
  • .{breakpoint.abbr}align-content-center
  • .{breakpoint.abbr}align-content-between
  • .{breakpoint.abbr}align-content-around
  • .{breakpoint.abbr}align-content-stretch
    • ) })}

CSS

Sass utilities API

Align content utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.