5. Flexbox
Mostrar los elementos en el lugar que queremos
Flexbox es la solución más moderna para el
posicionamiento
Diseños de contenedores flexibles y responsivos.
9. Lab_03 CSS Flexbox & Box Model
Directorio: lab_03_nombre_apellido
Entrada: index.html
Estructura de carpetas: css, img
Comprimido: zip o rar
Asunto del mail: lab_03_nombre_apellido
10. Lab_03 CSS Flexbox & Box Model
• Crea una nueva página HTML
• Crea un div con la clase "container"
• Dentro del div "container", agrega 3 divs con la clase "box"
• Apllica CSS a la página que establezca el display como "flex" para el div
"container".
• Utiliza las propiedades de flexbox justify-content, align-items, flex-direction y
flex-wrap para controlar la disposición y el alineamiento de los divs "box".
• Agrega estilos CSS adicionales para establecer el ancho, alto, margen, borde y
relleno para cada uno de los divs "box".
• Experimenta con diferentes valores para el ancho, alto, margen, borde y relleno
para ver cómo afectan el tamaño y la apariencia de los divs "box".
• Agrega la propiedad box-sizing: border-box a los estilos CSS para que el ancho
y alto incluyan tanto el contenido como el borde y el relleno.
• Crea un párrafo explicando que comprendiste sobre flexbox y box model
11. Lab_04 refactoring
• Modificar codigos de la clase 09
• Refactorizar
• DRY: evitar las repeticiones modificando las clases en
html y en css