GUÍA

FLEXBOX
 ¿Qué es Flexbox?
Es un módulo de CSS creado específicamente
para diseñar layouts de manera más fácil, este
modulo trabaja de manera unidimensional es
decir trabaja con un eje principal. Se le llama
Flexbox gracias a que los elementos dentro de
este se vuelven flexibles y podemos controlar su
comportamiento a voluntad, como su crecimiento,
alinearlos o distribuir el espacio disponible, esto
nos ayuda a crear layouts rápidamente y
adaptarlos a dispositivos móviles.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
Utilizando Flexbox
Para empezar a utilizar Flexbox, necesitamos que
tener un elemento contenedor, al cual
definiremos con los superpoderes de Flexbox, a
este contenedor se le conoce como un flex-
container y a los hijos directos del contenedor
como flex-items.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
 Comportamiento
Flexbox
Al momento de declarar Flexbox nos damos
cuenta de que sus hijos directos sufren cambios:

Se ponen un elemento a lado del otro. (En fila)

Los elementos comienzan desde el borde inicial del

contenedor

Si no hay espacio suficiente se encogen, pero sino sólo

ocupan su ancho por defecto o declarado.

Si los elementos no tienen un alto definido ocupan todo el

alto

Si no hay un ancho declarado, el ancho es definido por el

contenido

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
 Flex-direction
Cuando hablamos de Flexbox, tenemos que tener
en cuenta los ejes, manejamos 2 ejes, el eje
principal [main-axis] & eje secundario [cross-axis].
El eje principal es definido por flex-direction por
defecto es row. El eje secundario es perpendicular
a este.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 Flex-wrap
Define el comportamiento de los flex-items,
cuando su tamaño sumado rebasa el tamaño del
main-axis del flex-container.
Si bien Flexbox es un modelo unidimensional,
podemos crear nuevas filas o columnas con flex-
wrap. La creación de nuevas lineas en columnas o
filas, dependerá de la dirección (Flex-direction) de
nuestro flex-container.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 Alineamiento
En Flexbox podemos repartir el espacio disponible
entre los flex-items, ya sea en el main-axis o el
cross-axis. Para que las alineaciones en flexbox se
apliquen, deberá haber espacio disponible en el
eje donde se apliquen, de otro modo no se
pueden usar.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
 justify-content
Esta propiedad sirve para el main-axis o el eje
principal, y nos ayuda en caso de que haya
espacio disponible en el flex-container. Con esto
podemos alinear a los elementos a través del eje
principal.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 align-items
Esta propiedad sirve para el cross-axis o el eje
secundario, y nos ayuda en caso de que haya
espacio disponible en el cross-axis. Con esto
podemos alinear a los elementos a través del eje
secundario.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
 align-items
Esta propiedad sirve para el cross-axis o el eje
secundario, y nos ayuda en caso de que haya
espacio disponible en el cross-axis. Con esto
podemos alinear a los elementos a través del eje
secundario.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 align-content
Esta propiedad sirve para el cross-axis, pero sólo
funciona cuando hay más de una fila o columna,
cuando el flex-wrap tiene un valor wrap y ya se
creo una nueva línea. Hace exactamente lo mismo
que justify-content, pero en el cross-axis. Si no se
tiene más de una línea esta propiedad no se
aplicará.

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 flex-items
Todas las propiedades que vimos anteriormente
son propiedades para el flex-container, a
continuación las propieades que veremos son
para los flex-items. (Serán declaradas en estos)

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
 flex-items
Todas las propiedades que vimos anteriormente
son propiedades para el flex-container, a
continuación las propieades que veremos son
para los flex-items. (Serán declaradas en estos)

DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇

https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
DOMINA CSS DESDE CERO (Por el precio de una PIZZA ) 🍕👇
https://alexcgdesign.com/cursocss/

@alexcgdesign
 ¿Quieres dominar
CSS?
¿Quieres aprender CSS desde CERO HASTA UN
NIVEL AVANZADO? ¡En hora buena! Tengo un
curso para llevar tus habilidades de CSS al
siguiente nivel. (+25 horas de contenido) ¿Y sabes
que es lo mejor? Puedes entrar al curso por lo
que vale una pizza 🍕

Una vez que lo adquieras mándame mensaje por

Twitter y te daré 2 cursos gratis. 🎁