Flexbox

cátedra DGPC
FADU
OCAMPO UBA
Flexbox

Algunos conceptos básicos para comenzar:

eje secundario

contenido
o ítem

eje principal

contenedor
Flexbox

PROPIEDADES PARA
EL ELEMENTO CONTENEDOR

• display
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-content
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 indicar al contenedor que sea flexible.

display: flex;
Flexbox

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flexbox

Propiedades para el elemento contenedor

flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flexbox

Propiedades para el elemento contenedor

flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flexbox

Propiedades para el elemento contenedor

flex-direction

flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
Flexbox

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Flexbox

Propiedades para el elemento contenedor

flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Flexbox

Propiedades para el elemento contenedor

flex-wrap

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
Flexbox

Propiedades para el elemento contenedor

justify-content

Permite especificar la alineación de todo el contenido

el eje principal. El valor por defecto es flex-start.
Flexbox

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

align-items

A
D E
B C

Permite especificar la alineación de los ítems

de cada línea el eje secundario.
El valor por defecto es stretch.
Flexbox

Propiedades para el elemento contenedor

align-items

A
D E
B C

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
Flexbox

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

align-items

A
D E
B C

align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
align-items: stretch;
Flexbox

Propiedades para el elemento contenedor

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 st .
Flexbox

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

Propiedades para el elemento contenedor

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

PROPIEDADES PARA
LOS CONTENIDOS

• order
• flex-grow
• flex-shrink
• flex-basis
• align-self
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

Propiedades para los contenidos

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

Propiedades para los contenidos

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

Propiedades para los contenidos

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 2 29 853
Flexbox

Propiedades para los contenidos

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

Propiedades para los contenidos

flex-grow

A B C D
0 0 1 0

.c { flex-grow: 1; }
Flexbox

Propiedades para los contenidos

flex-grow

A B C D
0 0 1 0

.c { flex-grow: 1; }
Flexbox

Propiedades para los contenidos

flex-grow

A B C D
0 0 1 2

.c { flex-grow: 1; }
.d { flex-grow: 2; }
Flexbox

Propiedades para los contenidos

flex-grow

A B C D
0 0 1 2

.c { flex-grow: 1; }
.d { flex-grow: 2; }
Flexbox

Propiedades para los contenidos

flex-shrink

Al contrario que flex-grow, indica el factor

de decrecimiento de los ítems.
El valor por defecto es 1.
Flexbox

Propiedades para los contenidos

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

Propiedades para los contenidos

flex-basis

A B C D
content

.c { flex-basis: content; }
Flexbox

Propiedades para los contenidos

flex-basis

A B C D
25%

.c { flex-basis: 25%; }
Flexbox

Propiedades para los contenidos

flex-basis

A B C D
25% 25% 25% 25%

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

Flexbox

Propiedades para los contenidos

align-self

D E
A B C

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

Propiedades para los contenidos

align-self

A B C D E
.contenedor { align-items: flex-end; }
Flexbox

Propiedades para los contenidos

align-self

A B D E
.contenedor { align-items: flex-end; }

.c { align-self: flex-start; }
Flexbox

Propiedades para los contenidos

align-self

A B C D E
.contenedor { align-items: flex-end; }

.c { align-self: flex-end; }
Flexbox

Propiedades para los contenidos

align-self

A B D E
.contenedor { align-items: flex-end; }

.c { align-self: center; }
Flexbox

Propiedades para los contenidos

align-self

A B D E
.contenedor { align-items: flex-end; }

.c { align-self: baseline; }
Flexbox

Propiedades para los contenidos

align-self

A B D E
.contenedor { align-items: flex-end; }

.c { align-self: stretch; }
cátedra DGPC
FADU
OCAMPO UBA