Aprendiendo sobre CSS - DISTINTAS FORMAS DE MOSTRAR DISPLAY

En CSS, la propiedad display se utiliza para especificar el tipo de caja de un elemento. Aquí hay algunas de las formas más comunes de utilizar la propiedad display junto con una breve descripción de cada una:

1. display: block;

   • Descripción: Hace que el elemento sea un bloque, ocupando todo el ancho disponible y comenzando en una nueva línea.
   • Ejemplo:

     
     div {
       display: block;
     }
     

2. display: inline;

   • Descripción: Hace que el elemento sea en línea, ocupando solo el ancho necesario y permitiendo que otros elementos estén en la misma línea.
   • Ejemplo:

     
     span {
       display: inline;
     }
     

3. display: inline-block;

   • Descripción: Combina las propiedades de inline y block. El elemento es en línea, pero también permite establecer un ancho y alto.
   • Ejemplo:

     
     img {
       display: inline-block;
     }
     

4. display: flex;

   • Descripción: Crea un contenedor de diseño flexible, permitiendo un fácil manejo de disposición y alineación de elementos secundarios.
   • Ejemplo:

     
     .container {
       display: flex;
     }
     

5. display: grid;

   • Descripción: Crea un contenedor de diseño de cuadrícula, permitiendo un control más avanzado sobre la disposición de elementos secundarios en filas y columnas.
   • Ejemplo:

     
     .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
     }
     

6. display: none;

   • Descripción: Oculta completamente el elemento y sus descendientes. El espacio que ocuparía se elimina.
   • Ejemplo:

     
     .hidden {
       display: none;
     }
     

7. display: table;, display: table-row;, display: table-cell;

   • Descripción: Crea un diseño similar a una tabla utilizando elementos div.
   • Ejemplo:

     
     .table {
       display: table;
     }
     
     .table-row {
       display: table-row;
     }
     
     .table-cell {
       display: table-cell;
     }
     

8. display: inline-flex;

   • Descripción: Similar a display: flex;, pero el contenedor es en línea.
   • Ejemplo:

     
     .inline-flex-container {
       display: inline-flex;
     }
     

Estas son solo algunas de las opciones disponibles con la propiedad display. La elección de la propiedad depende de los requisitos de diseño específicos y del comportamiento deseado para los elementos en la página web.