Mes 3 astuces Flexbox pour améliorer votre CSS

Lorsque je révise CSS, je rencontre souvent des erreurs liées à Flexbox. Dans cet article, je souhaite les partager pour que vous n'ayez pas à les refaire.

justifier-content vs column-gap

Lorsque Flexbox est apparu pour la première fois, beaucoup étaient encouragés par la propriété justify-content, qui vous permet d'organiser simplement les éléments de la grille de manière uniforme en utilisant des valeurs d'espacement ou d'espacement. Et bien sûr, beaucoup ont commencé à l'utiliser. Mais il y a un problème.

Lorsque vous utilisez ces valeurs, vous ne pensez pas que la cardinalité changera. Par exemple, si j'ajoute plus d'éléments à une grille à 4 colonnes, ils ne seront pas positionnés au début de la ligne comme prévu.

Je veux suggérer une autre façon. Il existe une propriété de grille de colonnes avec laquelle vous pouvez également simplement définir l'espacement entre les éléments et votre grille se comportera comme l'utilisateur s'y attend.

Ne faites pas cela

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.grid {
  display: flex;
  justify-content: space-between; /* or space-around */
}

.item {
  width: 30%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Vous pouvez utiliser ceci

<div class="grid">
  <div class="item"><span>item 1</span></div>
  <div class="item"><span>item 2</span></div>
  <div class="item"><span>item 3</span></div>
  <div class="item"><span>item 4</span></div>
  <div class="item"><span>item 5</span></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.grid {
  display: flex;
  column-gap: 5%;
}

.item {
  width: 30%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

justifier-content et align-items vs margin: auto

Lorsque nous résolvons des problèmes de positionnement d'éléments, nous aimons utiliser les propriétés justifier-content et align-items. Je ne conteste pas qu'il s'agisse d'un moyen de positionnement pratique et facile. Mais encore une fois, il y a un problème qui est particulièrement commun avec le positionnement vertical.

, justify-content align-items flex-. flex- flex-, flex- , .

, , - . .

margin auto. flex- auto flex-. flex- , flex-, . , flex-.

<div class="modal">
  <div class="modal__main"></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

<div class="modal">
  <div class="modal__main"></div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.modal {
  display: flex;
}

.modal__main {
  margin: auto;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

flex-

Flexbox , flex- ( display: flex), (flex-) blockified.

, display, . , inline inline-block, block, inline-flex -> flex, inline-grid -> grid inline-table -> table.

display: block, inline, inline-block flex-. , .

.grid {
  display: flex;
}

.item {
  display: block; /* inline or inline-block */
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

.grid {
  display: flex;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

P.S. CSS/HTML, , , . .