Interlock
PrimitivesTextBoxButtonFlexLinkModalData inputInputData vizList
Flex Interlock flex component
This component inherits all params of the Box component
🔗 justify ▪️ direction

Inherited props

Box 🔗 children ▪️ padding ▪️ margin ▪️ css ▪️ className
Props 
export interface FlexProps extends BoxProps {
  /**
   * @param children children that are passed into the box
   */
  justify?: "between" | "around" | "center" | "end" | "start";
  /**
   * @param direction direction the flexbox should operate in
   */
  direction?: "row" | "column";
}
justify
<>
  <Flex justify="around" margin="large">
    <Text css={{ backgroundColor: 'lightgray' }} text="Justify around" />
    <Text css={{ backgroundColor: 'gray' }} text="Justify around" />
  </Flex>
  <Flex justify="between" margin="large">
    <Text css={{ backgroundColor: 'lightgray' }} text="Justify between" />
    <Text css={{ backgroundColor: 'gray' }} text="Justify between" />
  </Flex>
  <Flex justify="center" margin="large">
    <Text css={{ backgroundColor: 'lightgray' }} text="Justify center" />
    <Text css={{ backgroundColor: 'gray' }} text="Justify center" />
  </Flex>
  <Flex justify="end" margin="large">
    <Text css={{ backgroundColor: 'lightgray' }} text="Justify end" />
    <Text css={{ backgroundColor: 'gray' }} text="Justify end" />
  </Flex>
  <Flex justify="start" margin="large">
    <Text css={{ backgroundColor: 'lightgray' }} text="Justify start" />
    <Text css={{ backgroundColor: 'gray' }} text="Justify start" />
  </Flex>
</>
Rendered output
Justify aroundJustify around
Justify betweenJustify between
Justify centerJustify center
Justify endJustify end
Justify startJustify start
direction
<>
  <Flex direction="column">
    <Text text="Direction column" css={{ backgroundColor: 'lightgray' }} />
    <Text text="Direction column" css={{ backgroundColor: 'orange' }}/>
  </Flex>
  <Flex direction="row">
    <Text text="Direction row" css={{ backgroundColor: 'lightgray' }} />
    <Text text="Direction row" css={{ backgroundColor: 'orange' }}/>
  </Flex>
</>
Rendered output
Direction columnDirection column
Direction rowDirection row


Github