Comment utiliser Flex pour rendre votre site Web plus réactif

Les conceptions de sites Web modernes doivent être réactives aux changements de contenu ou de taille du navigateur. Vous pouvez y parvenir à l'aide de CSS vanille, de requêtes multimédias ou de flexbox.

Certaines propriétés flexibles telles que flex-wrap ou flex-grow peuvent modifier la taille ou l'emplacement d'un élément de manière visuellement attrayante. Cet article présente des exemples d'utilisation des propriétés flex-grow, flex-shrink, flex-wrap, flex-flow et order flex.

Comment configurer l'affichage CSS Flex

Si vous n'êtes pas familier avec les bases de la flexbox, vous pouvez explorer ceci Extrait CodePen. Il comprend un exemple de code pour une configuration simple de flexbox. Tout d'abord, vous devrez encapsuler les éléments enfants sous une div parent ou un "conteneur flexible".

<classe div="parent">
<classe div="article-enfant"></div>
<classe div="article-enfant"></div>
<classe div="article-enfant"></div>
</div>

Ajouter le affichage: flexible propriété à la div parent.

.parent {
 affichage: flexible ;
}

Comment faire pousser des articles dans un conteneur

Le flex-croissance La propriété permet aux éléments enfants de se développer pour remplir l'espace disponible dans sa div parent. Cette propriété vous permet de spécifier le "ratio" d'espace que chaque élément de la boîte peut occuper.

Pour ajouter flex-grow, ajoutez la propriété CSS flex-grow à chacun des éléments enfants.

<classe div="parent">
<style div ="couleur de fond: rouge; flex-croissance: 1"></div>
<style div ="couleur de fond: orange; flex-croissance: 1"></div>
<style div ="couleur de fond: jaune; flex-croissance: 1"></div>
<style div ="couleur de fond: vert; flex-croissance: 3"></div>
<style div ="couleur de fond: bleu; flex-croissance: 1"></div>
</div>

.parent {
 largeur: 500 pixels ;
 affichage: flexible; 
}

Un flex-grow de 0 pour chaque élément signifie que les boîtes ne s'agrandiront pas pour remplir l'espace de leur parent. 0 est la valeur par défaut de cette propriété.

Une croissance flexible de 1 pour chaque élément forcera toutes les boîtes à s'étendre de manière égale pour s'adapter à l'espace disponible à l'intérieur du parent.

Si l'un des éléments avait une croissance flexible plus importante, par exemple :

<style div ="couleur de fond: vert; flex-croissance: 3"></div>

La boîte verte tentera de gagner jusqu'à trois fois plus d'espace que les autres boîtes.

Affichez le code de la propriété flex-grow dans ce Extrait CodePen pour voir un exemple de travail.

Comment réduire les éléments dans un conteneur

Dans certains cas, la largeur du parent peut diminuer et les éléments à l'intérieur du parent ne rentreront plus à l'intérieur. Vous pouvez utiliser le flex-rétractable propriété de réduire la taille des boîtes. De cette façon, ils peuvent rester confinés à l'intérieur du parent.

Flex-shrink vous permet de spécifier un ratio de rétrécissement pour chaque élément.

Ajoutez la propriété flex-shrink aux éléments div enfants. Modifiez les largeurs du parent et des enfants afin que les éléments ne tiennent pas dans le conteneur.

<classe div="parent">
<style div ="couleur de fond: rouge; flex-rétractable: 1"></div>
<style div ="couleur de fond: orange; flex-rétractable: 1"></div>
<style div ="couleur de fond: jaune; flex-rétractable: 1"></div>
<style div ="couleur de fond: vert; flex-rétractable: 2"></div>
<style div ="couleur de fond: bleu; flex-rétractable: 1"></div>
</div>

.parent {
 largeur: 500 pixels ;
 affichage: flexible; 
}
.parent div {
 largeur: 150 pixels ;
 hauteur: 150px ;
}

Un flex-shrink de 1 pour tous les éléments signifie que tous les éléments seront réduits de manière égale si la largeur du parent est réduite.

Si l'un des articles avait un flex-shrink plus important, par exemple :

<style div ="couleur de fond: vert; flex-rétractable: 2"></div>

La boîte verte tentera de rétrécir deux fois plus que les autres boîtes.

Affichez le code de la propriété flex-shrink dans ce Extrait CodePen pour voir un exemple de travail.

Comment déplacer des éléments vers la ligne suivante

Le flex-wrap La propriété vous permet de déplacer les éléments vers la ligne suivante s'ils ne tiennent pas dans la largeur du conteneur parent. Ici, les éléments ne rétrécissent pas et vous pourrez conserver la hauteur et la largeur des éléments.

Les options pour la propriété flex-wrap incluent :

