Flex es la abreviatura de caja flexible, que se traduce como "diseño flexible". Se utiliza para proporcionar la máxima flexibilidad al modelo de caja. Cualquier contenedor puede designarse como diseño flexible. Solo necesita configurar "display:flex". ; los elementos en línea se pueden configurar mediante la implementación de "display:inline-flex"; debe tenerse en cuenta que si se establece el diseño flexible, los atributos flotante, claro y de alineación vertical de los elementos secundarios no serán válidos.
1. Conceptos básicos
El diseño flexible es un modelo de diseño, a menudo llamado flexbox. Después de usar el diseño flexible, proporcionará potentes capacidades de alineación y asignación de espacio para elementos secundarios.
Antes de utilizar el diseño flexible, los diseños más utilizados incluyen: diseño fluido, diseño flotante, diseño de posicionamiento, etc. La desventaja es que el elemento secundario necesita controlar su posición en el elemento principal y también prestar atención al colapso de altura del elemento principal.
La ventaja de flex es evitar formularios de diseño inflexibles, crear más modos de diseño para elegir y resolver problemas como la alineación, distribución y capacidad de respuesta de los subelementos. La desventaja es que solo puede confiar en su propio modo de diseño y no se puede cambiar si hay un ligero cambio.
Los elementos que utilizan un diseño flexible se denominan contenedores flexibles o, para abreviar, "contenedores". Todos sus elementos secundarios generan automáticamente miembros contenedores, llamados elementos flexibles (elementos flexibles), denominados "elementos";
El contenedor tiene dos ejes principales por defecto: el eje principal horizontal (eje principal) y el eje transversal vertical (eje transversal). La posición inicial del eje principal (es decir, la intersección de los bordes) se llama inicio principal, y la posición final se llama extremo principal; la posición inicial del eje transversal se llama inicio transversal y la posición final se llama extremo transversal. Los elementos se organizan a lo largo del eje principal de forma predeterminada. El espacio del eje principal ocupado por un solo elemento se denomina tamaño principal, y el espacio del eje transversal ocupado por un solo elemento se denomina tamaño transversal.
Las siguientes propiedades se proporcionan en CSS para implementar el diseño Flex:
Según los diferentes alcances, estas propiedades se pueden dividir en dos categorías: propiedades del contenedor (dirección flexible, envoltura flexible, flujo flexible, justificación del contenido, alineación de elementos, alineación del contenido) y propiedades del elemento (orden, alineación -self , flexionar, flex-crecer, flex-reducir, flex-base). Introduzcamos el uso de estos atributos.
2. Propiedades del contenedor
(1) dirección flexible : especifique la dirección de disposición de los subelementos en el cuadro flexible;
Los valores opcionales para el atributo son los siguientes:
La propiedad flex-direction determina la dirección del eje principal (es decir, la dirección de disposición de los elementos);
.box{dirección-flexible:fila|fila-inversa|columna|columna-inversa;}Este atributo tiene 4 valores.
● fila (valor predeterminado): el eje principal es horizontal y el punto inicial está en el extremo izquierdo;
●row-reverse: el eje principal es horizontal y el punto inicial está en el extremo derecho;
●columna: el eje principal es vertical y el punto inicial está en el borde superior;
●column-reverse: el eje principal es vertical y el punto inicial está en el borde inferior;
El efecto anterior se muestra en la siguiente figura:
(2) flex-wrap : especifique el método de envoltura de los subelementos en el cuadro flexible;
De forma predeterminada, los elementos se organizan en una línea (también llamada "eje"). El atributo flex-wrap define cómo ajustar la línea si no se puede organizar un eje.
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (predeterminado): sin ajuste de línea, el efecto de disposición es el siguiente:
●wrap: envoltura, la primera línea está en la parte superior, el efecto de disposición es el siguiente:
●wrap-reverse: ajuste, la primera línea está en la parte inferior, el efecto de disposición es el siguiente:
(3) flujo flexible : esta propiedad actúa sobre el contenedor de caja flexible y se utiliza para controlar la dirección de disposición y el ajuste de líneas de los elementos en el contenedor. Esta propiedad es una propiedad compuesta que consta de dirección flexible y envoltura flexible;
.box{flex-flow:<flex-direction><flex-wrap>;}(4) justify-content : este atributo actúa sobre los subelementos en el contenedor de caja flexible y se utiliza para controlar la distribución de los subelementos en la dirección de disposición;
La propiedad justify-content define la alineación del elemento en el eje principal
.box{justify-content:flex-start|flex-end|center|espacio-entre|espacio-alrededor;}Este atributo tiene 5 valores:
● inicio flexible (valor predeterminado): alineado a la izquierda;
● extremo flexible: alineado a la derecha;
●centro: centrado;
●espacio entre: alinea ambos extremos y los intervalos entre elementos son iguales;
●espacio alrededor: el espacio en ambos lados de cada elemento es igual, por lo que el espacio entre elementos es dos veces mayor que el espacio entre el elemento y el borde;
El efecto anterior se muestra en la siguiente figura:
(5) align-items : este atributo actúa en el contenedor de la caja flexible y se utiliza para controlar la alineación de todos los subelementos en la caja flexible en la dirección vertical de la dirección de disposición;
La propiedad align-item define cómo se alinean los elementos en el eje transversal
.box{align-items:flex-start|flex-end|centro|línea de base|estiramiento;}Este atributo tiene 5 valores. La alineación específica está relacionada con la dirección del eje transversal. Se supone que el eje transversal es de arriba a abajo:
●flex-start: alinea el punto inicial del eje transversal;
●flex-end: alinea el punto medio del eje transversal;
●centro: alinea el punto medio del eje transversal;
●línea de base: la alineación de referencia de la primera línea de texto del elemento;
●estirar (valor predeterminado): si el elemento no establece una altura o está configurado en automático, ocupará toda la altura del contenedor;
El efecto anterior se muestra en la siguiente figura:
3. Propiedades del proyecto
(1) atributo de orden
El atributo de orden se utiliza para establecer el orden en que aparecen los elementos en el contenedor. Puede definir la posición del elemento en el contenedor a través de valores específicos. El formato de sintaxis del atributo es el siguiente:
número de orden;
Donde número es la posición del artículo en el contenedor y el valor predeterminado es 0.
Ejemplo:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; borde:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child(2){order:1;}.flexdiv:nth-child(3){order:2;} .flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order:4;</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Resultados de ejecución:
(2) atributo de alineación propia
El atributo align-s elf le permite establecer una alineación diferente para un elemento que para otros elementos. Este atributo puede anular el valor del atributo align-items. Los valores opcionales para el atributo align-self son los siguientes:
Ejemplo:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;altura:60px;border:1pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</ div><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Resultados de ejecución:
(3) atributo flexible
El atributo flex es la abreviatura de los tres atributos flex-grow, flex-shrink y flex-basis. El formato de sintaxis es el siguiente:
flex: flex-growflex-shrinkflex-basis;
La descripción del parámetro es la siguiente:
● flex-grow: (parámetro obligatorio) un número utilizado para establecer la cantidad de crecimiento del artículo en relación con otros artículos, el valor predeterminado es 0;
●flex-shrink: (parámetro opcional) un número utilizado para establecer la reducción de un elemento en relación con otros elementos. El valor predeterminado es 1;
●flex-basis: (parámetro opcional) La longitud del elemento, los valores legales son auto (valor predeterminado, que indica automático), heredar (que indica heredar el valor de este atributo del elemento principal) o agregar %, px, em , etc. a un valor específico La forma de la unidad.
Además, el atributo flex tiene dos valores de acceso directo, a saber, auto (1 1 auto) y none (0 0 auto).
El código de muestra es el siguiente:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.flexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div ><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div></body>< /html>Resultados de ejecución:
