La encriptación se define como un proceso para transformar datos o caracteres en un formato
codificado. Son esenciales para preservar la seguridad de la información. Hay múltiples técnicas o
métodos de encriptación como, por ejemplo:
1. Encriptación Asimétrica (Método RSA - Rivest, Shamir y Adleman). Usa una clave
pública para el cifrado y otra privada, para el descifrado.
2. Encriptación Simétrica (Advanced Encryption Standard). Utiliza una única clave para descifrar mensajes entre el emisor y el receptor.
3. Hashing. Transforma registros de datos y caracteres de cualquier longitud en una cadena de longitud fija.
Propiedades para el padre (Contenedor Flexible)
Display: Esto define un contenedor flexible; en línea o
bloque en función del valor dado. Permite un contexto flexible para todos sus hijos directos.
.container { display: flex;
(o inline-flex) }
Flex-direction: Esto establece el eje principal, defendiendo
la dirección en que se colocan los elementos flexibles en el contenedor flexibles. Piense en los
elementos flexibles como elementos primordiales en filas horizontales o columnas verticales.
Flex-wrap: Por defecto, todos los elementos intentarán
encajar en una línea. Puede cambiar eso y permitir que los elementos se ajusten según sea necesario
con esta propiedad.
Para Flex-direction, se describen los siguientes valores:
→ row(predeterminado): de izquierda a derecha.
→ row-reverse: de derecha a izquierda.
→ column: igual que row pero de arriba abajo.
→ column-reverse: igual que row-reverse pero de abajo a
arriba.
Por otro lado, para Flex-wrap, estan los valores siguientes:
→ nowrap (predeterminado): todos los elementos flexibles
estarán en una línea
→ wrap: los elementos flexibles se desplazan de arriba
debajo de varias líneas.
→ wrap-reverse: los elementos flexibles se desplazan de
abajo hacia arriba en varias líneas.
Display
Flex-direction
Aplica de la misma manera para las columnas.
Flex-wrap
Flow: Esta es una abreviatura de propiedades de
flex-direction y flex-wrap, que juntas definen los ejes principales y transversal del contenedor. El
valor predeterminado es la row nowrap.
Justify-content: Esto define la alineación a lo largo del eje
principal. Ayuda a distribuir el espacio libre adicional que sobra cuando todos los elementos
flexibles de una línea son inflexibles o flexibles pero han alcanzado su tamaño máximo. También
ejerce cierto control sobre la alineación de los elementos cuando se desborda de la línea.
Gap: Controla el espacio entre elementos flexibles. Se aplica
ese espacio solo entre elementos que no están en los bordes exteriores.
Para justify-content, se describen los siguientes valores:
→ Flex-start: (predeterminado) los ítems se alinean hacia
la línea de inicio.
→ Center: los ítems están centrados a lo lardo de a
línea.
→ Space-between: los elementos se distribuyen
uniformemente en la línea; el primer elemento está en la línea de inicio, el último elemento en
la línea final.
→ Space-around: los elementos se distribuyen
uniformemente en la línea con el mismo espacio a su alrededor. Tenga en cuenta que visualmente
los espacios no son iguales, ya que todos los elementos tienen el mismo espacio en ambos lados.
→ Space-evenly: los elementos se distribuyen de modo que
el espaciado entre dos elementos (y el espacio en los bordes) sea igual.
Align-items: Esto define el comportamiento predeterminado de
como los elementos flexibles se distribuyen a lo largo del eje transversal de la línea actual :
Align-content: Esta propiedad alinea los renglones de un
contenedor flexible cuando hay espacio extra en el eje transversal, de manera similar a como
justify-content alinea elementos individuales. Debe de estar flexwrap: wrap. Esta propiedad no tiene
efecto cuando solo hay una línea de elementos flexibles.
Para Align-items, se describen los siguientes valores:
→ Stretch (predeterminado): estirar para llenar el
contenedor (aun respeta min – width / max-width)
→ Flex-start: los elementos se colocan en la línea de
inicio (arriba).
→ Flex-end: los elementos se colocan en la línea de
abajo.
→ Center: los elementos se centran en el eje transversal.
→ Baseline: los elementos están alineados, como la
alineación de sus líneas base.
Por otro lado, para Align-content, estan los valores siguientes:
→ Flex-start: alineado al inicio del contenedor.
→ Flex-end: alineado hasta el final del contenedor.
→ Center: en el centro del contenedor.
→ Stretch: (predeterminado) estirar líneas para ocupar el
espacio restante.
→ Space-between: líneas uniformente distribuidas. La
primera lunea esta al comienzo del contenedor mientras que la última esta al final.
Propiedades para los elementos hijos
Order: Por default, los elementos flexibles se presentan en
el orden de origen. Sin embargo, la propiedad order controla el orden en el que aparecen en el
contenedor flexible.
.item { order: número entero
} /*por default es 0*/
Flex-grow: Define la capacidad para que un item crezca si es
necesario. Acepta un valor entero que sirve como proporción. Indica que cantidad de espacio
disponible dentro del contenedor flexible debe ocupar el item. Los números negativos no son válidos.
.item { flex-grow: número
entero } /*por default es 0*/
Flex-shrink: Especifica la capacidad de un elemento para
reducir en relación con el resto de los elementos flexibles del contenedor.
.item { flex-shrink: número
entero } /*por default es 1*/
Formula para calcular unidad de crecimiento
En flex-grow: x. El número x indica cuantas unidades de crecimiento crecerá el item. Por ejemplo:
flex-grow: 3; significa que el item crecerá 3 unidades.
Para saber cuanto crecerá un elemento debemos calcular el tamaño con la formula siguiente: unidad de crecimiento = espacio
disponible / suma de flex-grow
Formula para calcular unidad de reducción
En flex-shrink: x. El numero x indica cuantas unidades de reducción reducirá al item.Por ejemplo,
flex-shrink: 3; significa que el item se reducirá 3 unidades.
La fórmula para calcular el tamaño de una unidad de reducción es la siguiente:
unidad de reducción = espacio
faltante / suma de flex-shrink
Order
Flex-grow
Flex-shrink
Flex-basis: Esto define el tamaño predeterminado de un
elemento antes de distribuir el espacio restante. Puede ser una longitud (por ejemplo, 20%, 5rem,
etc) o una palabra clave.
.container{ flex-basis:
número | auto | initial | inherit }
Flex: Es la abreviatura de flex-grow, flex-shrink y
flex-basis combinadas. El segundo y tercer parámetro (flex-shrink y flex-basis) son opcionales. El
valor predeterminado es 0 1 auto. Se recomienda utilizar la propiedad abreviada en lugar de
establecer las propiedades individuales. Abreviar establece los otros valores de manera inteligente.
Align-self: Esto permite que la alineación predeterminada (o
la especificada por align-items) se anule para los elementos flex específicos. Tenga en cuenta que
las propiedades float, clear y vertical-align no tienen efecto en un elemento flexible.
Para Flex-Basis, se describen los siguientes valores:
→ número; Una unidad de longitud, o porcentaje, que
especifica la longitud inicial de los elementos flexibles.
→ auto; Valor predeterminado. La longitud es igual a la
longitud del elemento flexible. Si el elemento no tiene una longitud especificada, la longitud
será de acuerdo con su contenido.
→ initial; Establece esta propiedad a su valor
predeterminado.
→ inherit; Heredada esta propiedad de su elemento padre.
Por otro lado, para Align-self, estan los valores siguientes:
→ Flex-start: el borde del margen de inicio cruzado del
elemento se coloca en la línea de inicio cruzado.
→ Flex-end: el borde del borde transversal del elemento
se coloca en la línea de extremo transversal.
→ Center: el elemento está centrado en el eje
transversal.
→ Baseline: los elementos están alineados, así como su
línea de base esta alineada.
→ Stretch (default): estirar para llenar el contenedor
(respetando min-width / max-width).
