Flex

mk-flex encapsula display: flex (ou inline-flex) em um web component. direction, wrap, justifyContent, alignItems, alignContent e gap são configuráveis via props, com gap mapeado para a escala de tokens --db1-spacing-*. O host do mk-flex é o próprio flex container — não há wrapper interno, o shadow DOM renderiza apenas <slot />.

Padrão

Grupo de itens alinhado horizontalmente com espaçamento consistente via gap.

import { MkFlex } from '@db1/makuco-ui-react';

<MkFlex gap={4}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MkFlex>

<mk-flex gap="4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</mk-flex>

Direction

direction="column" empilha os itens verticalmente, reaproveitando o mesmo primitivo em vez de um componente dedicado de stack.

<MkFlex direction="column" gap={3}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MkFlex>

<mk-flex direction="column" gap="3">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</mk-flex>

Wrap com múltiplas linhas

wrap="wrap" quebra os itens em múltiplas linhas quando não cabem no espaço disponível. alignContent distribui as linhas resultantes no eixo cruzado — só tem efeito visual perceptível com múltiplas linhas; com wrap="nowrap" (padrão) a prop é aceita mas não produz diferença visual.

<MkFlex wrap="wrap" alignContent="space-between" gap={3}>
  <div>Item 1</div>
  {/* ... */}
</MkFlex>

<mk-flex wrap="wrap" align-content="space-between" gap="3">
  <div>Item 1</div>
  <!-- ... -->
</mk-flex>

justifyContent + alignItems

justifyContent alinha os itens no eixo principal; alignItems alinha cada item individualmente no eixo cruzado.

<MkFlex justifyContent="space-between" alignItems="center">
  <div>Alto</div>
  <div>Médio</div>
  <div>Baixo</div>
</MkFlex>

<mk-flex justify-content="space-between" align-items="center">
  <div>Alto</div>
  <div>Médio</div>
  <div>Baixo</div>
</mk-flex>

Escala de gap

gap aceita um número de 0 a 13, mapeado para a escala de tokens --db1-spacing-{n}. gap="0" (padrão) emite gap: 0 sem referência a token, pois não existe --db1-spacing-0 na escala.

{[0, 1, 4, 8, 13].map((gap) => (
  <MkFlex key={gap} gap={gap}>
    <div>gap={gap}</div>
    <div>Item</div>
    <div>Item</div>
  </MkFlex>
))}

<mk-flex gap="0">
  <div>gap=0</div>
  <div>Item</div>
  <div>Item</div>
</mk-flex>
<mk-flex gap="4">
  <div>gap=4</div>
  <div>Item</div>
  <div>Item</div>
</mk-flex>
<!-- ... -->

Inline dentro de texto

inline={true} renderiza display: inline-flex em vez de display: flex, permitindo compor ícone + label dentro de um fluxo de texto sem quebrar o layout ao redor.

<MkFlex inline gap={1} alignItems="center">
  <span>★</span>
  <span>destaque</span>
</MkFlex>

<mk-flex inline gap="1" align-items="center">
  <span>★</span>
  <span>destaque</span>
</mk-flex>

Props — mk-flex

Slots

Acessibilidade

mk-flex é um layout primitive sem semântica de interação. O browser atribui o role padrão generic ao host — nenhum role adicional é adicionado. O conteúdo slotado é anunciado na ordem do DOM por leitores de tela, independente da ordem visual aplicada por direction/wrap.

direction="row-reverse", direction="column-reverse" e wrap="wrap-reverse" alteram apenas a ordem visual — nunca a ordem de foco ou de leitura. Evite usá-las quando a ordem carrega significado para quem navega por teclado ou leitor de tela (WCAG 1.3.2 Meaningful Sequence).