Flex

Componente de layout de caixa flexível para construir layouts responsivos.

Importação

import { Flex } from 'asterui'

Exemplos

Básico

Layout flex horizontal padrão.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="sm">
        <Button color="primary">Button 1</Button>
        <Button color="secondary">Button 2</Button>
        <Button color="accent">Button 3</Button>
      </Flex>
    )
}

export default App

Direção

Controle a direção do flex com a prop direction.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="sm">
        <Button color="primary">First</Button>
        <Button color="secondary">Second</Button>
        <Button color="accent">Third</Button>
      </Flex>
    )
}

export default App

Justify Content

Distribua itens ao longo do eixo principal.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="start" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Start</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="center" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">Center</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="end" gap="sm" className="bg-base-200 p-2 rounded">
          <Button size="sm">End</Button>
          <Button size="sm">Items</Button>
        </Flex>
        <Flex justify="between" className="bg-base-200 p-2 rounded">
          <Button size="sm">Between</Button>
          <Button size="sm">Items</Button>
        </Flex>
      </Flex>
    )
}

export default App

Align Items

Alinhe itens ao longo do eixo transversal.

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex gap="md">
        <Flex align="start" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Top</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="center" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Center</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
        <Flex align="end" gap="sm" className="bg-base-200 p-2 rounded h-24">
          <Button size="xs">Bottom</Button>
          <Button size="sm">Aligned</Button>
        </Flex>
      </Flex>
    )
}

export default App

Tamanhos de Gap

Controle o espaçamento entre itens.

Gap

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="lg">
        <Flex gap="xs">
          <Badge>XS</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="sm">
          <Badge>SM</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="md">
          <Badge>MD</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="lg">
          <Badge>LG</Badge>
          <Badge>Gap</Badge>
        </Flex>
        <Flex gap="xl">
          <Badge>XL</Badge>
          <Badge>Gap</Badge>
        </Flex>
      </Flex>
    )
}

export default App

Wrap

Permita que itens quebrem para a próxima linha.

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

import { Flex, Badge } from 'asterui'

function App() {
  return (
      <Flex wrap gap="sm">
        <Badge>Tag 1</Badge>
        <Badge>Tag 2</Badge>
        <Badge>Tag 3</Badge>
        <Badge>Tag 4</Badge>
        <Badge>Tag 5</Badge>
        <Badge>Tag 6</Badge>
        <Badge>Tag 7</Badge>
        <Badge>Tag 8</Badge>
      </Flex>
    )
}

export default App

Centralizando Conteúdo

Centralize conteúdo tanto horizontalmente quanto verticalmente.

Centered Card

This card is centered in its container.

import { Flex, Card, Typography } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Flex
        justify="center"
        align="center"
        className="bg-base-200 rounded-lg"
        style={{ height: '200px' }}
      >
        <Card className="w-64">
          <Title level={4}>Centered Card</Title>
          <Paragraph>This card is centered in its container.</Paragraph>
        </Card>
      </Flex>
    )
}

export default App

Flex Aninhado

Combine containers flex para layouts complexos.

Main Content

import { Flex, Button } from 'asterui'

function App() {
  return (
      <Flex direction="column" gap="md">
        <Flex justify="between" className="bg-base-200 p-4 rounded">
          <Button variant="ghost">Logo</Button>
          <Flex gap="sm">
            <Button variant="ghost">Home</Button>
            <Button variant="ghost">About</Button>
            <Button color="primary">Contact</Button>
          </Flex>
        </Flex>
        <Flex gap="md" className="p-4">
          <Flex direction="column" gap="sm" flex="1" className="bg-base-200 p-4 rounded">
            <Button variant="ghost" shape="block">Sidebar Item 1</Button>
            <Button variant="ghost" shape="block">Sidebar Item 2</Button>
          </Flex>
          <Flex flex="1" className="bg-base-200 p-4 rounded min-h-32" justify="center" align="center">
            Main Content
          </Flex>
        </Flex>
      </Flex>
    )
}

export default App

API

`Flex`

Propriedade	Descrição	Tipo	Padrão
`direction`	Direção do flex	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`
`justify`	Justify content ao longo do eixo principal	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Alinhar itens ao longo do eixo transversal	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	-
`wrap`	Se deve quebrar itens	`boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'`	`false`
`gap`	Espaço entre itens	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	-
`flex`	Abreviação flex para o container	`'1' \| 'auto' \| 'initial' \| 'none'`	-
`inline`	Usar inline-flex em vez de flex	`boolean`	`false`
`minHeight`	Altura mínima	`'screen' \| 'full' \| 'fit' \| 'min' \| 'max'`	-
`minWidth`	Largura mínima	`'full' \| 'fit' \| 'min' \| 'max'`	-
`className`	Classes CSS adicionais	`string`	-
`data-testid`	ID de teste para testes	`string`	-

Notas de Uso

Flex é um utilitário de layout sem requisitos específicos de acessibilidade
Mantém a estrutura semântica dos elementos filhos
Gap mapeia para espaçamento Tailwind: xs=1, sm=2, md=4, lg=6, xl=8