Bac à Sable CSS Flexbox

Bac à Sable CSS Flexbox

Le Bac à Sable CSS Flexbox est un environnement d'apprentissage interactif et un générateur de code pour le module de mise en page moderne CSS Flexible Box Layout. Ajustez les propriétés du conteneur (flex-direction, justify-content, align-items, gap) et les propriétés par élément (flex-grow, flex-shrink, flex-basis, align-self, order) et voyez votre mise en page se mettre à jour en temps réel. Lorsque vous obtenez un résultat satisfaisant, copiez le CSS et le HTML prêt à l'emploi directement dans votre projet.

Qu'est-ce que CSS Flexbox ?

CSS Flexbox (Flexible Box Layout) est un modèle de mise en page unidimensionnel conçu pour distribuer l'espace le long d'un seul axe (une ligne ou une colonne) et aligner les éléments à l'intérieur d'un conteneur. Il remplace les anciennes techniques telles que les flottants (floats) et les astuces inline-block pour les barres de navigation, les rangées de cartes, le contenu centré et toute interface utilisateur où les éléments doivent s'adapter naturellement à leur conteneur. Contrairement à CSS Grid, qui est bidimensionnel, Flexbox excelle dans les arrangements simples où vous contrôlez l'alignement dans une seule direction à la fois.

Comment utiliser ce bac à sable

1. Choisissez un préréglage (optionnel) : Choisissez Saint-Graal, Grille de cartes, Barre de navigation, Hero, Modale ou Pied de page collant pour charger un point de départ concret. Chaque préréglage est une mise en page complète et fonctionnelle que vous pouvez étudier ou modifier.
2. Ajustez les propriétés du conteneur : Utilisez les contrôles segmentés dans le panneau de droite pour définir flex-direction, flex-wrap, justify-content, align-items, align-content et gap. La scène visuelle se met à jour immédiatement.
3. Modifiez les éléments individuels : Cliquez sur n'importe quel élément de l'aperçu pour le sélectionner. Remplacez son order, flex-grow, flex-shrink, flex-basis et align-self indépendamment du reste. Les éléments avec des remplacements sont marqués d'un petit badge.
4. Ajoutez ou supprimez des éléments : Utilisez Ajouter un élément et Supprimer la sélection pour modifier le nombre d'éléments et voir comment la mise en page réagit.
5. Copiez le code : La section Code généré en bas reflète toujours votre mise en page actuelle. Copiez le CSS, le HTML ou les deux en un seul clic.

Référence des propriétés du conteneur

Le conteneur flex est l'élément parent avec display: flex. Ces propriétés contrôlent la manière dont tous ses enfants se comportent ensemble.

Référence des propriétés des éléments

Ces propriétés s'appliquent aux éléments flex individuels (enfants d'un conteneur flex) et remplacent les valeurs par défaut du conteneur pour cet élément uniquement.

Quelle est la différence entre justify-content et align-items ?

justify-content contrôle l'alignement le long de l'axe principal, tandis qu'align-items contrôle l'alignement le long de l'axe transversal. L'axe principal est celui défini par flex-direction — horizontal pour row, vertical pour column. Lorsque vous changez flex-direction de row en column, les deux axes s'inversent, donc justify-content devient vertical et align-items devient horizontal. Cet échange est l'une des sources de confusion les plus courantes lors de l'apprentissage de Flexbox ; les indicateurs d'axe du bac à sable situés sous l'aperçu aident à le visualiser.

Comment centrer un élément avec Flexbox ?

Pour centrer un seul élément à la fois horizontalement et verticalement :

C'est le remplacement moderne des anciennes astuces de centrage impliquant margin: auto, transform: translate(-50%, -50%) ou position: absolute. Essayez-le dans le bac à sable en sélectionnant le préréglage Centrage modale.

Explication des préréglages de mise en page réels

Mise en page Saint-Graal

La mise en page classique d'une page à trois colonnes : barre latérale gauche, contenu principal, barre latérale droite — avec un en-tête et un pied de page. Historiquement très difficile à construire avec des flottants ; Flexbox la rend triviale. La colonne du milieu utilise flex: 1 pour absorber tout l'espace horizontal restant tandis que les colonnes latérales conservent leurs largeurs déclarées.

Grille de cartes

