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
Propiedad 'display'
Test
Modelo de caja
Test
Propiedades de posicionamiento
Puzzle
Sombras en texto y cajas
Test
Variables en CSS
Puzzle
Grid en diseños de cuadrícula
Test
Propiedades de texto
Código
Animaciones y transiciones
Test
Introducción a CSS
Test
Selectores avanzados
Puzzle
Flexbox en diseños modernos
Puzzle
Sintaxis básica
Test
Sintaxis
Código
Estilos de fuente
Test
Sintaxis avanzada
Puzzle
Herencia y cascada
Test
Selectores básicos
Código
Diseño responsive con media queries
Test
Pseudo-clases y pseudo-elementos
Puzzle
Elementos 'float' y 'clear'
Test
Propiedades de texto
Puzzle
Propiedades de fondo
Puzzle
Metodologías BEM, SMACSS, OOCSS
Puzzle
Selectores básicos
Test
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