Saltar al contenido principal

Flex

Componente de diseño basado en CSS Flexbox para alinear, direccionar, envolver y espaciar elementos hijos.

LM

Lucia Mendez

lucia@acmestudio.dev

1'use client';
2

3import { Avatar } from '@/components/ui/avatar';
4import { Badge } from '@/components/ui/badge';
5import { Button } from '@/components/ui/button';
6import { Flex } from '@/components/ui/flex';
7

8export function Default() {
9  return (
10    <Flex
11      direction="row"
12      align="center"
13      justify="between"
14      gap="3"
15      className="border-border bg-card w-full max-w-lg rounded-xl border p-4 sm:gap-4"
16    >
17      <Flex align="center" gap="3" className="min-w-0 flex-1">
18        <Avatar className="shrink-0">
19          <Avatar.Fallback>LM</Avatar.Fallback>
20        </Avatar>
21        <div className="min-w-0">
22          <p className="truncate text-sm font-medium">Lucia Mendez</p>
23          <p className="text-muted-foreground truncate text-xs">lucia@acmestudio.dev</p>
24        </div>
25      </Flex>
26      <Flex align="center" gap="2" className="shrink-0">
27        <Badge variant="secondary" className="hidden sm:inline-flex">
28          Owner
29        </Badge>
30        <Button variant="secondary" size="sm">
31          Manage
32        </Button>
33      </Flex>
34    </Flex>
35  );
36}

Instalación

pnpm dlx nachui add flex

Anatomía

1import { Flex } from '@/components/ui/flex';
1<Flex direction="row" align="center" justify="between" gap="4">
2  <div>Elemento 1</div>
3  <div>Elemento 2</div>
4</Flex>

Referencia de API

Flex

PropTipoPor defectoDescripción
asReact.ElementType'div'El tipo de elemento HTML para renderizar el componente
direction'row' | 'column' | 'row-reverse' | 'column-reverse''row'Dirección del flex (flex-direction)
align'start' | 'center' | 'end' | 'baseline' | 'stretch''stretch'Alineación de elementos (align-items)
justify'start' | 'center' | 'end' | 'between' | 'around' | 'evenly''start'Distribución del contenido (justify-content)
wrap'nowrap' | 'wrap' | 'wrap-reverse''nowrap'Comportamiento de envoltura (flex-wrap)
gap'0' | '1' | '2' | '3' | '4' | '5' | '6' | '8' | '10' | '12' | '16' | '20' | '24' | '32'-Espacio entre elementos
classNamestring-Clases CSS personalizadas
¿Encontraste algo que mejorar?

¿Notaste un error, tipografía o detalle faltante en esta página? Ayúdanos a mejorar la documentación abriendo un issue en GitHub.

Crear un Issue
AnteriorTypography
SiguienteStack
Ctrl+I