Une rangée de cartes s'enroulant qui passent sur de nouvelles lignes à mesure que la fenêtre se rétrécit. Utilise flex-wrap: wrap avec chaque carte dotée de flex: 1 1 240px, ce qui signifie que la carte s'étend et se rétrécit mais ne devient jamais plus étroite que 240px.

Barre de navigation

Une barre de navigation horizontale avec un logo à gauche et des liens à droite. L'astuce consiste à utiliser justify-content: space-between avec le logo et le groupe de liens comme deux enfants, plus un conteneur flex interne pour les liens eux-mêmes.

Section Hero

Empilement vertical avec un contenu centré horizontalement et verticalement — parfait pour les zones d'accroche (hero) des pages de destination. Utilise flex-direction: column, justify-content: center et align-items: center sur un conteneur haut.

Centrage modale

Une boîte de dialogue modale parfaitement centrée dans sa superposition. La même recette de centrage en trois lignes montrée ci-dessus, appliquée à un conteneur de superposition plein écran.

Pied de page collant

Un pied de page qui reste au bas de la fenêtre lorsque le contenu est court, mais qui descend lorsque le contenu est long. Obtenu en donnant au corps (body) display: flex; flex-direction: column; min-height: 100vh et au contenu principal flex: 1.

Quelle est la différence entre flex-grow, flex-shrink et flex-basis ?

Ces trois propriétés (combinées dans le raccourci flex) décrivent comment un élément gère l'espace :

• flex-basis définit la taille idéale de l'élément avant la distribution de l'espace libre. Considérez-le comme le "point de départ" de l'élément.
• flex-grow dit : "s'il reste de l'espace, prends-en cette part". Une valeur de 0 signifie un refus de s'étendre ; 1 signifie une extension proportionnelle ; 2 signifie prendre deux fois la part d'un élément avec 1.
• flex-shrink dit : "s'il n'y a pas assez d'espace, rétrécis de cette part". Par défaut, c'est 1 (rétrécissement proportionnel) ; 0 signifie un refus de rétrécir.

Le raccourci flex: 1 équivaut à flex: 1 1 0% — extension égale, rétrécissement égal, base zéro — ce qui signifie que tous les éléments prennent une part égale du conteneur quel que soit leur contenu. flex: auto équivaut à flex: 1 1 auto, qui respecte la taille du contenu comme base.

Quand devrais-je utiliser Flexbox vs Grid ?

Utilisez Flexbox pour les mises en page unidimensionnelles où les éléments circulent dans une seule direction — une rangée de boutons, une barre de navigation, une seule colonne de cartes. Flexbox est sensible au contenu et idéal lorsque vous voulez que les éléments définissent leur propre taille.

Utilisez CSS Grid pour les mises en page bidimensionnelles où vous devez contrôler simultanément les lignes et les colonnes — mises en page de pages entières, galeries d'images, tableaux de bord. Grid est sensible à la mise en page et vous permet de placer des éléments dans des pistes nommées.

Les deux sont complémentaires et non concurrents. De nombreux designs réels les combinent : une mise en page de page Grid avec des barres de navigation Flexbox et des rangées de cartes à l'intérieur.

Conseils pour maîtriser Flexbox

• Visualisez les axes. Sachez toujours quelle direction est "principale" (main) et laquelle est "transversale" (cross) — les pastilles d'axe du bac à sable rendent cela explicite.
• Utilisez gap au lieu des marges. Les navigateurs modernes supportent pleinement gap sur les conteneurs flex, ce qui élimine le besoin d'astuces de marges complexes sur le dernier enfant.
• Privilégiez flex: 1. Lorsque vous voulez que les éléments partagent l'espace équitablement, ce raccourci est presque toujours ce qu'il vous faut.
• min-width: 0 sur les éléments flex. Les éléments ont une largeur minimale implicite basée sur leur contenu. Si de longues chaînes insécables (comme des URL) font déborder votre mise en page, définissez min-width: 0 sur l'élément pour contourner ce problème.
• Évitez les largeurs uniquement en pourcentage. Mélanger des largeurs en pourcentage avec flex-grow peut produire des résultats surprenants. Préférez flex-basis avec une valeur par défaut raisonnable.

Support des navigateurs et compatibilité

