'10-'1-

. {ng ERSlDAl] DE Chm-ll JAR;

Centro Universitario de Cieneias Exaetas e Ingenierias

Ingenieria en Computaein
Programaein para internet, Torres Villanueva Nancy
Michelle , D06
Hernandez Avia Kenia Guadalupe Estefania,
214520007
 gQu es?

Es un modo de diseo que permite colocar Ios elementos de una pagina para que se comporten de forma
predecible cuando el diseo de la pagina debe acomodarse a diferentes tamaos de pantalla y diferentes
dispositivos. La idea principal detras del diseo de ex es dar a| contenedor Ia capacidad de alterar el ancho
/ altura (y orden) de sus articulos para Ilenar mejor el espacio disponible (sobre todo para acomodar a todo
tipo de dispositivos de visualizacin y tamaos de pantalla).

Si Ia disposicin regular se basa en direcciones de ujo tanto en bloque como en linea, el diseo de la
exin se basa en "direcciones de ujo exible".
 main size
| I
- - GI'DEE EIEH'I
II}
.E
m -- mam axis
m I I

m
D
:3
. eriem eriem
_ - - crass and
. ex cuntamer .

crass axis
I I

main main
and
a
:1
m
Basicamente, |os articulos seran dispuestas ya sea despus de la main axis(de main-start main-end) 0 el eje transversal
(de cross-start cross-end).

main axis - E| eje principal de un contenedor exible es el eje primario a lo largo del cual se disponen |os elementos
exibles. Cuidado, no es necesariamente horizontal; depende de la ex-direction propiedad (ver abajo).
main-start | main-end - Los elementos exibles se colocan dentro del contenedor a partir de main-start y van a| main-end.
main size - E| ancho o la altura del elemento exible, cualquiera que est en la dimension principal, es el tamano principal
del articulo. La propiedad de tamano principal del elemento ex es la propiedad 'width' 0 'height', cualquiera que sea Ia
dimension principal.
cross axis - El eje perpendicular a| eje principal se denomina eje transversal. Su direccion depende de la direccion del eje
principal.
cross-start | cross-end - Las lineas Flex se Ilenan con elementos y se colocan en el contenedor comenzando en el lado de
inicio cruzado del contenedor exible y dirigindose hacia el lado del extremo transversal.
cross size - La anchura o altura de un elemento exible, cualquiera que est en la dimension transversal, es el tamano
cruzado del articulo. La propiedad de tamano cruzado es cualquiera de "anchura" o "altura" que esta en la dimension
transversal.
 Properties for the Parent (ex container)
# display
Esto dene un contenedor exible; inline 0 block dependiendo del valor dado. Permite un contexto exible para todos sus
hijos directos.

# exdirection

Esto establece el eje principal, deniendo asi Ios elementos exibles de direccion que se colocan en el contenedor
exible. Flexbox es (aparte de la envoltura opcional) un concepto de disposicion de una sola direccion. Piense en Ios
elementos de exion como que se extienden principalmente en las horizontales o columnas verticales.

.7. .7. 5151

 row(por defecto): de izquierda a derecha |tr; de derecha a izquierda en rt|
row-reverse: de derecha a izquierda en |tr; de izquierda a derecha rt|
column: igual que row pero de arriba a abajo
column-reverse: igual que row-reverse pero de abajo a arriba

- ex-ow (Se aplica a: elemento de contenedor exible padre). Esta es una

abreviatura ex-directiony ex-wrap propiedades que, en conjunto, denen
|os ejes principal y transversal del contenedor ex. El valor predeterminado
es row nowrap.
justify-content
flexstart
Esto dene Ia alineacion a lo largo del eje principal. Ayuda a distribuir el espacio libre
adicional sobrante cuando cualquiera de |os elementos exibles de una linea son
inexibles, 0 son exibles pero han alcanzado su tamano maximo.Tambin ejerce
flexend
cierto control sobre la alineacion de elementos cuando desbordan Ia linea.

C enter

5 acebetween

s acearound
ex-start(predeterminado): |os elementos se empaquetan hacia Ia linea de inicio
ex-end: |os articulos se empaquetan hacia Ia linea nal
s ace-evenl
center: |os elementos estan centrados a lo largo de la linea
space-between: |os elementos estan uniformemente distribuidos en la
linea; primer elemento esta en la linea de inicio, ultimo elemento en la linea de
fondo
space-around: |os elementos estan uniformemente distribuidos en la linea con el
mismo espacio alrededor de ellos.
space-evenly: |os elementos se distribuyen de manera que el espaciado entre dos
elementos (y el espacio en |os bordes) sea igual.
al'gn'ltems Esto dene el comportamiento predeterminado de como |os elementos exibles se
distribuyen a lo largo del eje transversal en la linea actual. Piense en ello como la justify-

II
content version para el eje transversal (perpendicular a| eje principal).

center
ex-start: el borcle de margen de inicio cruzado de |os elementos se coloca en la linea
de inicio cruzado
- ex-end: borcle de margen de |os elementos se coloca en la linea de cruce
center: |os elementos estan centrados en el eje transversal
baseline baseline: |os elementos estan alineados, de modo que sus lineas de base se alineen
stretch (por defecto): estira para Ilenar el contenedor (sigue respetando el ancho
minimo / el ancho maximo)
align-content Esto alinea las lineas de un contenedor exible dentro de cuando hay espacio extra en el eje
transversal, similar a comojustify-content alinea elementos individuales dentro del eje
principal.

S ace-between s ace-around

ex-start: lineas empacadas a| inicio del contenedor

ex-end: lineas empacadas al nal del contenedor
center: lineas empacadas en el centro del contenedor
space-between: lineas uniformemente distribuidas; la primera linea esta en el comienzo
del contenedor mientras que la ultima esta al nal
space-around: lineas uniformemente distribuidas con igual espacio alrededor de cada
linea

stretch (por defecto): las lineas se extienden para ocupar el espacio restante