Flex

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

Box 1

Box 2

Box 3

default.tsx

1'use client';
2
3import React from 'react';
4import { Flex } from '../../layout/flex';
5
6export function Default() {
7  return (
8    <Flex
9      direction="row"
10      align="center"
11      justify="between"
12      gap="4"
13      className="border-border bg-card w-full rounded-xl border p-4"
14    >
15      <div className="bg-primary/20 text-primary border-primary/30 flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
16        Box 1
17      </div>
18      <div className="bg-secondary/20 text-secondary-foreground border-border flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
19        Box 2
20      </div>
21      <div className="bg-muted text-muted-foreground border-border flex h-20 w-20 items-center justify-center rounded-lg border font-medium">
22        Box 3
23      </div>
24    </Flex>
25  );
26}

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

Prop	Tipo	Por defecto	Descripción
`as`	`React.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
`className`	`string`	-	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