Skip to content

align-self.mdx

Latest commit

 

History

History
78 lines (65 loc) · 2.58 KB

align-self.mdx

File metadata and controls

78 lines (65 loc) · 2.58 KB
Raw
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
utility
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

Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
Flex item
Aligned flex item
Flex item
<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.

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

CSS

Sass utilities API

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