J'ai rédigé la déclaration display: flex plus de fois que je ne peux compter, et j'oublie encore occasionnellement si c'est le cas justify-content ou align-items cela contrôle l’axe vertical d’affilée. Ce n’est pas de l’ignorance ; c'est la réalité honnête d'un modèle de mise en page dont le comportement bascule en fonction flex-direction. Lorsque la direction est row, justify-content fonctionne horizontalement. Passer à column et la même propriété fonctionne maintenant verticalement Quiconque prétend ne jamais ouvrir les outils de développement du navigateur pour pousser ces valeurs jusqu'à ce que les boîtes atterrissent là où ils veulent soit ment, soit a une bien meilleure mémoire que la mienne.
le Générateur Flexbox est l'outil que j'aurais aimé avoir quand j'apprenais ce modèle, et celui que je cherche encore quand je veux prototyper une mise en page sans toucher à une feuille de style Vous définissez les propriétés du conteneur, une rangée de boîtes d'échantillons reflue en temps réel, et le CSS exact qui produit ce que vous voyez se trouve dans une boîte prête à copier en dessous Il tourne " ; rappelez-vous quelle propriété fait quoi" ; dans " ; cliquez jusqu'à ce qu'il ait l'air bien, puis lisez la réponse." ;
tl;dr : Flexbox est un modèle de mise en page unidimensionnel Le conteneur le conduit à travers six propriétés :
flex-direction,flex-wrap,justify-content,align-items,align-content, etgap. Ce générateur les expose tous, affiche un aperçu en direct et émet un CSS propre. Parce que l'aperçu se produit avec les mêmes déclarations qu'il génère, ce que vous voyez est exactement ce que vous collez. Il s'exécute entièrement dans votre navigateur sans inscription.
Quel problème un générateur flexbox résout-il ?
Flexbox est puissant précisément parce qu'il est relatif Vous décrivez l'intention (" ; spread these items with equal space between them," ; " ; centrez ceci sur les deux axes" ;) et le navigateur calcule les pixels Mais les systèmes relatifs sont difficiles à tenir dans votre tête, car l'effet de chaque propriété dépend de l'état des autres. align-content ne fait rien jusqu'à ce que les articles s'enroulent L'axe principal et l'axe transversal échangent lorsque vous changez de direction. space-between et space-around ressemblez-vous jusqu'à ce que vous les comparez côte à côte.
Le moyen le plus rapide de construire l'intuition pour un système relatif est de le manipuler et de regarder Un générateur réduit la boucle d'édition-enregistrement-actualisation en une seule interaction : changez une liste déroulante, voyez les cases bouger Après dix minutes avec un aperçu en direct, la propriété qui contrôle l'axe croisé cesse d'être un fait que vous mémorisez et devient quelque chose que vous ressentez Et quand vous avez fini d'explorer, vous n'avez pas de note mentale à transcrire ; le CSS fonctionnel est déjà écrit pour vous.
Quelles propriétés le conteneur contrôle-t-il ?
Flexbox répartit la responsabilité entre le conteneur et ses éléments Le conteneur décide de l'arrangement global, et c'est là que le générateur se concentre car c'est là que vivent la plupart des décisions d'agencement Voici ce que fait chaque propriété de conteneur.
| Propriété | Ce qu'il contrôle | Valeurs communes |
|---|---|---|
flex-direction |
L'axe principal et sa direction | row, column, row-reverse, column-reverse |
flex-wrap |
Si les éléments débordent sur de nouvelles lignes | nowrap, wrap, wrap-reverse |
justify-content |
Espacement selon l'axe principal | flex-start, center, space-between, space-evenly |
align-items |
Positionnement sur l'axe transversal | stretch, center, flex-start, baseline |
align-content |
Espacement des lignes enveloppées sur l'axe transversal | stretch, center, space-between |
gap |
Espace entre les éléments | toute longueur, par exemple 16px |
Le modèle mental qui fait ce bâton est l'idée à deux axes de la spécification Les éléments circulent le long de l'axe principal, qui flex-direction ensembles. L'axe transversal lui est toujours perpendiculaire. justify-content répartit l'espace sur l'axe principal ; align-items positions sur l'axe de croix. Une fois flex-direction est column1, l'axe principal est vertical, donc justify-content empile maintenant les éléments de haut en bas et align-items les positionne de gauche à droite Rien dans les propriétés n'a changé ; les axes tournaient en dessous d'eux.
Comment centrer un div avec flexbox ?
C'est la seule question flexbox la plus recherchée, et la réponse est trois lignes Définissez le conteneur sur display: flex, alors justify-content: center et align-items: center. Cela centre l'enfant sur l'axe principal et l'axe transversal à la fois, ce qui pour une rangée par défaut signifie le point mort horizontalement et verticalement.
Dans le générateur, vous choisissez center pour les deux commandes d'alignement et les boîtes d'échantillons sautent au milieu de la zone de prévisualisation La boîte de sortie montre alors :
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
La raison pour laquelle cette recette vaut la peine d'être construite en cliquant plutôt qu'en mémorisant est que dès que votre exigence change encore légèrement, par exemple vous souhaitez que l'élément soit épinglé en haut mais centré horizontalement, vous modifiez une liste déroulante et voyez le résultat, au lieu de deviner lequel des les deux propriétés à modifier.
Quand l’alignement-contenu est-il important ?
align-content est la propriété que les gens définissent et se demandent ensuite pourquoi rien ne se passe La réponse est dans la spécification : elle n'affecte la mise en page que lorsqu'il y a plusieurs lignes d'éléments flexibles Avec flex-wrap: nowrap: chaque élément se trouve sur une seule ligne, il n’y a donc pas d’ensemble de lignes à distribuer et la propriété est inerte.
Le générateur code cette règle pour que vous ne puissiez pas être induit en erreur par elle Quand le wrap est éteint, le align-content le contrôle est désactivé et la propriété est omise du CSS généré entièrement Allumez l'emballage et il devient actif, et vous pouvez le regarder pousser les rangées d'éléments emballés ensemble ou les écarter sur l'axe transversal Émettre la propriété seulement quand il fait quelque chose garde la sortie honnête : chaque déclaration dans la règle copiée est une qui a un effet visible sur votre disposition.
Quelle est la différence entre les valeurs de contenu justifié ?
le justify-content les mots-clés sont l'endroit où un aperçu en direct gagne sa chance, car les différences sont spatiales et difficiles à décrire en prose. flex-start emballe les éléments au début de l'axe principal. center les emballe au milieu. space-between pousse le premier et le dernier élément sur les bords et répartit l'espace restant de manière égale entre les autres, de sorte qu'il n'y a pas d'espace sur les bords extérieurs. space-around donne à chaque élément un espace égal des deux côtés, ce qui signifie que l'écart entre deux éléments est le double de l'écart sur les bords. space-evenly rend chaque espace égal, y compris les bords.
La lecture de ce paragraphe ne vous apprend presque rien Cliquer sur les cinq valeurs avec cinq cases à l'écran vous apprend en quelques secondes, et vous ne vous confondrez jamais space-between avec space-around encore une fois, vous avez vu le comportement des bords côte à côte. C'est l'argument en faveur de l'aménagement du bâtiment par manipulation plutôt que par mémorisation, et c'est le même argument derrière le fait de garder un ensemble d'outils visuels CSS proches : le générateur gradient et le générateur d'ombres-boîtes exister pour la même raison, car les dégradés et les ombres sont également plus faciles à composer à l'œil nu qu'à écrire en aveugle. Le cas plus large pour assembler ce type de boîte à outils est dans cette pièce sur le Boîte à outils pour les développeurs Web.
Flexbox ou CSS Grid ?
Cette question revient constamment, et le cadrage selon lequel c'est une compétition est l'erreur Flexbox est unidimensionnel : il pose des éléments le long d'un seul axe, en les enveloppant lorsqu'on leur dit de le faire, et il excelle dans les rangées de choses dont vous voulez que le navigateur négocie la taille Les barres d'outils, les barres de navigation, les groupes de boutons et les lignes de cartes sont des tâches flexbox naturelles La grille CSS est bidimensionnelle : elle contrôle les lignes et les colonnes ensemble, et elle excelle dans la structure au niveau de la page où vous voulez des pistes explicites.
Dans les projets réels, ils nichent constamment Une grille définit les régions de page, et un conteneur flexible dispose les éléments à l'intérieur de l'une de ces régions L'apprentissage de flexbox ne rend pas complètement la grille redondante et vice versa ; il vous rend fluide dans l'outil qui convient à chaque travail Un générateur est un moyen rapide d'atteindre cette fluidité pour le cas unidimensionnel, et une fois que les propriétés du conteneur sont de seconde nature, la lecture et l'écriture flex layouts par la main arrête d'avoir besoin d'une référence.
Comment utiliser le Flexbox Generator ?
Le flux reflète la façon dont vous envisagez une disposition.
- Choisir
flex-directionet si les éléments doivent être enveloppés. Cela définit les axes et le comportement de débordement, les deux décisions dont tout le reste dépend. - Définir l'alignement. Ajuster
justify-contentsur l'axe principal etalign-itemssur l'axe transversal jusqu'à ce que l'aperçu corresponde à la disposition de votre tête. - Espacement des sonneries. Définir le
gapentre les éléments avec le curseur et lorsque l'emballage est activé, définissezalign-contentpour espacer les lignes. - Copiez le CSS. La règle générée cible a
.containerclasse et mises à jour en direct Copiez-le en un clic et collez-le dans votre feuille de style.
Vous pouvez également ajouter ou supprimer des éléments d'aperçu pour tester le comportement d'une mise en page sous différents contenus. UN space-between navbar a l'air bien avec trois articles et très différent avec sept qui enveloppent, et pouvoir modifier le décompte tout en regardant est la façon dont vous l'attrapez avant qu'il n'atteigne la production.
L'écart remplace-t-il les marges d'espacement ?
Surtout, oui, et c'est une réelle amélioration Avant gap était pris en charge dans des conteneurs flexibles, les éléments d'espacement signifiaient ajouter des marges à chaque enfant, puis lutter contre la marge supplémentaire sur le premier ou le dernier, généralement avec un :last-child remplacement ou marge négative sur le parent. gap définit directement l'espace entre les éléments, s'applique également entre les lignes enveloppées et n'ajoute rien sur les bords extérieurs, de sorte que toute la classe de bugs bord-marge disparaît.
Le générateur traite gap en tant que contrôle de première classe avec un curseur de pixels, et il omet la déclaration lorsque l'écart est nul afin que la sortie reste minimale Pour le travail de production, gap sur les conteneurs flexibles est bien pris en charge sur les navigateurs actuels, il y a donc rarement une raison de revenir en arrière pour l'approche de marge Si vous convertissez une valeur d'espacement entre les unités pendant que vous travaillez, le Convertisseur d'unités CSS gère le px à rem arithmétique sans calculatrice.
Quelles sont les limites du CSS généré ?
Le générateur produit la règle du conteneur Il ne définit pas les propriétés par élément comme flex-grow, flex-shrink, ou flex-basis[traduction], qui contrôlent la façon dont les éléments individuels se développent et se contractent pour remplir l'espace Ce sont des décisions au niveau des éléments qui dépendent de votre contenu spécifique, et pour la plupart des mises en page, les propriétés du conteneur plus flex: 1 sur les éléments qui devraient croître est tout ce que vous avez besoin Lorsque vous avez besoin d'un contrôle fin par élément, la règle de conteneur généré est toujours la bonne base sur laquelle construire.
La sortie utilise des propriétés standard non préfixées Les préfixes de fournisseur pour flexbox étaient nécessaires pour les navigateurs qui sont des années hors de prise en charge, donc une feuille de style moderne ne devrait pas les transporter, et les ajouter aujourd'hui est du bruit Le CSS généré est prêt pour la production comme écrit, ce qui est le point : vous partez avec une règle que vous pouvez coller, pas un croquis de départ que vous devez terminer Pour l'ensemble plus large de petits utilitaires qui font fonctionner le front-end plus rapidement, ce récapitulatif de Outils de productivité des développeurs est un bon compagnon, tout comme le guide générateur de gradient si le CSS visuel est la partie que vous souhaitez accélérer.
Quelles dispositions courantes puis-je construire avec ?
Une poignée de recettes couvrent la plupart des travaux quotidiens de flexbox, et chacune est de quelques clics dans le générateur Une barre de navigation avec un logo à gauche et des liens à droite est justify-content: space-between avec align-items: center sur une rangée. Un héros parfaitement centré, le classique " ; centrez une case sur la page," ; est justify-content: center et align-items: center. Une pile verticale de champs de formulaire est flex-direction: column avec un gap pour un espacement cohérent, qui est plus propre que les marges sur chaque champ Une rangée réactive de cartes qui s'enroule sur de nouvelles lignes sur des écrans étroits est une rangée avec flex-wrap: wrap et un gap, alors flex: 1 sur les cartes elles-mêmes pour qu'elles grandissent pour remplir la rangée.
La valeur de construire ceux-ci dans le générateur plutôt que de les copier de la mémoire est que vous voyez les cas de bord immédiatement. Un space-between navbar avec un seul élément épingle cet élément au début, ce qui peut ressembler à un bug jusqu'à ce que vous compreniez cela space-between n'a rien à distribuer avec un seul élément Une rangée de cartes d'emballage se comporte différemment à deux cartes contre six, et le compte d'éléments réglable preview' ;s vous permet de vérifier les deux avant de les expédier La construction de la disposition par manipulation signifie que les cas surprenants font surface pendant que vous êtes encore dans l'outil, et non après qu'un utilisateur les a signalés.
Une fois qu'une recette est dans vos doigts, vous arrêtez d'avoir besoin du générateur pour elle et écrivez directement les cinq lignes C'est l'état final sain L'outil est un enseignant autant qu'un producteur : chaque mise en page que vous construisez en cliquant est une mise en page que vous comprenez un peu mieux la prochaine fois que vous l'écrivez à la main, ce qui est exactement comment une bonne utilité visuelle devrait se rendre progressivement inutile pour les bases tout en restant maniable pour les cas fétides.
FAQ
Qu'est-ce qu'un générateur de flexbox CSS ?
Un générateur de flexbox CSS est un outil visuel qui vous permet de définir les propriétés du conteneur flexible et de copier le CSS résultant. Vous ajustez le contenu de justification, les éléments d'alignement, la direction, l'enveloppement et l'écart, voyez un aperçu en direct et collez la règle générée dans votre feuille de style.
Comment centrer un div avec flexbox ?
Définissez le conteneur sur afficher : flex, puis justify-content : centre et align-items : centre Qui centre les éléments à la fois sur les axes principal et croisé Dans cet outil, choisissez centre pour les deux contrôles d'alignement et copiez le CSS.
Quelle est la différence entre les éléments de justification et d’alignement ?
justify-content distribue les éléments le long de l'axe principal, qui est horizontal pour une ligne et vertical pour une colonne. aligner-éléments positionne les éléments sur l'axe transversal, perpendiculairement à l'axe principal. Changer les échanges dans la direction flexible dont chacun contrôle l'axe.
Quand l'alignement-contenu a-t-il un effet ?
aligner-content n'affecte la mise en page que lorsque les éléments s'enroulent sur plus d'une ligne, car il espace ces lignes sur l'axe transversal. Avec flex-wrap réglé sur nowrap, il y a une seule ligne, donc la propriété ne fait rien et cet outil l'omet de la sortie.
Que fait la propriété gap dans flexbox ?
gap définit un espace cohérent entre les éléments flexibles sans ajouter de marges à chaque élément. Il s'applique entre les éléments d'une même ligne et entre les lignes enveloppées, et évite les problèmes de marge de bord créés par l'espacement basé sur la marge.
Quelle est la différence entre flex et inline-flex ?
affichage : flex fait du conteneur une boîte de niveau bloc qui prend toute la largeur disponible. affichage : inline-flex en fait une boîte de niveau en ligne qui se trouve dans le flux de texte et n'est aussi large que son contenu, tandis que les deux exposent leurs enfants avec les mêmes règles flexibles.
Flexbox remplace-t-il CSS Grid ?
No. Flexbox est un modèle unidimensionnel pour la pose d'éléments le long d'un seul axe, idéal pour les barres d'outils, la navigation et les rangées de cartes. La grille CSS est bidimensionnelle pour les lignes et les colonnes ensemble. Elles sont complémentaires et souvent utilisées dans la même disposition.
Le CSS généré est-il sûr à utiliser en production ?
Oui. Flexbox est pris en charge dans chaque navigateur moderne et l'outil émet des propriétés CSS standard non préfixées. Tout le traitement a lieu dans votre navigateur, donc rien n'est téléchargé et l'outil fonctionne hors ligne une fois chargé.
