Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad para los modelos de caja.
Dividido en atributos de contenedor y atributos de artículo:
1. El atributo de contenedor
flex-direction atributo determina la dirección del eje principal (es decir, la dirección de disposición de los artículos). Puede tener 4 valores:
fila: el valor predeterminado, el eje principal es horizontal y el punto de partida está a la izquierda.
reversa de fila: el eje principal está en la dirección horizontal y el punto de partida está en el extremo derecho.
columna: El eje principal está en la dirección vertical y el punto de partida está en el borde superior.
columna inversa: el eje principal está en la dirección vertical y el punto de partida está en el borde inferior.
propiedad flex-wrap
Por defecto, los elementos se organizan en una línea (también llamada "línea de eje"). El atributo flex-wrap define cómo ajustar si una línea de eje no puede ajustarse. Puede tomar 3 valores:
nowrap: valor predeterminado, sin salto de línea.
wrap: wrap, la primera línea está en la parte superior.
wrap-reverse: wrap, la primera línea está debajo.
propiedad flex-flow propiedad
flex-flow es la forma abreviada de propiedad flex-direction y propiedad flex-wrap, el valor predeterminado es row nowrap.
Propiedad justify-content La propiedad
justify-content define la alineación del elemento en el eje principal. Puede tomar 5 valores y la alineación específica está relacionada con la dirección del eje. Lo siguiente supone que el eje principal es de izquierda a derecha.
flex-start: predeterminado, alineado a la izquierda
flex-end: alineado a la derecha
centro: centrado
espacio entre: justificado en ambos extremos, el espacio entre elementos es igual.
Espacio alrededor: el espacio en ambos lados de cada elemento es igual. Por lo tanto, el intervalo entre elementos es dos veces mayor que el intervalo entre elementos y el borde.
Atributo align-items El atributo
align-items define cómo se alinean los elementos en el eje transversal. Puede tomar 5 valores. La alineación específica está relacionada con la dirección del eje transversal, lo siguiente supone que el eje transversal es de arriba hacia abajo.
flex-start: alinea el punto inicial del eje transversal.
flex-end: alinea los puntos finales del eje transversal.
center: El punto central del eje transversal está alineado.
línea de base: la alineación de la línea de base de la primera línea de texto del proyecto.
stretch: El valor predeterminado. Si el proyecto no tiene una altura configurada o configurada como automática, ocupará la altura de todo el contenedor.
Atributo align-content El atributo
align-content define la alineación de múltiples ejes. Si el proyecto tiene un solo eje, esta propiedad no tiene ningún efecto. Este atributo puede tomar 6 valores.
flex-start: alinea con el punto de inicio del eje transversal.
flex-end: alinear con el final del eje transversal.
centro: se alinea con el punto medio del eje transversal.
Espacio entre ejes: se alinea con ambos extremos del eje transversal y el espacio entre los ejes se distribuye uniformemente.
Espacio alrededor: el espacio en ambos lados de cada eje es igual. Por tanto, el intervalo entre el eje es dos veces mayor que el intervalo entre el eje y el marco.
estirar: El valor predeterminado, el eje ocupa todo el eje transversal.
2. Propiedades del proyecto
El atributo de orden
define el orden de los artículos. Cuanto menor sea el valor, mayor será la disposición, el valor predeterminado es 0.
Atributo flex-grow El atributo
flex-grow define la relación de zoom del elemento, el valor predeterminado es 0, es decir, si queda espacio restante, no hará zoom.
Propiedad flex-shrink La propiedad
flex-shrink define la proporción de contracción del elemento, y el valor predeterminado es 1, es decir, si el espacio es insuficiente, el elemento se contraerá.
Propiedad de base
flexible La propiedad de base flexible define el tamaño principal del proyecto antes de asignar espacio adicional. El navegador calcula si hay espacio extra en el eje principal basándose en este atributo. Su valor predeterminado es auto, que es el tamaño original del proyecto.
propiedad flex La propiedad
flex es una abreviatura de flex-grow, flex-shrink y flex-base, y el valor predeterminado es 0 1 auto. Los dos últimos atributos son opcionales.
Atributo align-self El atributo
align-self permite que un solo elemento tenga una alineación diferente de otros elementos y puede anular el atributo align-items. El valor predeterminado es auto, lo que significa que el atributo align-items del elemento padre se hereda. Si no hay un elemento padre, es equivalente a stretch.