CSS Flexbox est supporté dans tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et tous les principaux navigateurs mobiles. La propriété gap dans les conteneurs flex a atteint un support universel en 2021. Les anciens navigateurs (IE10/11) nécessitent des préfixes constructeurs et présentent plusieurs bugs documentés ; pour ces publics, consultez flexbugs.

Foire Aux Questions

Pourquoi mon élément flex déborde-t-il du conteneur ?

Les éléments flex ont un min-width: auto implicite basé sur leur contenu. Des mots longs, des blocs de code ou du texte préformaté peuvent forcer un élément à être plus large que le conteneur. Corrigez cela en définissant min-width: 0 sur l'élément (ou min-height: 0 pour les mises en page en colonnes).

Quelle est la différence entre space-between, space-around et space-evenly ?

space-between ne laisse aucun espace aux extrémités et un espace égal entre les éléments. space-around place un demi-espace à chaque extrémité et des espaces complets entre les éléments. space-evenly place un espace égal aux extrémités et entre les éléments. Basculez entre eux dans le bac à sable pour ressentir la différence.

Puis-je animer les propriétés flex ?

Oui. flex-grow, flex-shrink, flex-basis, order et gap peuvent faire l'objet de transitions. L'animation de flex-direction, justify-content et align-items n'est pas supportée car ce sont des propriétés énumérées discrètes.

Le bac à sable fonctionne-t-il hors ligne ?

Tous les calculs Flexbox se font dans votre navigateur en utilisant le CSS natif. Une fois la page chargée, vous pouvez utiliser le bac à sable sans connexion internet — il n'y a pas d'appels API ni de calcul côté serveur.

Le code généré est-il prêt pour la production ?

Oui. Le CSS exporté utilise des propriétés standard supportées par tous les navigateurs modernes. Le HTML utilise des noms de classes sémantiques (flex-container, flex-item) que vous pouvez renommer pour les adapter aux conventions de votre projet.

Ressources supplémentaires

• Mise en page par boîte flexible CSS - MDN
• CSS Flexible Box Layout Module Level 1 - Spécification W3C
• CSS Flexbox - Wikipédia

Outils pour webmestres:

• Calculatrice CPC
• Calculatrice CPM
• Compresseur CSS en ligne
• Générateur de Favicon
• Calculatrice Google AdSense
• Générateur de Cron Job
• Générateur d'expression Crontab
• Compresseur HTML en ligne
• Convertisseur HTML en texte En vedette
• Vérificateur de Densité de Mots-Clés
• Générateur de tableaux Markdown
• Générateur de balises meta
• Suppresseur de guillemets intelligents
• Générateur de Slug d'URL
• Calculatrice de la Valeur d'une Page Vue
• Calculatrice de la valeur du nombre de visite
• Calculateur de permissions Unix (chmod)
• Encodeur / Décodeur d'Entités HTML
• Générateur de Lorem Ipsum
• Échappement/Désechappement de Chaîne JSON
• Convertisseur cURL en JSON
• Formateur SQL
• Optimiseur SVG
• Générateur de redirection Htaccess
• Vérificateur de taille d'exploration Googlebot
• Générateur de robots.txt Nouveau
• Générateur de Sitemap XML Nouveau
• Vérificateur d'âge de domaine Nouveau
• Vérificateur Open Graph Nouveau
• Recherche WHOIS Nouveau
• Recherche DNS Nouveau
• Vérificateur de vitesse de page Nouveau
• Vérificateur de Confiance de Domaine Nouveau
• Vérificateur de redirections Nouveau
• Générateur de balises Hreflang Nouveau
• Vérificateur de liens brisés Nouveau
• Bac à Sable CSS Flexbox Nouveau
• Générateur de Grille CSS Nouveau
• Générateur de commandes Git Nouveau
• Générateur de Fichier .env Nouveau
• Générateur de Commandes cURL Nouveau
• Référence des codes de statut HTTP Nouveau
• Analyseur URL Nouveau
• Générateur de chaînes de requête Nouveau
• Convertisseur SVG en React/JSX Nouveau
• Compilateur SCSS en CSS Nouveau
• Compilateur Less vers CSS Nouveau
• Playground TypeScript Nouveau
• Générateur de schéma JSON Nouveau
• Convertisseur de PX en REM Nouveau
• Convertisseur de PT en PX Nouveau