La mise en page CSS est puissante. C'est aussi la plus grande source de frustration pour les développeurs web. Flexbox nécessite de comprendre axe principal vs axe croisé, flex-grow vs flex-shrink vs flex-basis, et une douzaine de propriétés qui interagissent de manière non évidente. Centrer une div -- la blague canonique du développement web -- nécessite encore de connaître la bonne combinaison de display, align-items et justify-content.
Le système de mise en page de FlinUI remplace cette complexité par 15 composants déclaratifs. <Stack> pour les arrangements verticaux et horizontaux. <Grid> pour les grilles. <Container> pour les contraintes de largeur maximale. <Center> pour le centrage.
Les composants principaux
- Container : largeur maximale avec centrage automatique
- Stack : arrangement vertical ou horizontal avec espacement cohérent
- Grid : mise en page CSS Grid avec colonnes responsive (
cols={1} cols_md={2} cols_lg={3}) - Flex : contrôle fin de flexbox
- Split : mise en page à deux panneaux avec ratio (
"1:3","1:4") - Box : la primitive avec props de style
- Center : centre ses enfants horizontalement et verticalement
- Divider/Spacer : séparateurs visuels et espaces flexibles
- AspectRatio : contrainte de ratio
- Wrap : arrangement en flux avec retour à la ligne
Composition de composants de mise en page
flin<Container size="xl">
<Stack gap={8}>
<Stack direction="horizontal" align="center">
<Text size="2xl" weight="bold">Dashboard</Text>
<Spacer />
<Button variant="primary">Export</Button>
</Stack>
<Grid cols={1} cols_md={2} cols_lg={4} gap={4}>
<Stat label="Users" value="12,847" />
<Stat label="Revenue" value="$48,290" />
<Stat label="Orders" value="1,247" />
<Stat label="Satisfaction" value="4.8/5" />
</Grid>
</Stack>
</Container>Pas de fichier CSS. Pas de noms de classes. Pas de media queries. La mise en page est exprimée entièrement par composition de composants, et elle est responsive par défaut.
Ceci est la partie 86 de la série "How We Built FLIN".
Navigation de la série : - [85] Design Tokens and Theming System - [86] The Layout System (vous êtes ici) - [87] Icons Library Integration - [88] FlinUI Enterprise Components