Maîtriser Flexbox : mes notes d'étude sur la création de mises en page réactives

Très bien, prenez un café (ou un thé, on ne juge pas) et plongeons dans le monde de Flexbox ! Si vous avez déjà été frustré d'essayer de donner une belle apparence à une page Web sur n'importe quel appareil, ne vous inquiétez pas, vous n'êtes pas seul. Flexbox est là pour sauver la situation, et croyez-moi, ce n'est pas aussi effrayant que ça en a l'air !

Qu'est-ce que c'est que Flexbox ?

Flexbox est comme votre assistant de mise en page personnel, organisant facilement et comme par magie vos éléments. Apprenez à configurer un conteneur flexible et à organiser votre contenu sans transpirer.

Ce modèle de mise en page puissant et efficace en CSS vous permet d'organiser et d'aligner les éléments de manière réactive et flexible dans un conteneur. Il facilite l'alignement et la répartition de l'espace entre les éléments, sans nécessiter de calculs complexes ou d'ajustements de positionnement. Flexbox a été conçu pour gérer les mises en page unidimensionnelles (soit une ligne, soit une colonne) de la manière la plus simple possible.

Plongeons dans des exemples pratiques et des conseils pour éviter les erreurs courantes, afin que votre conception reste fluide, comme votre café du matin.

Pour mieux comprendre Flexbox, divisons-le en deux parties principales :

Propriétés des conteneurs Flex (conteneurs parents) :

• flex-direction
• flex-wrap
• flex-flow
• justifier-contenu
• aligner les éléments
• aligner le contenu

Tout d'abord, nous devons définir 'display: flex' dans le conteneur parent. Cela active Flexbox et permet d'appliquer toutes les propriétés au conteneur et à ses éléments.

display:flex

direction flexible

flex-direction: 
row | row-reverse | column | column-reverse

Définit la direction principale des éléments dans le conteneur. Si vous ne spécifiez pas de direction, la valeur par défaut s'appliquera :

• rangée (par défaut) : les éléments sont organisés horizontalement comme une ligne.
• row-reverse : les éléments sont organisés horizontalement mais à l'envers.
• colonne : les éléments sont organisés verticalement.
• column-reverse : les éléments sont organisés verticalement dans l’ordre inverse. ####flex-wrap

flex-wrap
nowrap | wrap | wrap-reverse

Contrôle si les éléments doivent être divisés en plusieurs lignes/colonnes :

• nowrap (par défaut) : les éléments restent sur une seule ligne/colonne.
• wrap : les éléments s'enroulent sur de nouvelles lignes/colonnes lorsqu'ils ne rentrent pas.
• wrap-reverse : les articles sont emballés à l'envers.

flux flexible

flex-flow

Un raccourci pour les propriétés flex-direction et flex-wrap, qui définissent ensemble les axes principal et transversal. Par défaut : ligne nowrap.

justifier-contenu

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

Aligne les éléments le long de l'axe principal (direction définie par flex-direction) :

• flex-start : les éléments s'alignent au début du conteneur.
• flex-end : les éléments s'alignent à l'extrémité du conteneur.
• centre : les éléments sont alignés au centre.
• espace entre : les éléments sont uniformément espacés, avec un espace supplémentaire entre eux.
• espace autour : les éléments ont un espace égal autour d'eux.
• espacement uniforme : les éléments ont un espace égal entre et autour d'eux.

aligner les éléments

display:flex

Aligne les éléments sur l'axe transversal (perpendiculaire à l'axe principal) :

• stretch (par défaut) : les éléments s'étirent pour remplir le conteneur.
• flex-start : les éléments s'alignent au début de l'axe transversal.
• flex-end : les éléments s'alignent à la fin de l'axe transversal.
• centre : les éléments sont alignés au centre.
• baseline : les éléments s'alignent sur la ligne de base de leur contenu.

aligner le contenu

flex-direction: 
row | row-reverse | column | column-reverse

Aligne les lignes du conteneur lorsqu'il y a plusieurs lignes d'éléments flexibles :

• Options similaires à celles des éléments d'alignement, mais appliquées à plusieurs lignes.

De plus, bien que cela ne soit pas exclusif à Flexbox, l'écart est souvent utile ici pour styliser les mises en page Flexbox :

flex-wrap
nowrap | wrap | wrap-reverse

Propriétés que nous pouvons appliquer aux éléments flexibles (conteneurs enfants) :

• commander
• flex-croissance
• flex-rétrécissement
• base flexible
• flex
• s'aligner

commande

flex-flow

Contrôle l'ordre visuel des éléments flexibles. La valeur par défaut pour tous les articles est 0, mais vous pouvez définir des nombres supérieurs ou inférieurs pour modifier l'ordre.

croissance flexible

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

Définit l'espace qu'un élément doit occuper s'il y a de l'espace supplémentaire. Si tous les éléments ont flex-grow : 1, ils partageront l'espace supplémentaire de manière égale.

flex-rétrécissement

align-items 
stretch | flex-start | flex-end | center | baseline

Définit le degré de rétrécissement d'un élément lorsque l'espace est restreint. La valeur par défaut est 1 (les éléments peuvent rétrécir) ; 0 empêche le rétrécissement.

base flexible

align-content

Définit la taille initiale d'un élément avant que l'espace ne soit distribué. Cela peut être en pixels, en pourcentage ou automatiquement.

fléchir

gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px

Un raccourci pour définir simultanément flex-grow, flex-shrink et flex-basis. Par exemple, flex : 1 1 200px ; signifie que l'élément peut grandir et rétrécir avec une taille de base de 200 px.

s'aligner

e.g., order: 2

Permet aux éléments individuels de s'aligner différemment des autres (remplace les éléments d'alignement). Par défaut, il utilise la valeur align-items du conteneur.

Ce code constitue un point de départ idéal pour explorer les propriétés Flexbox en action et expérimenter le style CSS.

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple Flexbox</title>
  <link rel="stylesheet" href="styles.css">
&Lt;/tête>
<corps>
  <div>



<p>Alors que nous terminons notre aventure Flexbox, parlons un peu de <em>magie CSS : pseudo-classes</em>. Ces outils pratiques vous permettent de styliser les éléments en fonction de la <strong>position, de l'état ou des interactions</strong>, rendant ainsi la mise en page Flexbox plus dynamique et interactive. Que vous utilisiez :nth-child() pour alterner les styles, :hover pour créer des animations subtiles ou :first-child pour faire apparaître un élément, les pseudo-classes vous donnent le pouvoir d'ajouter des touches uniques sans HTML supplémentaire.</p>

<p>Prêt à continuer à améliorer vos compétences ? Bien sûr ! Restez dans les parages, car mon prochain article plongera encore plus profondément dans les techniques CSS pour donner vie à nos mises en page. Je suis aussi là pour apprendre et grandir, donc si vous avez des conseils, des retours ou des corrections, n'hésitez pas à laisser un commentaire. Continuons à construire ensemble !</p>


          

            
        

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!