Flex

Flex allows users to build Flexible Box Module based layouts. It serves as a technical component that abstracts users from working directly with CSS Flexbox and helps them write more semantic layouts.

Code

Usage

Specifications

Props

Name	Default	Description
direction: 'row' \| 'row-reverse' \| 'column' \| 'column-reverse'	`'row'`	Sets `flex-direction` CSS property.
justifyContent: 'flex-start' \| 'flex-end' \| 'start' \| 'end' \| 'left' \| 'right' \| 'center' \| 'space-between' \| 'space-around' \| 'space-evenly'	`'flex-start'`	Sets `justify-content` CSS property.
alignItems: 'stretch' \| 'flex-start' \| 'flex-end' \| 'start' \| 'end' \| 'self-start' \| 'self-end' \| 'center' \| 'baseline'	`'stretch'`	Sets `align-items` CSS property.
alignContent: 'normal' \| 'flex-start' \| 'flex-end' \| 'start' \| 'end' \| 'center' \| 'space-between' \| 'space-evenly' \| 'stretch'	`'normal'`	Sets `align-content` CSS property.
alignSelf: 'auto' \| 'flex-start' \| 'flex-end' \| 'center' \| 'baseline' \| 'stretch'	`'auto'`	Sets `align-self` CSS property.
wrap: 'nowrap' \| 'wrap' \| 'wrap-reverse'	`'nowrap'`	Sets `flex-wrap` CSS property.
gap: string \| Gap	`'0'`	Sets `gap` CSS property.
grow: number	`0`	Sets `flex-grow` CSS property.
shrink: number	`1`	Sets `flex-shrink` CSS property.
order: number	`0`	Sets `order` CSS property.
basis: string	`'auto'`	Sets `flex-basis` CSS property.
as: keyof HTMLElementTagNameMap	`'div'`	Sets a custom HTML tag.
children: node		Custom content inside the flex container.

Examples

Direction and alignment

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" alignItems="center" gap="2rem">
        <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex direction="column" alignItems="center" gap="2rem">
        <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="2rem">
      <DxcFlex gap="0.5rem">
        <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>
  );
}

() => {
  return (
    <DxcInset space="2rem">
      <DxcFlex gap="0.5rem">
        <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>
  );
}

Props
Examples
- Direction and alignment
- Gap, order and grow

Edit this page on GitHub

File Input

NextFooter

Flex

Props

Examples

Direction and alignment

Gap, order and grow

Contents