CSS · Leçon 4

Flexbox

Flexbox aligne des éléments sur une ligne (ou une colonne) et répartit l'espace entre eux. Idéal pour les menus, les barres d'outils, les cartes…

Une seule ligne pour commencer

On met display: flex sur le parent : ses enfants directs se rangent côte à côte.

Axe principal ➡

Le sens des éléments (flex-direction). Aligné par justify-content.

Axe secondaire ⬇

L'axe perpendiculaire. Aligné par align-items.

Le terrain de jeu

Teste toutes les combinaisons. Remarque ce qui se passe quand tu passes flex-direction en column : les axes s'inversent !

1
2
3
4

      

    

    

      
En flex-direction: row, quelle propriété centre les éléments verticalement ?

      
    
        
  1. justify-content: center
    2. 
        
  2. align-items: center
    3. 
        
  3. text-align: center
    4. 
      

      
En ligne, l'axe principal est horizontal (justify-content) et l'axe secondaire vertical (align-items).

    

  


  

    
Côté enfants : flex

    
flex: 1 dit à un enfant « prends l'espace restant ». Deux enfants en flex: 1 se partagent l'espace à égalité ; flex: 2 en prend deux fois plus.

    



    

  


  

    
Recettes à connaître par cœur


/* Centrer parfaitement */
.parent { display: flex; justify-content: center; align-items: center; }

/* Logo à gauche, menu à droite */
.nav { display: flex; justify-content: space-between; align-items: center; }

/* Des cartes qui passent à la ligne */
.liste { display: flex; flex-wrap: wrap; gap: 16px; }

  


  

    
À toi de jouer

    

      
Pile au centre

      
Centre la bulle horizontalement et verticalement dans la scène, avec flexbox.

      



      

      
IndiceC’est le parent (.scene) qui doit passer en display: flex, pas la bulle.

      
IndiceHorizontalement : justify-content. Verticalement : align-items.

      
IndiceLes deux valent center : justify-content: center; align-items: center;


    


    

      
La barre de navigation

      
    
        
  • Le logo à gauche, la liste de liens à droite, centrés verticalement.
    • 
        
  • Les liens côte à côte (la ul aussi en flex), espacés de 20px.
    • 
      

      



      

      
IndiceDeux conteneurs passent en flex : nav (qui range le logo et la liste) et ul (qui range les liens).

      
IndiceLogo à gauche et liste à droite : justify-content: space-between. Centrage vertical : align-items: center.

      
IndiceLes deux règles :
nav { display: flex; justify-content: space-between; align-items: center; }
ul { display: flex; gap: 20px; }


    


    

      
Trois colonnes égales

      
Les 3 colonnes doivent avoir exactement la même largeur et remplir toute la ligne, avec 16px d'écart.

      



      

      
IndiceLe parent .ligne passe en display: flex, avec gap: 16px.

      
IndicePar défaut, chaque colonne est aussi large que son texte. flex: 1 leur fait partager l’espace à parts égales.

      
IndiceLes deux règles :
.ligne { display: flex; gap: 16px; }
.col { flex: 1; }


    

  


  

    
À retenir