Les recomiendo primero realizar los ejercicios de esta pagina, https://codepip.com/games/, para que despues entiendan mejor el concepto en los videos.
-
check_circle_outlineMódulo 1 | 4 clases
Introducción
expand_more -
check_circle_outlineMódulo 2 | 4 clases
Selectores
expand_more -
check_circle_outlineMódulo 3 | 5 clases
Background
expand_more -
check_circle_outlineMódulo 4 | 4 clases
Colores
expand_more -
check_circle_outlineMódulo 5 | 3 clases
Bordes
expand_more -
check_circle_outlineMódulo 6 | 5 clases
Fuentes
expand_more -
check_circle_outlineMódulo 7 | 4 clases
Posiciones
expand_more -
check_circle_outlineMódulo 8 | 3 clases
Margin & Padding
expand_more -
check_circle_outlineMódulo 9 | 6 clases
Imágenes
expand_more -
check_circle_outlineMódulo 10 | 4 clases
Animaciones
expand_more -
check_circle_outlineMódulo 11 | 7 clases
Extras
expand_more -
check_circle_outlineMódulo 12 | 7 clases
Ejercicios
expand_more -
check_circle_outlineMódulo 13 | 9 clases
Flexbox
expand_more-
done_all
Clase 1
Qué es Flexbox
-
done_all
Clase 2
Ejes en Flexbox
-
done_all
Clase 3
Flex Direction
-
done_all
Clase 4
Flex Wrap y Flex Flow
-
done_all
Clase 5
La propiedad Flex
-
done_all
Clase 6
Justify Content
-
done_all
Clase 7
Align Items
-
done_all
Clase 8
Centrado vertical y horizontal (práctica)
-
done_all
Clase 9
Align self
-
-
check_circle_outlineMódulo 14 | 11 clases
CSS Grid
expand_more
3 comentario(s)
- Siempre debe de haber una caja padre y al menos un hijo
- Siempre empieza tu código con display: flex; (se hará en la clase o selector del padre)
- Lo segundo es elegir si lo quieres en fila(de manera horizontal) o columna(de manera vertical, aunque en realidad lo que sucede es que cambia su eje principal). (se hará en la clase o selector del padre)
- Lo tercero es usar flex-wrap: wrap; que sirve para que si los hijos se salen de la caja padre, se pasen para abajo sin salirse de la caja padre, esto es de lo mas usado de flex-box(se hará en la clase o selector del padre)
- Lo cuarto es acomodar las cajas hijas dentro de la caja padre con justify-content, mira la imagen https://ibb.co/gw0DKNT
- Lo quinto es alinear todos los hijos en el eje secundario conforme a lo ancho y alto de la caja padre, como se muestra en la imagen. https://ibb.co/Gp076yH
- Lo sexto es que puedes mover las cajas de manera individual con align-self, pero se escribe en la clase del hijo y se mueven en el eje secundario.
Esto te facilitara la vida, en los siguientes capítulos pondré mas aportaciones para que les sea aún más sencillo DOMINAR flexbox, porque parece sencillo pero he visto Seniors fracasar en maquetacion y existen algunos detalles.
FLEXBOX DE MANERA SENCILLA Y QUE NO SE OLVIDE
- Siempre debe de haber una caja padre y al menos un hijo
- Siempre empieza tu código con display: flex; (se hará en la clase o selector del padre)
- Lo segundo es elegir si lo quieres en fila(de manera horizontal) o columna(de manera vertical, aunque en realidad lo que sucede es que cambia su eje principal). (se hará en la clase o selector del padre)
- Lo tercero es usar flex-wrap: wrap; que sirve para que si los hijos se salen de la caja padre, se pasen para abajo sin salirse de la caja padre, esto es de lo mas usado de flex-box(se hará en la clase o selector del padre)
- Lo cuarto es acomodar las cajas hijas dentro de la caja padre con justify-content, mira la imagen https://ibb.co/gw0DKNT
- Lo quinto es alinear todos los hijos en conjunto a lo ancho y alto de la caja padre, como se muestra en la imagen. https://ibb.co/Gp076yH
Esto te facilitara la vida, en los siguientes capítulos pondré mas aportaciones para que les sea aún más sencillo DOMINAR flexbox, porque parece sencillo pero he visto Seniors fracasar en maquetacion.