Flex

Flex

Flex is a layout component used to group elements together and apply a space between them.

Import

import { Flex } from '@unllamas/lacrypta-ui';

Usage


<Flex>
  <Button>Button</Button>
  <Button>Button</Button>
</Flex>

Flex Gap

The gap property receives xs, sm or md

⚠️

Los valores 0, 2, 4, 8 y 16 serán deprecados.


<Flex gap="md">
  <Button>Button</Button>
  <Button>Button</Button>
</Flex>

Flex Justify

The justify property receives start, end, center or space-between


<Flex ... justify="center">
  <Button>Button</Button>
  <Button>Button</Button>
</Flex>

Flex Direction

The direction property receives row or column


<Flex ... direction="column">
  <Button>Button</Button>
  <Button>Button</Button>
</Flex>

Flex Align

The align property receives start, end or center


<Flex ... align="center">
  <Button>Button</Button>
  <Button>Button</Button>
</Flex>
DrawerHeading