Il n'est pas nécessaire de comprendre chaque l’aspect de Flexbox avant de pouvoir vous lancer et commencer. Dans ce tutoriel, nous allons présenter quelques fonctionnalités de Flexbox tout en concevant une «présentation d'actualités» comme celle que vous pouvez trouver sur The Guardian..
La raison pour laquelle nous utilisons Flexbox est qu’elle fournit des fonctionnalités très puissantes:
nous pouvons facilement créer des colonnes réactives
on peut faire des colonnes d'égale hauteur
nous pouvons pousser le contenu à la bas d'un conteneur
Alors, commençons!
1. Commencez avec deux colonnes
La création de colonnes en CSS a toujours été un défi. Pendant longtemps, les seules options consistaient à utiliser des flottants ou des tables, mais les deux avaient leurs propres problèmes..
Flexbox facilite le processus en nous offrant:
code de nettoyage: nous avons seulement besoin d'un conteneur avec affichage: flex
pas besoin de clair flotte, empêchant un comportement inattendu de la mise en page
balisage sémantique
la flexibilité: on peut redimensionner, étirer, aligner les colonnes dans quelques lignes de CSS
Commençons par faire deux colonnes; celui qui est 2/3 de la largeur de notre conteneur, et celui qui est 1/3.
2/3 colonne
1/3 colonne
Il y a deux éléments ici:
la des colonnes récipient
deux colonne enfants, un avec une classe supplémentaire de colonne principale que nous utiliserons pour l'élargir
Comme la colonne principale a une valeur flex de 2, il prendra deux fois plus d'espace que l'autre colonne.
En ajoutant quelques styles visuels supplémentaires, voici ce que nous obtenons:
2. Faire de chaque colonne un conteneur Flexbox
Chacune de ces deux colonnes contiendra plusieurs articles empilés verticalement, nous allons donc tourner la colonne éléments dans les conteneurs Flexbox aussi. Nous voulons:
les articles à empiler verticalement
les articles à étendue et remplissez l'espace disponible
.colonne display: flex; direction de flexion: colonne; / * Empile les articles verticalement * / .article flex: 1; / * Étire les articles pour remplir l'espace restant * /
le direction de flexion: colonne statuer sur le récipient, combiné avec le flex: 1 statuer sur le les enfants veille à ce que les articles remplissent tout l'espace vertical en maintenant nos deux premières colonnes à la même hauteur.
3. Transformer chaque article en conteneur Flexbox
Maintenant, pour nous donner un contrôle supplémentaire, transformons chaque article en conteneur Flexbox. Chacun d'entre eux contiendra:
un titre
un paragraphe
une barre d'information avec l'auteur et le nombre de commentaires
une image sensible facultative
Nous utilisons ici Flexbox pour «pousser» la barre d’information vers le bas. Pour rappel, voici la mise en page de l'article que nous visons:
Voici le code:
.article display: flex; direction de flexion: colonne; base flexible: auto; / * définit la taille initiale de l'élément en fonction de son contenu * / .article-body display: flex; flex: 1; direction de flexion: colonne; .article-content flex: 1; / * Ceci fera que le contenu remplira l'espace restant, et poussera ainsi la barre d'information en bas * /
Les éléments de l'article sont disposés verticalement grâce au direction de flexion: colonne; règle.
Nous appliquons flex: 1 au contenu de l'article élément pour qu'il remplisse l'espace vide et "pousse" le article-info en bas, peu importe la hauteur des colonnes.
4. Ajouter des colonnes imbriquées
Dans la colonne de gauche, ce que nous voulons réellement, c’est un autre ensemble de colonnes. Nous allons donc remplacer le deuxième article par le même des colonnes conteneur que nous avons déjà utilisé.
Comme nous voulons que la première colonne imbriquée soit plus large, nous ajoutons un colonne imbriquée classe avec le style supplémentaire:
.colonne imbriquée flex: 2;
Cela rendra notre nouvelle colonne deux fois plus large que l'autre.
5. Donnez au premier article un Mise en page horizontale
Le premier article est vraiment gros. Pour optimiser l'utilisation de l'espace, changez sa disposition pour qu'elle soit horizontale.
le ordre Cette propriété est très utile ici, car elle nous permet de modifier l’ordre des éléments HTML sans affecter le balisage HTML. le article-image vient réellement avant la article-corps dans le balisage, mais il se comportera comme s'il venait après.
6. Rendre la mise en page sensible
Tout cela ressemble à ce que nous voulons, bien que ce soit un peu écrasé. Réglons cela en allant réactif.
Une excellente fonctionnalité de Flexbox est que vous n’avez qu’à retirer le affichage: flex règle sur le conteneur pour désactiver complètement Flexbox, tout en conservant toutes les autres propriétés de Flexbox (telles que align-items ou fléchir) valide.
Par conséquent, vous pouvez déclencher une présentation «réactive» en activant uniquement Flexbox. au dessus de un certain point d'arrêt.
Nous allons enlever affichage: flex à la fois le .des colonnes et .colonne sélecteurs, au lieu de les envelopper dans une requête multimédia:
Écran @media et (largeur minimale: 800px) .columns, .column display: flex;
C'est tout! Sur des écrans plus petits, tous les articles seront superposés. Au-dessus de 800 pixels, ils seront disposés en deux colonnes.
7. Ajouter des touches de finition
Pour rendre la mise en page plus attrayante sur des écrans plus grands, ajoutons quelques ajustements CSS:
Le premier article a son contenu disposé horizontalement, avec le texte à gauche et l'image à droite. De plus, la colonne principale est maintenant plus large (75%) et la colonne imbriquée aussi (66%). Voici le résultat final!
Conclusion
J'espère vous avoir montré que vous ne devez pas comprendre tous les aspects de Flexbox pour commencer à l'utiliser et commencer à l'utiliser! Cette mise en page réactive est un modèle très utile. séparez-le, jouez avec, dites-nous comment vous vous en sortez!
Share
Ce que vous allez créer
Accentsconagua
