Guia Flexbox Desde Cero

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.

@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

@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.

@alexcgdesign
@alexcgdesign
@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.

@alexcgdesign
@alexcgdesign
@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.

@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.

@alexcgdesign
@alexcgdesign
@alexcgdesign
@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
secundario.

@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
secundario.

@alexcgdesign
@alexcgdesign
@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á.

@alexcgdesign
@alexcgdesign
@alexcgdesign
@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)

@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)

@alexcgdesign
@alexcgdesign
@alexcgdesign
@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. 🎁

Guia Flexbox Desde Cero

Cargado por

Copyright:

Formatos disponibles

Guia Flexbox Desde Cero

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guia Flexbox Desde Cero

Cargado por

Copyright:

Formatos disponibles

GUÍA

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

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

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

Los elementos comienzan desde el borde inicial del

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

Si los elementos no tienen un alto definido ocupan todo el

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

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

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

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

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

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

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

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

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

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

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

Una vez que lo adquieras mándame mensaje por

También podría gustarte

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.