Michel Ventura
FullStack JavaScript Developer
Layouts en práctica
Vamos a trabajar con
1. CSS Box Model
- Crea un div con la clase "parent" y dentro de este, anida 3 divs con la clase "child".
- Fija un padding de 1.5% a todos los elementos con universal selector y, en tu css, crea un background-color del color que quieras a cada uno utilizando el pseudo-class selector .child:nth-child()
- En el parent div fija un height de 10vh;
- Crea una regla con un border 1px solid black a cada uno de los child divs.
- Fija un width de 25% y float left a c/u de los child divs
- Crea un bloque donde el segundo div sea del mismo tamaño que la suma de los otros divs y que esten todos en una misma fila.
Normal flow vs Flex flow
2. Flexible Layout Model
Vamos a hacer lo mismo con flex
Crea la siguiente estructura
<!-- elemento parent -->
<div class="flex-container">
<!-- elementos child -->
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
<div class="flex-item">Flex Item</div>
</div>HTML
.flex-container {
display: flex;
}CSS
Utiliza flex-wrap para encapsular el contenido en un contenedor.
La propiedad flex-wrap: nowrap; es la default.
La propiedad flex-wrap: wrap; permite que los elementos se contengan dentro de un contenedor.
La propiedad flex-wrap: wrap-reverse; los pone en reversa / main axis.
Utiliza las propiedades shorthand de flex.
- flex basis: fija el valor inicial de los elementos flex
- flex-grow: determina como se van a expandir los elementos si existen espacio adicional en el contenedor
- flex-shrink: determina como se van a encojer los elementos si no hay espacion adicional en el contenedor
Layouts en práctica
By Michel Ventura
Layouts en práctica
Layouts en práctica
