Créez des mises en page Flexbox parfaites
.
Propriétés
Propriétés de l’élément Élément
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Préréglages
Centre horizontalement et verticalement
Parfait pour centrer un logo, un bouton ou tout autre élément à la fois horizontalement et verticalement.
Espacement
Créez un espacement égal entre les éléments avec espacement entre ou espace.
Menu
Créez un menu de navigation vertical avec un espacement et un alignement cohérents.
Grille
Créez une mise en page de grille réactive qui encapsule les éléments en fonction de l’espace disponible.
Bannière
Titre
Section de héros avec appel à l’action
Concevez une bannière de héros avec un titre, un sous-titre et un bouton d’appel à l’action.
pied de page
Company
About Us
Careers
Support
Centre
Contactez-nous
© 2023 Flexbox Generator
Créez un pied de page réactif avec des colonnes qui s’empilent sur des écrans plus petits.
Barre
navigation
Une disposition de barre de navigation commune avec un logo à gauche, des éléments de menu au centre et une icône de panier à droite.
Card Grid
de la carte Texte
de description de la carte ici
Titre de la carte Texte
de description de la carte ici
Titre de la carte Texte
de description de la carte ici
Une grille de carte réactive qui s’adapte à différentes tailles d’écran à l’aide des propriétés flexbox.
en page de
l’article
Publié le janvier 1, 2023 · 5 min lire le
ici. Il peut s’agir d’un bref résumé ou du texte complet de l’article. Flexbox permet d’aligner l’image et le texte d’une manière visuellement attrayante.
Une mise en page d’article commune avec une image à gauche et du contenu textuel à droite, empilés sur les appareils mobiles.
de mise en page
Une mise en page de tableau de bord avec en-tête, barre latérale, zone de contenu principale et pied de page à l’aide de flexbox pour l’alignement horizontal et vertical.
de base de Flexbox Qu’est-ce
que Flexbox ?
La disposition de boîte flexible, communément appelée Flexbox, est un modèle de disposition CSS3 qui fournit un moyen efficace de répartir et d’aligner l’espace entre les éléments d’un conteneur, même lorsque leur taille est inconnue ou dynamique.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
Concepts clés :Flexbox introduit deux concepts principaux : lesconteneur and the éléments. Le conteneur est l’élément parent et les éléments sont ses enfants directs.
Les
dispositions Flexbox sont basées sur deux axes : l’axemain axis and the l’axe.
-
Axe principal :principal le long duquel les éléments flexibles sont disposés. Défini par
flex-direction. - l’axe transversal :l’axe perpendiculaire à l’axe principal. Sa direction dépend de la direction de l’axe principal.
Propriétés
| Property | Description |
|---|---|
display |
Définit un conteneur flexible, en ligne ou en bloc selon la valeur donnée. |
flex-direction |
Établit l’axe principal, définissant ainsi la direction dans laquelle les articles flexibles sont placés dans le conteneur flexible. |
flex-wrap |
Par défaut, les articles flexibles essaieront tous de tenir sur une seule ligne. Vous pouvez changer cela et permettre aux articles de s’emballer au besoincette propriété. |
justify-content |
Aligne les éléments flexibles le long de l’axe principal de la ligne actuelle du conteneur flexible. |
align-items |
Aligne les éléments flexibles le long de l’axe transversal de la ligne actuelle du conteneur flexible. |
align-content |
Aligne les lignes d’un conteneur flexible à l’intérieur lorsqu’il y a de l’espace supplémentaire dans l’axe transversal. |
Par
| Property | Description |
|---|---|
order |
défaut, les éléments flexibles sont disposés dans l’ordre source. Toutefois, laorderpropriété contrôle l’ordre dans lequel ils apparaissent dans le conteneur flexible. |
flex-grow |
Définit la capacité d’un élément flexible à se développer si nécessaire. Il accepte une valeur sans unité qui sert de proportion. |
flex-shrink |
Définit la capacité d’un élément flexible à se réduire si nécessaire. |
flex-basis |
Définit la taille initiale d’un élément flexible avant que l’espace disponible ne soit distribué en fonction des facteurs de flexibilité. |
align-self |
l’alignement par défaut (ou celui spécifié paralign-items) pour des éléments flexibles individuels. |
Related Tools
Convertisseur de stylet en CSS
Rapide, facile et sécurisé.
Convertisseur SCSS en CSS
Transformez votre code SCSS en CSS. Rapide, facile et sécurisé.
Convertisseur Sass en CSS
Transformez votre code Sass en CSS. Rapide, facile et sécurisé.
Convertisseur CSS vers SCSS
Transformez votre code CSS en SCSS avec des variables, l’imbrication, etc. Rapide, facile et sécurisé.
Convertisseur d'image vers Base64
Convertissez les images en encodage Base64 pour le développement Web et l’intégration
Générateur de transitions CSS3
Transition