svelte-kit-vice/src/uix/eidos/components/flex

Eidos Flex

display:flex container. Eidos-native: añade los props container-side (direction, align, justify, wrap, rowGap, columnGap) sobre la superficie completa de Box, del que hereda estructura y se renderiza a través de él. Item-side props (alignSelf, gridColumn, flex, grow, …) viven en el hijo Box.

Superficie

<Flex direction="row" align="center" justify="space-between" gap={3} padding={4}>
	<Box>Start</Box>
	<Box>Middle</Box>
	<Box>End</Box>
</Flex>

Baseline

Origen: air/components/layout/flex (rama morfo-runtime). Misma adaptación que Box: drop del prefijo air-, vars renombradas a --flex-*, var(--space-N) en lugar de var(--air-space-N), resolución vía ActiveEidos.resolve.

Composición: Flex se renderiza a través de <Box> con display="flex" fijo. El DOM final es un único <div data-box data-flex> — el recipe de Flex añade selectores [data-box][data-flex] { … } sobre los de Box. Los props heredados (padding, margin, size, position) se pasan intactos al Box raíz.

Comparativa

Capacidad	UIX	Radix Themes	Chakra UI	Mantine
direction (row/column +reverse)	Sí	Sí	Sí (flexDirection)	Sí
align → align-items	Sí	Sí	Sí (alignItems)	Sí
justify → justify-content	Sí	Sí	Sí (justifyContent)	Sí
wrap → flex-wrap	Sí	Sí	Sí (flexWrap)	Sí
gap + rowGap / columnGap	Sí	Sí (gap, gapX, gapY)	Sí	Sí
inline boolean (inline-flex)	Sí	Vía display="inline-flex"	Sí	Sí (inline)
alignContent (multi-line cross)	Sí	Sí	Sí	Sí
Item props heredados de Box	Sí (composición)	Sí	Sí (style-props todo en Box)	— split
Responsive	Sí	Sí	Sí	Sí

Decisiones

• Hereda Box por composición, no por mixin — Flex renderiza a través de <Box> con display="flex" fijo. Mantiene el contrato Box-as-foundation y permite que [data-box] siga siendo el selector canónico para todo lo que pinta como box.
• align/justify cortos — preferimos align sobre alignItems (Mantine convention). Coincide con Radix Themes; difiere de Chakra.
• inline boolean en vez de display="inline-flex" — ergonomía; el resto de la API queda consistente con Box (un solo display).
• Item props NO en Flex — flex, grow, alignSelf, gridColumn van en el <Box> hijo. Split estilo Radix.

Eventos Sema

0 eventos. Pasivo — sólo organiza hijos. Mismas reglas que Box.

Gaps

Gap	Disposición	Detalle
alignContent (multi-line cross-axis)	✅ implementado en ec66999b siguiente commit	Cubierto.
Helpers HStack / VStack (alias direction-fijo)	diferir	Ergonomía Chakra. UIX usa <Stack direction="…">. Reconsiderar si la fricción es real.
inline-flex shorthand alternativo (e.g. <InlineFlex>)	descartar	inline boolean cubre el caso.
Slot divider entre hijos (separator automático)	diferir	Patrón Chakra Stack. Más natural en Stack que en Flex.

Referencias

• Radix Themes Flex: https://www.radix-ui.com/themes/docs/components/flex
• Chakra UI Flex: https://chakra-ui.com/docs/components/flex
• Mantine Flex: https://mantine.dev/core/flex/
• MDN flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout

Passive justification

Visual-only (scope: ['eidos']). Una sola part Provider, marker [data-flex]. Sin estados ni keyboard ni ARIA ni eventos. El recipe consume --flex-* writeable inline.