Flexbox

Lic.
Camila Mielgo 2022

Basado en DG Álvaro Ghisolfo
FLEXBOX
Cuando todo debe ser flexible
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Flexbox
Algunos conceptos, para ponernos de acuerdo:
Eje secundario
Contenido
o ítem
Eje principal
Contenedor
Flexbox
Flexbox
Propiedades para
el elemento contenedor
» display
» flex-direction
» flex-wrap
» justify-content
» align-items
» align-content
Flexbox
Flexbox
Propiedades para el elemento contenedor
display
A diferencia de elementos con otras propiedades,

los contenedores flexibles expanden los elementos
para llenar el espacio libre, o los encogen
para evitar el desbordamiento.
Antes de configurar otras propiedades,

habrá que indicarle al contenedor que sea flexible.
display: flex;
Flexbox
flex-direction
Modifica la dirección y el sentido del eje principal del contenedor

(y por ende, lo mismo con el eje secundario).
El valor por defecto es row.
Flexbox
flex-direction
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flexbox
flex-direction
Flexbox
flex-direction
Flexbox
flex-direction
Flexbox
flex-wrap
Especifica el comportamiento del contenedor respecto

al desborde o no desborde de los elementos cuando
los mismos no caben en una sola línea de ítems.
El valor por defecto es nowrap.
Flexbox
flex-wrap
flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Flexbox
flex-wrap
flex-wrap: nowrap;
flex-wrap: wrap;
Flexbox
flex-wrap
flex-wrap: nowrap;
flex-wrap: wrap;
Flexbox
justify-content
Permite especificar la alineación de todo el contenido

en el eje principal. El valor por defecto es flex-start.
Flexbox
justify-content
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
Flexbox
justify-content
Flexbox
justify-content
Flexbox
justify-content
Flexbox
justify-content
Flexbox
justify-content
Flexbox
align-items
A B C
D E
Permite especificar la alineación de los ítems

de cada línea en el eje secundario.
El valor por defecto es stretch.
Flexbox
align-items
A B C
D E
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
Flexbox
align-items
A B C DE
Flexbox
align-items
A B C DE
Flexbox
align-items
A B C DE
Flexbox
align-items
A B C
D E
Flexbox
align-content
Permite especificar la alineación de todo el contenido sobre

el eje secundario (actúa sobre contenedores multilínea).
El valor por defecto es stretch.
Flexbox
align-content
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: stretch;
align-content: space-between;
align-content: space-around;
Flexbox
align-content
Flexbox
align-content
Flexbox
align-content
Flexbox
align-content
Flexbox
align-content
Flexbox
Propiedades para
los contenidos
» order
» flex-grow
» flex-shrink
» flex-basis
» align-self
Flexbox
Flexbox
Propiedades para los contenidos
order
A B C D E
0 0 0 0 0
Modifica y establece el orden de los ítems de acuerdo

a una secuencia numérica. El valor por defecto es 0
y puede cambiarse a un valor positivo o negativo.
Flexbox
order
A B C D E A C D B E
0 0 0 0 0 0 0 0 1 2
.b { order: 1; }
.e { order: 2; }
Flexbox
order
A B C D E A C D B E
0 0 0 0 0 0 0 0 1 2
A B E D C
0 2 3 29 853
Flexbox
order
A B C D E A C D B E
0 0 0 0 0 0 0 0 1 2
A B E D C E A B D C
0 2 3 29 853 -1 0 3 29 853
Flexbox
flex-grow
A B C D
0 0 0 0
Indica el factor de crecimiento de los ítems, en caso

de que no tengan un ancho específico. Este número
mantiene relación con los números definidos para
los demás ítems. El valor por defecto es 0.
Flexbox
flex-grow
A B C D
0 0 1 0
.c { flex-grow: 1; }
Flexbox
flex-grow
A B C D
0 0 1 0
Flexbox
flex-grow
A B C D
0 0 1 2
.d { flex-grow: 2; }
Flexbox
flex-grow
A B C D
0 0 1 2
.d { flex-grow: 2; }
Flexbox
flex-basis
A B C D
Define el tamaño por defecto (de base) que tendrán

los ítems antes de aplicarle la distribución de espacio.
El valor por defecto es content, que ajusta su tamaño
al contenido del ítem.
Flexbox
flex-basis
A B C D
content
.c { flex-basis: content; }
Flexbox
flex-basis
A B C D
25%
.c { flex-basis: 25%; }
Flexbox
flex-basis
A B C D
25% 25% 25% 25%
.a, .b, .c, .d { flex-basis: 25%; }
Flexbox
aligne-self
A B C
D E
Actúa exactamente igual que align-items,

aunque lo hace específicamente para cada ítem
y no de manera global para todo el contenido.
Flexbox
aligne-self
A B C DE
.contenedor { align-items: flex-end; }
Flexbox
aligne-self
A B DE
.c { align-self: flex-start; }
Flexbox
aligne-self
A B C DE
.c { align-self: flex-end; }
Flexbox
aligne-self
A B DE
.c { align-self: center; }
Flexbox
aligne-self
A B DE
.c { align-self: baseline; }
Flexbox
aligne-self
A B DE
.c { align-self: stretch; }
Flexbox
Links útiles
» Guía en CSS Tricks: https://css-tricks.com/snippets/css/a-

guide-to-flexbox
» Flexbox "Cheatsheet": https://yoksel.github.io/flex-cheatsheet
» "Playground" (en CodePen): http://codepen.io/enxaneta/pen/adLPwv
» Juego “Flexbox Froggy”: https://flexboxfroggy.com
Flexbox
Flexbox

Flexbox

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flexbox

Uploaded by

Copyright:

Available Formats

Lic.

Camila Mielgo 2022

A diferencia de elementos con otras propiedades,

Antes de conﬁgurar otras propiedades,

Modiﬁca la dirección y el sentido del eje principal del contenedor

Especiﬁca el comportamiento del contenedor respecto

Permite especiﬁcar la alineación de todo el contenido

Permite especiﬁcar la alineación de los ítems

Permite especiﬁcar la alineación de todo el contenido sobre

Modiﬁca y establece el orden de los ítems de acuerdo

Indica el factor de crecimiento de los ítems, en caso

Deﬁne el tamaño por defecto (de base) que tendrán

.a, .b, .c, .d { flex-basis: 25%; }

Actúa exactamente igual que align-items,

» Guía en CSS Tricks: https://css-tricks.com/snippets/css/a-

» Flexbox "Cheatsheet": https://yoksel.github.io/ﬂex-cheatsheet

» "Playground" (en CodePen): http://codepen.io/enxaneta/pen/adLPwv

» Juego “Flexbox Froggy”: https://ﬂexboxfroggy.com

You might also like