FlexBox

layout
FlexBox
Flexbox layout es un módulo que nos permite organizar de
manera fácil y eficiente los elementos de nuestra web.
Terminología Básica

Flex container Flex items

o o
elemento padre elementos hijos
Propiedades del elemento padre

Nos permitirá habilitar flex en nuestro diseño, display podría

tener otro valor.
Propiedades del elemento padre
Nos permitirá definir la dirección de los items.
Propiedades del elemento padre
Por defecto todos los items se acomodan en una línea,
podríamos definir otras maneras de organizarlos.
Propiedades del elemento padre
Definimos en qué posición se
acomodan los items de manera
horizontal, al inicio, al final,
centrado, etc.
Propiedades del elemento padre
Definimos en qué posición se
acomodan los items de manera
vertical, al inicio, al final,
centrado, etc.
justify-content align-items
Propiedades de los elementos hijos
Por defecto sigue el orden que se define en el html.
Propiedades de los elementos hijos
Anula align-items del padre y permite definir individualmente a
cada item.
Actividad I

Jugar y experimentar con todas las propiedades de flexbox

posible.