Ejercicio de programación con CSS: Flexbox en diseños modernos
Código
Ejercicios CSS Flexbox y diseño. Domina el uso de Flexbox en CSS para diseño mediante ejercicios prácticos y ejemplos detallados.
Dado el siguiente código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flexbox Challenge</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
<div class="item item4">Item 4</div>
</div>
</body>
</html>
Se pide escribir el código CSS para las clases que aparecen en el html, de manera que se cumplan los siguientes requisitos:
- Utiliza la propiedad
displaypara convertir el contenedor en un contenedor flex. - Usa
flex-directionpara establecer la dirección principal. - Usa
justify-contentpara alinear los elementos a lo largo del eje principal. - Usa
align-itemspara alinear los elementos a lo largo del eje transversal. - Usa
flex-wrappara permitir que los elementos se ajusten a varias líneas. - Utiliza
flex-growpara hacer que el tercer elemento tenga el doble de tamaño que los demás.
Todos los ejercicios de programación de CSS
Evalúa tus conocimientos con ejercicios de programación en CSS de tipo Test, Puzzle, Código y Proyecto con VSCode.
Modelo de caja
Código
Flexbox en Tailwind CSS
Puzzle
Contenedores y columnas en Tailwind CSS
Código
Propiedades de posicionamiento
Puzzle
Clases de bordes de Tailwind CSS
Código
Hover, focus y estado de Tailwind CSS
Código
Metodologías de escritura CSS: BEM, SMACSS, OOCSS
Puzzle
Clases de colores y fondo de Tailwind CSS
Código
Animaciones y transiciones
Test
Introducción a CSS
Test
Selectores avanzados
Puzzle
Sintaxis básica
Test
Sintaxis
Código
Página web completa con Bootstrap
Proyecto
Estilos de fuente
Test
Sintaxis avanzada
Puzzle
Clases de tamaño de Tailwind CSS
Puzzle
Diseño responsive con media queries
Test
Instalación de Tailwind CSS
Código
Tipografía y fuentes en Tailwind CSS
Puzzle
Certificados de superación de CSS
Supera todos los retos de CSS y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
CSS
Flexbox para crear layouts y estructuras
Flexbox y Grid