Playground Flexbox
Expérimentez avec CSS Flexbox visuellement.
Contenedor flex
/* Contenedor */
.flex-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}
Playground interactif CSS Flexbox
CSS Flexbox (Flexible Box Layout) est l'un des systemes de mise en page les plus puissants et les plus utilises en developpement web moderne. Il permet de distribuer l'espace et d'aligner les elements au sein d'un conteneur de maniere flexible et previsible, meme lorsque la taille des elements est inconnue ou dynamique. Flexbox simplifie enormement les taches de design qui necessitaient auparavant des hacks compliques avec les floats ou le positioning.
Notre playground Flexbox vous permet d'experimenter visuellement avec toutes les proprietes du conteneur flex : flex-direction (direction de l'axe principal), justify-content (alignement sur l'axe principal), align-items (alignement sur l'axe transversal), flex-wrap (comportement de debordement) et gap (espace entre les elements). Vous pouvez egalement configurer les proprietes individuelles de chaque element : order, flex-grow, flex-shrink et align-self.
L'apercu se met a jour en temps reel, vous permettant de voir immediatement comment chaque propriete affecte la distribution des elements. Vous pouvez ajouter et supprimer des elements, cliquer sur n'importe quel element pour le selectionner et modifier ses proprietes individuelles, puis copier le code CSS genere pour l'utiliser directement dans votre projet. C'est l'outil parfait pour apprendre Flexbox ou pour prototyper rapidement des mises en page.
Questions fréquentes
Quand dois-je utiliser Flexbox plutot que Grid ?
Flexbox est ideal pour les mises en page unidimensionnelles (une ligne ou une colonne), comme les barres de navigation, les listes de cartes horizontales ou l'alignement d'elements dans un conteneur. CSS Grid est meilleur pour les mises en page bidimensionnelles (lignes et colonnes simultanement), comme les mises en page de page complete ou les galeries complexes.
Que fait flex-grow ?
flex-grow definit dans quelle mesure un element peut s'agrandir pour remplir l'espace disponible dans le conteneur. Une valeur de 0 (par defaut) signifie que l'element ne s'agrandit pas. Si un element a flex-grow: 1 et un autre flex-grow: 2, le second s'agrandira deux fois plus que le premier.
Est-il compatible avec tous les navigateurs ?
Oui, CSS Flexbox est entierement pris en charge par tous les navigateurs modernes depuis des annees. Chrome, Firefox, Safari, Edge et Opera le prennent en charge sans prefixe. Seul Internet Explorer 10-11 avait une implementation partielle et boguee.