DXC Logo
Halstack Design System
v16.1.0

Overview

Guidelines

Foundations

Migration

Utilities

Components

Flex

The flex component allows building flexible box module based layouts. It serves as a technical component that abstracts users from working directly with CSS flexible box layout and helps them write more semantic layouts.

Overview
Code

Props

NameTypeDescriptionDefault
alignContent'normal' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-evenly' | 'stretch'Sets align-content CSS property. See MDN for further information.'normal'
alignItems'stretch' | 'flex-start' | 'flex-end' | 'start' | 'end' | 'self-start' | 'self-end' | 'center' | 'baseline' | 'normal'Sets align-items CSS property. See MDN for further information.'normal'
alignSelf'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'Sets align-self CSS property. See MDN for further information.'auto'
askeyof HTMLElementTagNameMapSets a custom HTML tag.'div'
basisstringSets flex-basis CSS property. See MDN for further information.'auto'
Required
children
React.ReactNodeCustom content inside the flex container.-
direction'row' | 'row-reverse' | 'column' | 'column-reverse'Sets flex-direction CSS property. See MDN for further information.'row'
New
fullHeight
booleanIf true, the component will take the full height of its parent container.false
gapstring | Gap

being Gap an object with the following properties:

{ columnGap: string; rowGap: string; }
Sets gap CSS property. See MDN for further information.-
grownumberSets flex-grow CSS property. See MDN for further information.0
justifyContent'flex-start' | 'flex-end' | 'start' | 'end' | 'left' | 'normal' | 'right' | 'center' | 'space-between' | 'space-around' | 'space-evenly'Sets justify-content CSS property. See MDN for further information.'normal'
ordernumberSets order CSS property. See MDN for further information.0
shrinknumberSets flex-shrink CSS property. See MDN for further information.1
wrap'nowrap' | 'wrap' | 'wrap-reverse'Sets flex-wrap CSS property. See MDN for further information.'nowrap'

Examples

Direction and alignment

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex direction="column" alignItems="center" gap="var(--spacing-gap-xl)">
        <DxcFlex alignSelf="flex-end" >
          <Placeholder width="100px" height="50px" />
          <Placeholder width="100px" height="50px" />
        </DxcFlex>
        <Placeholder width="150px" height="50px" />
        <Placeholder width="150px" height="50px" />
      </DxcFlex>
    </DxcInset>
  );
}

Gap, order and grow

() => {
  return (
    <DxcInset space="var(--spacing-padding-xl)">
      <DxcFlex gap="var(--spacing-gap-s)">
        <DxcFlex order={3} grow={1}>
          <Placeholder width="100%">3</Placeholder>
        </DxcFlex>
        <DxcFlex order={2} grow={2}>
          <Placeholder width="100%">2</Placeholder>
        </DxcFlex>
        <DxcFlex order={1} grow={1}>
          <Placeholder width="100%">1</Placeholder>
        </DxcFlex>
        <DxcFlex order={5} grow={4}>
          <Placeholder width="100%">5</Placeholder>
        </DxcFlex>
        <DxcFlex order={4} grow={1}>
          <Placeholder width="100%">4</Placeholder>
        </DxcFlex>
      </DxcFlex>
    </DxcInset>
  );
}
On this page