Posicionamiento de bloques con display CSS

Por defecto el navegador muestra las cajas con “display: block;” En ese caso, todas las cajas ocupan el 100 % del ancho disponible sin importar si el contenido tiene o no espacio.

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Display block, inline, inline-block</title>    <style>        .block-element {            background-color: green;            margin: 10px;            height: 20px;        }        .nav {            background-color: black;            padding: 20px;            list-style: none;            text-align: center;        }        .nav li {            /* fusión de inline y block. Lo mejor de los dos*/            display: inline-block;            font-size: 20px;            margin: 10px 0;            padding-left: 20px;            padding-right: 20px;        }    </style></head><body>    <div class="block-element">Esta es una etiqueta div</div>    <p class="block-element">Esta es una etiqueta de párrafo</p>    <div class="block-element">        <p class="parrafo">Soy texto</p>        <p class="parrafo">Soy texto</p>        <p class="parrafo">Soy texto</p>    </div>    <span>Soy una etiqueta span</span>    <span>Soy una etiqueta span</span>    <nav>        <ul>            <li>Incio</li>            <li>acerca de</li>            <li>blog</li>            <li>Contacto</li>        </ul>    </nav></body></html>

En el ejemplo, se logra apreciar que los elementos de párrafo de la clase “block-element”, independientemente del tamaño que tengan ocupan el 100% del ancho y fuerza a que los elementos se coloquen uno debajo del otro.

Con la etiqueta “span”, ocurre algo diferente. Esta por defecto se coloca como: “inline-block” lo que significa que una se coloca al lado de la otra si tiene espacio de ancho disponible. También se pueden ubicar al lado de un “span” cualquier otro elemento.

Lo que no permite la etiqueta “span” es colocar un margin y padding en el top y en el bottom, sin embargo, si permite colocar estas propiedades en left y right. Tampoco se puede colocar un width y un height, no puede crecer porque es de forma lineal.

Nota: En los elementos inline, no se le puede aplicar padding y margin en la parte de arriba y debajo del elemento.

Display Flex

Por defecto los bloques en CSS son “display:block”, por lo tanto, cuando tenemos varios <div></div>, estos se colocan uno debajo de otro.

Entonces cuando deseamos diseñar un layout, necesitamos que estos bloques se acomoden de una manera “flexible” y responsive para proporcionar una excelente experiencia de uso. Esto lo logramos con Display Flex.

El principal de los requisitos para aplicar “display:flex” es que debemos tener un contenedor padre al cual se le aplica la propiedad, con este, todos los bloques hijos tomarán las propiedades para acomodar el layout.

Ejemplo

<!DOCTYPE html><html lang="es"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Display flex</title>    <style>        *{            box-sizing: border-box;            margin: 0;            padding: 0;        }        html{            font-size: 62.5%;        }        body{            font-size: 1.6rem;        }        .container {            border: 0.3rem solid black;            display:flex;            flex-wrap:wrap;            justify-content: center;        }        .box{            width: 10rem;            height: 10rem;        }        .box1 {            background-color: coral;        }        .box2 {            background-color: blueviolet;        }        .box3 {            background-color: greenyellow;        }        .box4 {            background-color: whitesmoke;        }        .box5 {            background-color: orange;        }        .box6 {            background-color: red;        }    </style></head><body>    <main class="container">        <div class="box1 box">            <p>box1</p>        </div>        <div class="box2 box">            <p>box2</p>        </div>        <div class="box3 box">            <p>box3</p>        </div>        <div class="box4 box">            <p>box4</p>        </div>        <div class="box5 box">            <p>box5</p>        </div>        <div class="box6 box">            <p>box6</p>        </div>    </main></body></html>

Al utilizar .container {display:flex}, le indicamos al contenedor que todos los bloques hijos se ubiquen uno delante de otro. Por defecto, “display:flex” se coloca bajo la propiedad “flex-direction: row;”.

La diferencia entre “flex” e “inline-block”, es que con flex, los bloques hijos a parte de colocarse uno delante de otro, se ajustan a las dimensiones que tenga la pantalla.

Haciendo uso de la propiedad “flex-wrap: wrap;” logramos que, los bloques se acomoden de forma automática dependiendo el tamaño de pantalla donde estén siendo visualizados.

Es decir, cuando ya los bloques no tienen espacio al lado derecho, estos comienzan a ubicarse en una línea por debajo, como si fuera una cuadrícula.

Haciendo uso de la propiedad “justify-content: center;” le indicamos al contenedor que centre los bloques hijos. Esto nos ayuda a evitar el uso de “margin: 0 auto;” y podemos centrar los elementos de una manera más sencilla y responsive.

Justify-content: space-evenly; permite que se genere un espaciado entre bloques con dimensiones que permita la pantalla y que esta separación entre bloques tenga unas proporciones iguales entre todos.

Juego para practicar con flexbox