GC Design SystemCSS Shortcuts
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Align self

The align self class sets the align-self property. It controls how an individual item aligns itself along the container’s cross axis, allowing it to override the container’s align-items setting for that specific item. In flexbox, the flex-direction property sets the main and cross axis. The effects of align-self change based on the container's direction. Overview
CSS Shortcut class Applied style 
align-self-auto
 
align-self: auto;
 
align-self-baseline
 
align-self: baseline;
 
align-self-center
 
align-self: center;
 
align-self-stretch
 
align-self: stretch;
 
align-self-start
 
align-self: start;
 
align-self-end
 
align-self: end;

Examples

Auto
align-self-auto

The item with the align-self-auto class follows the container’s align-items setting and aligns automatically along the cross axis. In row layouts, alignment follows the vertical cross axis.
In column layouts, alignment follows the horizontal cross axis.

1

2

3

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-auto">2</p>
  <p>3</p>
</div>

Baseline
align-self-baseline

The item with the align-self-baseline class aligns its text baseline with the baselines of other items along the cross axis. In row layouts, baseline alignment is vertical.
In column layouts, baseline alignment is horizontal.

1

2

3

<div class="d-flex align-items-start">
  <p class="pb-800">1</p>
  <p class="align-self-baseline">2</p>
  <p class="pt-900">3</p>
</div>

Centre
align-self-center

The item with the align-self-center class is centred along the cross axis, overriding the container’s align-items setting. In row layouts, the item is centred vertically.
In column layouts, the item is centred horizontally.

1

2

3

<div class="d-flex align-items-end">
  <p>1</p>
  <p class="align-self-center">2</p>
  <p>3</p>
</div>

Stretch
align-self-stretch

The item with the align-self-stretch class stretches to fill the container along the cross axis (unless a fixed size is set), overriding the container’s align-items setting. In row layouts, the item stretches vertically.
In column layouts, the item stretches horizontally.

1

2

3

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-stretch">2</p>
  <p>3</p>
</div>

Start
align-self-start

The item with the align-self-start class aligns to the start of the cross axis, overriding the container’s align-items setting. In row layouts, the item aligns to the top.
In column layouts, the items aligns to the left.

1

2

3

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-start">2</p>
  <p>3</p>
</div>

End
align-self-end

The item with the align-self-end class aligns to the end of the cross axis, overriding the container’s align-items setting. In row layouts, the item aligns to the bottom.
In column layouts, the item aligns to the right.

1

2

3

<div class="d-flex align-items-center">
  <p>1</p>
  <p class="align-self-end">2</p>
  <p>3</p>
</div>
Conditional styling Apply this style to specific screen sizes Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:align-self-center ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01