341 outils gratuits
Outils en ligne
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
341 outils gratuits, sans inscription ni installation, tout se passe dans votre navigateur.
Visualisez et générez du CSS Flexbox
Flexbox est le mécanisme de mise en page le plus utilisé du web, et celui dont on retient le moins les noms de propriétés : `justify-content` agit sur l'axe principal, `align-items` sur l'axe perpendiculaire, et tout s'inverse dès que la direction passe en colonne. Cet outil laisse manipuler les réglages sur un exemple visible et donne le CSS correspondant. C'est plus rapide que de chercher une antisèche, et surtout cela ancre la seule chose à comprendre : la direction décide de ce que veulent dire « horizontal » et « vertical ».
Sur le conteneur : `display: flex`, `justify-content: center` et `align-items: center`. C'est la réponse à la question la plus posée du CSS, et elle tient en trois lignes depuis Flexbox, là où il fallait auparavant des marges négatives ou des tableaux.
Flexbox pour une disposition en une dimension, une rangée ou une colonne, et Grid pour une vraie grille à deux dimensions. En pratique on les combine : une grille pour la page, des flex pour les composants qui la remplissent.
Parce qu'un élément flex ne descend pas sous sa taille de contenu par défaut : son `min-width` implicite vaut `auto`. Un `min-width: 0` sur l'élément concerné, ou `overflow: hidden`, règle le cas, et c'est le piège le plus fréquent avec les textes longs.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr