Scribd
Cargar
4 vistas

2.3.1_flexbox__b10c_

Flexbox es un modelo de diseño unidimensional en CSS que permite organizar elementos en filas o columnas. Para utilizarlo, se debe establecer una relación entre un contenedor flexible y sus elementos secundarios, aplicando propiedades como flex-direction, flex-wrap y justify-content. Este método facilita la creación de diseños responsivos y adaptables en páginas web.

Cargado por

lalbertocortega
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
4 vistas

2.3.1_flexbox__b10c_

Flexbox es un modelo de diseño unidimensional en CSS que permite organizar elementos en filas o columnas. Para utilizarlo, se debe establecer una relación entre un contenedor flexible y sus elementos secundarios, aplicando propiedades como flex-direction, flex-wrap y justify-content. Este método facilita la creación de diseños responsivos y adaptables en páginas web.

Cargado por

lalbertocortega
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 20

Introducción a Flexbox

Contexto Histórico

Block, for sections in a webpage


Inline, for text
Table, for two-dimensional table data
Positioned, for explicit position of an element
Contexto Histórico
¿Qué es Flexbox?

Flexbox CSS es un modelo/método de


diseño unidimensional utilizado para
diseñar elementos (elementos HTML)
de forma de fila o columna
(horizontal o vertical).
FLEX CONTAINER & FLEX ITEMS

Para que Flexbox


funcione, debe
configurar la relación
Padre-Hijo. El padre es el
contenedor flexible, y
todo lo que hay dentro
de él son los elementos
secundarios o flexibles.
EJES FLEXBOX

Recuerden en la clase de
matemáticas, nos
enseñaron eje x e y.
Bueno, aquí no hacemos
eso. Porque el eje
principal puede ser
horizontal o vertical.
¿Qué es Flexbox?

Flexible Boxes

En cada eje, hay un inicio


y un final. Si está en el
eje principal, la posición
inicial se denomina inicio
principal y si la posición
final se denomina
extremo principal.
Propiedad flex-direction
DISPLAY / MONITOR

Para iniciar esta fiesta


flexbox, primero
necesitamos crear nuestro
contenedor flexible. Esto
se hace aplicando flex a la
propiedad de visualización
en el elemento primario.
¡Bam! Ahora todos sus
hijos inmediatos se
convertirán en artículos
flexibles
Contenedor padre
Elementos hijos
FLEXBOX CHEATSHEET (HOJA DE TRUCOS)
Propiedad flex-wrap

Esta propiedad es lo que


permitirá que los
elementos flexibles del
contenedor ocupen más
de una línea.
Space-around vs space-evenly
Order
Propiedad align-items
Propiedad justify-content
Propiedad flex-grow
Propiedad flex-shrink

Opuesta a flex-grow.

Mientras que la anterior indica un factor de crecimiento, flex-shrink


aplica un factor de decrecimiento.

Los ítems que tengan un valor numérico más grande, serán más
pequeños, mientras que los que tengan un valor numérico más
pequeño serán más grandes.
Actividad: Mi portafolio
personal con Flexbox

También podría gustarte