flex-wrap: nowrap | envelopper | wrap-inverse

Ajoutez la propriété flex-wrap au conteneur flex parent. Assurez-vous que la largeur du conteneur est suffisamment petite pour qu'il ne puisse pas contenir les éléments enfants à l'intérieur. Cela forcera tous les éléments débordants sur une nouvelle ligne.

<classe div="parent">
<classe div="rouge"></div>
<classe div="orange"></div>
<classe div="Jaune"></div>
<classe div="vert"></div>
<classe div="bleu"></div>
</div>

.parent {
 largeur: 300 pixels ;
 bordure: 1 pixel noir uni ;
 affichage: flexible ;
 flex-wrap: enveloppe ;
}
.parent div {
 largeur: 100 pixels ;
 hauteur: 100px ;
}

La valeur wrap positionnera les éléments en commençant en haut à droite du conteneur. La valeur wrap-reverse repositionnera les éléments pour commencer en bas à droite du conteneur. Lors de l'emballage des éléments, il poussera les éléments sur une nouvelle ligne au-dessus au lieu d'en dessous.

Si vous spécifiez une hauteur sur le conteneur parent, le conteneur ajoutera un espacement entre les lignes d'éléments.

Si vous souhaitez supprimer cet espacement, mais conserver la hauteur de la div parente, utilisez la propriété align-content. Spécifiez la propriété align-content en tant que "flex-start" dans la div parent :

.parent { 
 largeur: 300 pixels; 
 hauteur: 300px ;
 bordure: 1 pixel noir uni; 
 affichage: flexible ;
 flex-wrap: enveloppe; 
 align-content: flex-Démarrer;
}

La propriété align-content est l'une des nombreuses propriétés propriétés flexbox qui vous permettent de contrôler l'alignement.

Afficher le code de la propriété flex-wrap dans ce Extrait CodePen pour voir quelques exemples.

Comment pousser des éléments vers la colonne suivante

Si vous utilisez une mise en page différente (telle qu'une colonne) et que vous avez toujours besoin d'envelopper les éléments, vous pouvez utiliser le flux flexible biens. Cette propriété flex est une combinaison des propriétés flex-wrap et flex-direction.

Exemples de combinaisons d'options que vous pouvez utiliser pour la propriété flex-flow :

flex-wrap: row nowrap | colonne nowrap | retour à la ligne | enveloppe de colonne | retour à la ligne | retour à la ligne de colonne

Cette propriété fonctionne de manière similaire à la propriété flex-wrap ci-dessus. Ajoutez flex-flow au conteneur flex parent. Assurez-vous que la largeur du conteneur parent est suffisamment petite pour forcer les éléments enfants à s'enrouler :

.parent {
 largeur: 300 pixels; 
 bordure: 1 pixel noir uni; 
 affichage: flexible; 
 flex-flow: enveloppe de colonne ;
}
.parent div {
 largeur: 100 pixels ;
 hauteur: 100px ;
}

Les éléments s'enrouleront dans la direction spécifiée (ligne ou colonne).

Affichez le code de la propriété flex-flow dans ce Extrait CodePen pour voir quelques exemples.

Comment modifier l'ordre des éléments

Si vous avez besoin de réorganiser les éléments sur la page en raison de n'importe quel type de données dynamiques, vous pouvez utiliser le Commande propriété flexible. Cette propriété vous permet de spécifier l'ordre d'apparition de chaque élément.

Les nombres ne doivent pas nécessairement commencer à partir de 1. Vous pouvez utiliser n'importe quels nombres et intervalles, et la propriété order ordonnera les éléments HTML du plus bas au plus élevé.

Ajoutez la propriété order à chacun des éléments à l'intérieur du conteneur flex parent :

<classe div="parent">
<classe div="rouge" style="commande: 2"></div>
<classe div="orange" style="commande: 1"></div>
<classe div="Jaune" style="commande: 5"></div>
<classe div="vert" style="commande: 4"></div>
<classe div="bleu" style="commande: 3"></div>
</div>

Dans ce cas, la case orange sera à l'extrême droite, suivie des cases rouge, bleue, verte, puis jaune.

Afficher le code de la propriété de commande dans ce Extrait CodePen pour voir quelques exemples.

Expérimenter avec plus de propriétés CSS sur votre site Web

Vous pouvez utiliser ces propriétés flexibles pour rendre votre site Web plus réactif. Cela inclut l'utilisation des propriétés flex-grow, flex-shrink, flex-wrap, flex-flow et order flex.

Vous pouvez également en savoir plus sur les propriétés flexibles pour vous aider à aligner les éléments HTML sur votre site Web.

Comment utiliser Flex pour aligner des éléments HTML

Lire la suite

A propos de l'auteur