Création de dispositions flexibles avec Flexbox

Flexbox: une puissance de mise en page CSS

Flexbox, ou le module de mise en page Flexible CSS, simplifie la disposition unidimensionnelle - obstruant les éléments en ligne ou en colonne. L'application de display: flex (ou display: inline-flex) à un conteneur transforme ses enfants directs en éléments flexibles, régis par des règles Flexbox. Cela rationalise le codage de divers motifs d'interface utilisateur, comme des formes flexibles ou un centrage vertical. Choisissez Flexbox plutôt que la grille lors de l'alignement des éléments horizontalement ou verticalement, mais pas les deux; La grille excelle à des arrangements bidimensionnels (lignes et colonnes).

Flexbox Fundamentals

Avant la grille CSS, Flexbox a régné Suprême pour les dispositions à axe unique (lignes ou colonnes en utilisant flex-direction: row ou column). Ajouter simplement display: flex à un conteneur initie un contexte de formatage flexible pour ses enfants. Remarque: les navigateurs plus âgés peuvent nécessiter des préfixes de fournisseurs comme -webkit-flex ou -moz-flex.

L'image ci-dessous illustre comment les enfants directs d'un conteneur flexible deviennent des éléments flexibles. Il peut s'agir d'éléments ou de nœuds de texte non vides. Sans plus de style, les éléments ont une hauteur égale (basée sur les plus hautes), empiler horizontalement (ou verticalement dans les modes d'écriture verticale) et n'ont pas d'espacement. Ils pourraient même déborder le conteneur.

Applications pratiques de Flexbox

Flexbox simplifie les dispositions complexes. Considérez ces exemples:

1. Composant d'objet multimédia:

Un objet multimédia traditionnel (image à côté du texte) a précédemment requis des flotteurs et des hacks clearfix. Flexbox élimine ceci:

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

Ce code concis obtient le même résultat, en s'adaptant dynamiquement aux tailles d'image.

2. Composants de forme flexible:

La création de formes réactives est sans effort avec Flexbox. La flex snuls property (combinant flex-grow, flex-shrink et flex-basis) contrôle le dimensionnement des éléments:

div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */

l'entrée se développe, tandis que le bouton reste un 150px fixe. N'oubliez pas que les valeurs flex-grow et flex-shrink sont proportionnelles.

3. Centering vertical:

Le contenu de centrage verticalement est simplifié avec align-items: center:

.flex-container { display: flex; align-items: center; }

Ce centre fléchit les éléments dans leur conteneur.

4. Disposages en forme de grille:

Bien que la grille soit idéale pour les grilles, Flexbox peut créer des dispositions adaptables en utilisant flex-wrap: wrap et ajuster flex-basis et flex-grow:

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

Flexbox vs Grid: Choisir le bon outil

Utiliser la grille pour les dispositions bidimensionnelles; Utilisez Flexbox pour les dispositions à axe unique nécessitant un alignement horizontal ou vertical, mais pas les deux. Souvent, les projets combinent les deux techniques de résultats optimaux.

Apprentissage plus approfondi: Consultez "un guide complet de Flexbox" de CSS-Tricks et d'autres ressources pour une plongée plus profonde dans les capacités Flexbox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!