Flex

Componente de diseño de caja flexible para construir diseños responsivos.

Importar

import { Flex } from 'asterui'

Ejemplos

Básico

Diseño flex horizontal predeterminado.

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

Dirección

Controla la dirección flex con la 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

Distribuye elementos a lo largo del eje 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

Alinea elementos a lo largo del eje 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

Tamaños de Gap

Controla el espaciado entre elementos.

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

Permite que los elementos se ajusten a la siguiente línea.

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

Centrar Contenido

Centra el contenido tanto horizontal como 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 Anidado

Combina contenedores flex para diseños complejos.

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`

Propiedad	Descripción	Tipo	Predeterminado
`direction`	Dirección flex	`'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`	`'row'`
`justify`	Justifica contenido a lo largo del eje principal	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Alinea elementos a lo largo del eje transversal	`'start' \| 'end' \| 'center' \| 'baseline' \| 'stretch'`	-
`wrap`	Si ajustar elementos	`boolean \| 'wrap' \| 'nowrap' \| 'wrap-reverse'`	`false`
`gap`	Espacio entre elementos	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| number`	-
`flex`	Abreviatura flex para el contenedor	`'1' \| 'auto' \| 'initial' \| 'none'`	-
`inline`	Usar inline-flex en lugar de flex	`boolean`	`false`
`minHeight`	Altura mínima	`'screen' \| 'full' \| 'fit' \| 'min' \| 'max'`	-
`minWidth`	Ancho mínimo	`'full' \| 'fit' \| 'min' \| 'max'`	-
`className`	Clases CSS adicionales	`string`	-
`data-testid`	ID de prueba para pruebas	`string`	-

Notas de Uso

Flex es una utilidad de diseño sin requisitos de accesibilidad específicos
Mantiene la estructura semántica de los elementos hijos
Gap se mapea al espaciado de Tailwind: xs=1, sm=2, md=4, lg=6, xl=8