Flex

Your first document

Flex layout

Props

Prop

Type

Usage

import { Flex } from "@/Flex";

<Flex spacing={spacing} direction={direction as FlexDirection} justifyItems={justifyItems as FlexJustify} alignItems={alignItems as FlexAlign} className="h-full">
  <Flex justifyItems="center" alignItems="center" className="px-5 py-5 bg-black border-2 border-white rounded-xl">
    <span className="text-white text-2xl leading-none font-bold"> 1 </span>
  </Flex>
  <Flex justifyItems="center" alignItems="center" className="px-8 py-8 bg-black border-2 border-white rounded-xl">
    <span className="text-white text-2xl leading-none font-bold"> 2 </span>
  </Flex>
  <Flex justifyItems="center" alignItems="center" className="px-11 py-11 bg-black border-2 border-white rounded-xl">
    <span className="text-white text-2xl leading-none font-bold"> 3 </span>
  </Flex>
</Flex>

Code

Interface code

import { CSSProperties, ReactNode } from 'react'

export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'

/**
 * Props del componente `Flex`.
 *
 * Wrapper de `display: flex` con una API tipada y semántica,
 * basada en las propiedades nativas de Flexbox.
 */
export interface FlexProps {
  /** Contenido del contenedor flex. */
  children: ReactNode

  /**
   * Espacio entre elementos.
   *
   * Recibe un número (px) o string (cualquier unidad CSS).
   * Puede ser útil para diseños responsivos.
   *
   * @defaultValue 0
   */
  spacing?: number | string

  /**
   * Define la dirección del eje principal del contenedor flex.
   *
   * Equivale a la propiedad CSS `flex-direction`.
   */
  direction?: FlexDirection

  /**
   * Alinea los elementos **a lo largo del eje principal**.
   *
   * Equivale a la propiedad CSS `justify-content`.
   */
  justifyItems?: FlexJustify

  /**
   * Alinea los elementos **a lo largo del eje transversal**.
   *
   * Equivale a la propiedad CSS `align-items`.
   */
  alignItems?: FlexAlign

  /**
   * Controla si los elementos pueden saltar a una nueva línea.
   *
   * Equivale a la propiedad CSS `flex-wrap`.
   */
  wrap?: FlexWrap

  /** Clases adicionales */
  className?: string

  /** Estilos inline extra */
  style?: CSSProperties
}

import { CSSProperties, ReactNode } from 'react'export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'export type FlexAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline'export type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'/** * Props del componente `Flex`. * * Wrapper de `display: flex` con una API tipada y semántica, * basada en las propiedades nativas de Flexbox. */export interface FlexProps {  /** Contenido del contenedor flex. */  children: ReactNode  /**   * Espacio entre elementos.   *   * Recibe un número (px) o string (cualquier unidad CSS).   * Puede ser útil para diseños responsivos.   *   * @defaultValue 0   */  spacing?: number | string  /**   * Define la dirección del eje principal del contenedor flex.   *   * Equivale a la propiedad CSS `flex-direction`.   */  direction?: FlexDirection  /**   * Alinea los elementos **a lo largo del eje principal**.   *   * Equivale a la propiedad CSS `justify-content`.   */  justifyItems?: FlexJustify  /**   * Alinea los elementos **a lo largo del eje transversal**.   *   * Equivale a la propiedad CSS `align-items`.   */  alignItems?: FlexAlign  /**   * Controla si los elementos pueden saltar a una nueva línea.   *   * Equivale a la propiedad CSS `flex-wrap`.   */  wrap?: FlexWrap  /** Clases adicionales */  className?: string  /** Estilos inline extra */  style?: CSSProperties}

Component Code

import { cn } from '@/lib/cn'
import { alignMap, directionMap, justifyMap, wrapMap } from './flex.constants'
import { FlexProps } from './flex.types'

export function Flex({ spacing, direction, justifyItems, alignItems, wrap, className, children }: FlexProps) {
  return (
    <div
      className={cn(
        'flex',
        className,
        direction && directionMap[direction],
        justifyItems && justifyMap[justifyItems],
        alignItems && alignMap[alignItems],
        wrap && wrapMap[wrap],
      )}
      style={{
        gap: typeof spacing === 'number' ? `${spacing}px` : spacing,
      }}
    >
      {children}
    </div>
  )
}

import { cn } from '@/lib/cn'import { alignMap, directionMap, justifyMap, wrapMap } from './flex.constants'import { FlexProps } from './flex.types'export function Flex({ spacing, direction, justifyItems, alignItems, wrap, className, children }: FlexProps) {  return (    <div      className={cn(        'flex',        className,        direction && directionMap[direction],        justifyItems && justifyMap[justifyItems],        alignItems && alignMap[alignItems],        wrap && wrapMap[wrap],      )}      style={{        gap: typeof spacing === 'number' ? `${spacing}px` : spacing,      }}    >      {children}    </div>  )}

Constantes & helpers

// flex.constants.ts
import { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './flex.types'

export const directionMap: Record<FlexDirection, string> = {
  row: 'flex-row',
  'row-reverse': 'flex-row-reverse',
  column: 'flex-col',
  'column-reverse': 'flex-col-reverse',
}

export const justifyMap: Record<FlexJustify, string> = {
  start: 'justify-start',
  center: 'justify-center',
  end: 'justify-end',
  between: 'justify-between',
  around: 'justify-around',
  evenly: 'justify-evenly',
}

export const alignMap: Record<FlexAlign, string> = {
  start: 'items-start',
  center: 'items-center',
  end: 'items-end',
  stretch: 'items-stretch',
  baseline: 'items-baseline',
}

export const wrapMap: Record<FlexWrap, string> = {
  nowrap: 'flex-nowrap',
  wrap: 'flex-wrap',
  'wrap-reverse': 'flex-wrap-reverse',
}

// flex.constants.tsimport { FlexAlign, FlexDirection, FlexJustify, FlexWrap } from './flex.types'export const directionMap: Record<FlexDirection, string> = {  row: 'flex-row',  'row-reverse': 'flex-row-reverse',  column: 'flex-col',  'column-reverse': 'flex-col-reverse',}export const justifyMap: Record<FlexJustify, string> = {  start: 'justify-start',  center: 'justify-center',  end: 'justify-end',  between: 'justify-between',  around: 'justify-around',  evenly: 'justify-evenly',}export const alignMap: Record<FlexAlign, string> = {  start: 'items-start',  center: 'items-center',  end: 'items-end',  stretch: 'items-stretch',  baseline: 'items-baseline',}export const wrapMap: Record<FlexWrap, string> = {  nowrap: 'flex-nowrap',  wrap: 'flex-wrap',  'wrap-reverse': 'flex-wrap-reverse',}

Box

Your first document

Marquee

Your first document

Flex

Flex layout

Customize

Props

Usage

Code

Interface code

Component Code

Constantes & helpers

On this page