Está en la página 1de 2

Proyecto: Lista de Quehaceres, Flexbox

Archivos
- ToDoApp.html
- ToDoApp.css

Sigue las instrucciones paso a paso para arreglar la aplicación web de tareas pendientes. Todo el HTML y la may-
or parte del CSS están intactos, sin embargo, faltan algunos valores de Flexbox. Revisa la lección de Flexbox para
casos de consulta.

Tareas
- Comienza convirtiendo algunos de los elementos en contenedores flexibles e inline-flex. Convierte los elemen-
tos con la clase .container y los elementos con la clase .square en contenedores flexibles. Convierte los elemen-
tos de la clase .week y los elementos de la clase .reminders en contenedores flexibles en línea. Para hacer esto,
agrega la propiedad display con un valor de flex o inline-flex.

- Los elementos dentro de los nuevos contenedores inline-flex deberían crecer para llenar el contenedor. Esto se
logra usando la propiedad flex-grow: Los elementos de la clase .week obtendrán una propiedad flex-grow con
un valor de 3 y los elementos de la clase .reminders obtendrán una propiedad flex-grow con un valor de 2.

- Queremos que los elementos con la clase .week se ordenen verticalmente, en lugar de horizontalmente. Dentro
del conjunto de reglas .week, agregue una propiedad flex-direction con el valor que ordena los elementos en una
columna.

- Los elementos con la clase .row deben moverse a la siguiente línea cuando el contenedor se vuelve demasiado
pequeño. Dentro del conjunto de reglas .row, agregue una propiedad flex-wrap con el valor que mueve los ele-
mentos a la siguiente fila, mientras mantiene su orden intacto.

- Los elementos con la clase .row también necesitan algo de espacio. Dentro del conjunto de reglas .row, agregue
una propiedad justify-content con el valor que agrega espacio alrededor de cada elemento. Además, los elemen-
tos con la clase .square deben estar centrados: Dentro del conjunto de reglas .square, agregue una propiedad
justify-content con el valor que centra los elementos en el contenedor.

- Por último, los elementos con la clase .row y los elementos con la clase .square deben alinearse verticalmente:
Dentro de los conjuntos de reglas para .row y .square, agregue la propiedad align-items con el valor que centra
los elementos dentro del contenedor.

También podría gustarte