Boîte flexible CSS #1. Création de votre première mise en page Flexbox

Fin 2018, nous avons publié un livre sur CSS Grid, l'outil de mise en page qui révolutionne le web-design frontend. CSS Grid est entièrement natif de CSS et vous permet de créer un système de mise en page basé sur une grille, en utilisant des colonnes et des lignes.

"CSS Grid Explained" est immédiatement devenu l'un de nos livres les plus vendus. Nous travaillons donc sur une mise à jour et une extension importantes pour ce livre. Nous commençons également à produire un nouveau livre, "Flexbox Explained". Flexbox est étroitement lié à CSS Grid, mais il existe des différences notables :

• Flexbox est un modèle de mise en page unidimensionnel. Il peut gérer soit des colonnes soit des lignes.
• CSS Grid est un modèle de mise en page en deux dimensions. Il peut gérer à la fois les colonnes et les lignes.

Au cours des prochaines semaines, nous allons publier une série de tutoriels Flexbox pendant que nous écrivons "Flexbox expliqué". Ce premier tutoriel présente les concepts de base de CSS Flexbox avec des exemples pratiques.

Présentation de Flexbox

La spécification CSS Flexbox décrit une mise en page avec des éléments ( flex-items ) à l'intérieur d'un conteneur ( flex-container ). Ces articles peuvent grossir ou rétrécir en largeur et/ou en hauteur, selon l'espace disponible dans le conteneur. Les éléments "flex" pour s'adapter au conteneur parent de la meilleure façon possible.

Ces éléments "fléchis" peuvent être disposés dans n'importe quelle direction (axe en ligne ou axe de bloc), offrant ainsi une grande flexibilité lors du changement de la taille (largeur ou hauteur) de l'écran ou de son orientation.

Vous pouvez consulter la spécification Flexbox W3C en cliquant sur ce lien.

Étape 1. Créer le HTML

Commençons cet exemple en créant un fichier HTML avec un exemple de code. J'ai préparé du HTML pour vous - c'est un conteneur avec 3 éléments enfants.

• Ouvrez votre éditeur de code préféré.
• Créez un fichier HTML vide.
• Visitez cette page et copiez le code HTML
• Collez ce code dans votre fichier HTML.

Étape 2. Créer le CSS

Maintenant que nous avons un conteneur avec 3 éléments, ajoutons un peu de style.

• Créez un fichier CSS appelé style.css. . Placez ce fichier dans le même dossier que votre fichier HTML. Le lien vers ce fichier CSS est déjà dans la balise de votre fichier HTML
• Copiez et collez ce code, également disponible sur Codepen :

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

Cette image montre comment votre code apparaîtra lorsque vous ouvrirez le fichier HTML dans un navigateur. Les 3 éléments enfants sont aussi larges que leur conteneur parent. La hauteur est déterminée par le contenu de chaque élément. Remarquez le rembourrage de 2rem (environ 32 pixels sur un écran de bureau) de tous les côtés.

Étape 3. Les styles CSS Flexbox

Il est maintenant temps de commencer la partie Flexbox de ce didacticiel.

• Modifiez le fichier CSS et ajoutez ce code :

 .container { display: flex; }

Cette image montre à quoi ressemblera votre code maintenant :

Qu'est ce qui a changé? Sur le plan technique, le conteneur parent est désormais un flex-container . Les éléments enfants sont devenus flex-items .

Pourquoi la taille des conteneurs a-t-elle changé ? Les éléments flexibles ne sont pas aussi larges que leur conteneur parent. Ils sont maintenant aussi larges que le contenu qu'ils contiennent. Les flex-items apparaissent sous forme d'éléments flottants à gauche. Ils se comportent comme des éléments en ligne .

Pour voir clairement la largeur du conteneur parent, vous pouvez appliquer un background-color :

• Modifiez le code CSS et ajoutez ce code :

 .container { display: flex; background-color: #f5ca3c; }

Voici comment le conteneur apparaît maintenant :

Vous avez déjà remarqué que le flex-container se comporte (principalement) comme un élément de niveau bloc. Cependant, nous faisons également en sorte que le conteneur se comporte comme un élément de niveau en ligne. Pour ce faire, nous changeons la valeur de la propriété display en inline-flex .

• Modifiez le code CSS :

 .container { display: inline-flex; background-color: #f5ca3c;

Le conteneur flexible est maintenant un élément de niveau en ligne, comme vous pouvez le voir sur cette image :

Avant de continuer dans ce didacticiel, changeons le comportement en un élément de niveau bloc.

• Modifiez le code CSS :

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Étape 4. Changer les lignes Flexbox en colonnes

Jusqu'à présent, nous avons créé un flex-container . Nous avons également vu comment les enfants de ce conteneur se comportent lorsqu'ils sont transformés en flex-items .

Voyons maintenant comment changer la direction de notre mise en page. La direction par défaut d'un flex-container est basée sur les lignes. Cependant, vous pouvez modifier ce comportement avec la propriété flex-direction .

• Modifiez le code CSS :

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

Après la mise à jour de votre code, vous ne verrez aucun changement car flex-direction: row est la valeur par défaut. Apportons un changement vraiment visible : modifiez la direction du flex-container en column .

• Modifiez le code CSS :

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

Cette image suivante montre le changement dans votre mise en page :

Maintenant, la direction du flex-container est basée sur l'axe du bloc (colonne). Les flex-items sont alignés de haut en bas et chacun de ces éléments prend toute la largeur de son conteneur parent. Ainsi, ils se comportent comme des éléments de bloc.

Maintenant, vous pouvez commencer à remettre les choses en question à ce stade : " Hé, ma mise en page ressemble maintenant exactement à la toute première mise en page de ce didacticiel ! " C'est vrai. Visuellement, il n'y a aucune différence entre cette mise en page actuelle avec un flex-container et la première mise en page de cet exemple avec un conteneur de bloc.

Cependant, nous avons maintenant plus de contrôle. Par exemple, vous pouvez inverser la direction des flex-items avec les propriétés row-reverse et column-reverse .

• Modifiez le code CSS :

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

Cette image montre à quoi ressemblera votre mise en page après cette nouvelle mise à jour :

Pour voir les flex-items inversés dans une rangée, modifiez la valeur de la propriété flex-direction .

• Modifiez le code CSS :

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

Résumé de la boîte flexible

Toutes nos félicitations! Vous avez appris à déclarer un flex-container . Vous avez vu comment flex-items se comportent en fonction de la flex-direction appliquée à leur conteneur parent ( row ou column ). Vous savez également comment inverser l'ordre des flex-items .

Toutes ces modifications sont effectuées avec CSS, cela n'affectera donc pas la structure du balisage HTML de votre site. C'est l'un des avantages d'utiliser Flexbox. L'inversion de l'ordre des flex-items n'est qu'une des fonctionnalités de ce module CSS. Il y a beaucoup plus à apprendre sur Flexbox, alors consultez la partie 2 de ce didacticiel dans quelques jours.

Plus de tutoriels de cette série

• Boîte flexible CSS #2. Comment utiliser la propriété justifier-content
• Boîte flexible CSS #3. La propriété align-items
• Boîte flexible CSS #4. La propriété flex-grow