PDF de programación - Cajas flexibles o Flex Boxes

Imágen de pdf Cajas flexibles o Flex Boxes

Cajas flexibles o Flex Boxesgráfica de visualizaciones

Publicado el 4 de Octubre del 2018
834 visualizaciones desde el 4 de Octubre del 2018
93,9 KB
5 paginas
Creado hace 4a (01/02/2017)
Cajas Flexibles o Flex Boxes

Estableciendo el contenedor Flexible:
Para comenzar a trabajar con las propiedades Flexbox, primero tenemos que establecer el contenedor
Flexible o “Flex Container”, para que todos los contenidos interiores, los hijos directos se comporten
flexiblemente.

Esto lo hacemos con la propiedad display y el valor Flex. Display: flex;

para entender veamos la siguiente imagen.

En el anterior grafico podeos comprender la forma en que funciona este concepto flexbox y el
comportamiento de sus componente. Veamos:
Flex container: Contenedor principal flexible
Flex items: Son los hijos directos del flex container y automaticamente se vuelven items flexibles.
Main axis: Es el eje principal que atraviesa el elemento flex container horizontalmente y va de
izquierda a derecha en su flujo normal comenzando con start y terminando en el end main.
Cross axis: Es el eje vertical que atraviesa el elemento, el eje transversal y también consta de un start y
end, va de arriba a abajo del elemento.

Utilizamos la propiedad display, ya sea flex o inline-flex para transformar los elementos dentro del flex
container a flex ítems, utilizamos flex para aplicárselo a los elementos de nivel bloque y inline-flex a
los de nivel inline.

Controlando el flujo en en Flex Container
flex-direction
Con flex-direction, vamos a poder establecer la dirección de los flex ítems en el eje principal dentro del
flex container. Podemos cambiar su orden, colocarlos en disposición de columnas e invertirlos en
cualquier eje. Veamos:

row: Es el valor por defecto y tiene la misma orientación establecida originalmente en el main exis o
eje principal.
row-reverse: igual a row, la diferencia es que los flex ítem del start y end “comienzo y final” se
intercambian.
column: los elementos se disponen en bloques y su alineamiento es el cross axis “eje transversal” y su
orden es de start a end cross es decir, de arriba abajo.

column-reverse: igual a column, la diferencia es que los flex ítem del start y end “comienzo y final” se
intercambian.

flex-wrap
A veces cuando utilizamos las características Flexbox de CSS3 y el contenido es ejecutado en un
viewport pequeño el contenido que es flexible tratara de ajustarse y algunas veces este tendera a salirse
de su contendor principal, de su flex container.

Con flex-wrap vamos a controlar esta situación, si el contenido es mucho para mostrarse en una sola
línea, en el eje principal, esta propiedad utilizara el eje transversal para reordenar los ítems flexibles.
Veamos:

nowrap: este es el valor que se aplica por defecto, y indica que los elementos flexibles no se ajusten
wrap: Este valor es para decirle a los ítems que se organizen si es necesario, si no caben en el
contenedor flexible.
wrap-reverse: igual que el valor wrap, solo que esta vez los flex ítems se organizaran en orden
inverso.

justify-content
Esta propiedad nos va a permitir controlar la alineación de los elementos flexibles en el main axis o eje
principal.

flex-star: empujara los flex ítems al inicio del main axis o eje principal.
flex-end: empujara los flex ítems al final del main axis.
center: centrara los ítems dejando los espacios de los extremos iguales.
flex-between: distribuye los flex ítems uniformemente a lo largo del main axis teniendo en cuenta su
punto de partida, la posición start.
space-around: distribuye los ítem uniformemente, pero esta vez teniendo en cuenta los espacios y sus
el tamaño que hay en los extremos y entre cada flex ítems.

align-self
Esta propiedad junto a sus valores nos va a permitir alinear los flex ítems en el cross axis, o eje
transversal. Veamos:

flex-start: Coloca los flex ítems en el principio del eje transversal, en el start.
flex-end: Coloca los flex ítems en el final del eje transversal, en el end.
center: Coloca los flex ítems en el centro del eje transversal.
stretch: Alinea los flex ítem y les iguala su altura llevándolos desde el start hasta el and del cross axis o
eje transversal.
baseline: da alineamiento a los flex ítems teniendo como base la primera línea del texto de cada ítem.
Cabe decir que las propiedades align-items y align-self son un poco similares. La propiedad align-
items controla la alineación la alineación de los ítems en conjunto y se aplica al contenedor y la
propiedad align-self se aplica a los flex ítems individualmente. Ambos aceptan los mismos valores.

Como he dicho antes, solo hemos visto las principales propiedades de las propiedades Flexbox.

Para más información: http://dev.w3.org/csswg/css-flexbox/
  • Links de descarga
http://lwp-l.com/pdf13733

Comentarios de: Cajas flexibles o Flex Boxes (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad