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

Flex

The flex class sets the flex shorthand property on a flex item. It controls how the item grows, shrinks, and takes up space relative to its siblings inside a flex container. Overview
CSS Shortcut class Applied style 
flex-1
 
flex: 1 1 0%;
 
flex-auto
 
flex: 1 1 auto;
 
flex-initial
 
flex: 0 1 auto;
 
flex-none
 
flex: none;

Examples

Flex 1
flex-1

These items will grow and shrink as needed to fill available space equally, without taking their initial size into account.

Short content.

Medium length content.

Content that takes up more space than the others.

<div class="d-flex">
  <p class="flex-1">Short content.</p>
  <p class="flex-1">Medium length content.</p>
  <p class="flex-1">
    Content that takes up more space than the others.
  </p>
</div>

Auto
flex-auto

These items will grow and shrink as needed to fill available space, taking their initial size into account.

Short content.

Medium length content.

Content that takes up more space than the others.

<div class="d-flex">
  <p class="flex-auto">Short content.</p>
  <p class="flex-auto">Medium length content.</p>
  <p class="flex-auto">
    Content that takes up more space than the others.
  </p>
</div>

Initial
flex-initial

These items don’t grow when there’s extra space, but can shrink if needed. Their base size is based on their content.

Short content.

Medium length content.

Content that takes up more space than the others. 

<div class="d-flex">
  <p class="flex-initial">Short content.</p>
  <p class="flex-initial">Medium length content.</p>
  <p class="flex-initial">
    Content that takes up more space than the others.
  </p>
</div>

None
flex-none

These items won’t grow to fill available space or shrink if there’s not enough space. Their size is based on their content.

Short content.

Medium length content.

Content that takes up more space than the others.

<div class="d-flex">
  <p class="flex-none">Short content.</p>
  <p class="flex-none">Medium length content.</p>
  <p class="flex-none">
    Content that takes up more space than the others.
  </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:flex-1 ...">
  ...
</div>
Learn more about the responsive layout prefix. 2025-10-01