Mis 3 consejos de Flexbox para mejorar su CSS

Cuando reviso CSS, a menudo me encuentro con algunos errores relacionados con Flexbox. En este artículo, quiero compartirlos para que no tengas que volver a hacerlos.

justificar-contenido vs columna-espacio

Cuando apareció Flexbox por primera vez, muchos se sintieron alentados por la propiedad justify-content, que le permite simplemente organizar los elementos de la cuadrícula de manera uniforme utilizando valores de espacio entre o alrededor. Y por supuesto, muchos empezaron a usarlo. Pero hay un problema.

Cuando usa estos valores, no cree que cambie la cardinalidad. Por ejemplo, si agrego más elementos a una cuadrícula de 4 columnas, no se colocarán al principio de la línea como se esperaba.

Quiero sugerir otra forma. Hay una propiedad de cuadrícula de columnas con la que también puede simplemente establecer el espaciado entre elementos y su cuadrícula se comportará como espera el usuario.

No hagas esto

<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%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Puedes usar esto

<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%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

justificar contenido y alinear elementos frente a margen: automático

Cuando resolvemos problemas de posicionamiento de elementos, nos gusta usar las propiedades justify-content y align-items. No discuto que se trata de una forma cómoda y sencilla de posicionamiento. Pero nuevamente, existe un problema que es especialmente común con el posicionamiento 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, , , . .