Diseño flexible en Vue
Flex es la abreviatura de Flexible Box y se utiliza para maximizar la flexibilidad del modelo de caja.
display: flex;
display: inline-flex;
Tenga en cuenta que cuando los elementos secundarios se configuran en diseño Flex, su flotación, claridad y vertical. La propiedad -align se desactivará.
Los elementos que utilizan el diseño Flex se denominan contenedores Flex, o "contenedores" para abreviar. Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor y se denominan elementos Flex, o "elementos" para abreviar.
Por defecto, un contenedor tiene dos ejes: un eje principal horizontal y un eje horizontal vertical. El punto inicial del eje principal (la intersección con el borde) se llama punto inicial principal, y el punto final se llama punto final principal; el punto inicial del eje horizontal se llama punto inicial horizontal y el punto final; se llama punto final horizontal.
Por defecto, los elementos se organizan a lo largo del eje principal. El espacio ocupado por un solo elemento en el eje principal se denomina dimensión principal y el espacio ocupado en el eje horizontal se denomina dimensión transversal.
Las siguientes seis propiedades se establecerán en el contenedor.
La propiedad flex-direction determina la dirección del eje principal (es decir, la dirección en la que se alinean los elementos).
Puede tener 4 valores.
De forma predeterminada, los elementos están alineados en una línea (también llamada "eje"). La propiedad flex-wrap define cómo ajustar líneas cuando el eje no es suficiente.
Puede tener tres valores.
(1) nowrap (predeterminado): sin ajuste de línea.
(2) wrap: wrap, con la primera línea en la parte superior.
(3) wrap-reverse: ajusta la primera línea a continuación.
La propiedad flex-flow es la forma abreviada de la propiedad flex-direction y la propiedad flex-wrap. El valor predeterminado es row nowrap.
La propiedad justify-content define la alineación del elemento en el lomo.
Tiene cinco 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.
El atributo align-items define la alineación de los elementos en el eje horizontal.
Puede tener 5 valores. La alineación exacta depende de la dirección del eje horizontal, que se supone que va de arriba a abajo.
El atributo align-content define la alineación de múltiples ejes. Esta propiedad no tiene efecto si el elemento tiene un solo eje.
Este atributo puede tener seis valores.
Resumen:
la justificación se utiliza para la alineación del eje principal.
Todo lo que comienza con align se alinea con el eje horizontal.
Establezca las siguientes 6 propiedades en el proyecto.
El atributo de orden define el orden en el que se alinean los elementos. Cuanto menor sea el valor, más cercana será la alineación. El valor predeterminado es 0.
La propiedad flex-grow define la relación de zoom del elemento. El valor predeterminado es 0, lo que significa que si queda espacio, no crecerá.
Si todos los elementos tienen una propiedad flex-grow de 1, dividirán el espacio restante en partes iguales (si lo hay). Si un elemento tiene una propiedad de crecimiento flexible de 2 y todos los demás elementos tienen una propiedad de crecimiento flexible de 1, entonces el primero ocupará el doble de espacio restante que los demás elementos.
La propiedad flex-shrink define la proporción en la que el elemento se reduce. El valor predeterminado es 1, lo que significa que si no hay suficiente espacio, el elemento se reducirá.
Si todos los elementos tienen una propiedad flex-shrink de 1, entonces todos los elementos se reducirán proporcionalmente cuando no haya espacio suficiente. Si un elemento tiene una propiedad de contracción flexible de 0 y todos los demás elementos tienen una propiedad de contracción flexible de 1, el primero no se reducirá cuando no haya espacio suficiente.
Los valores negativos no tienen ningún efecto sobre esta propiedad.
La propiedad flex-basis define el espacio del eje principal (tamaño principal) que ocupa el elemento antes de que se asigne el exceso de espacio. El navegador utiliza esta propiedad para calcular si hay espacio adicional en el eje principal. Su valor predeterminado es Auto, que es el tamaño original del elemento.
Esto se puede establecer en el mismo valor que las propiedades de ancho o alto (por ejemplo, 350 px) para que el elemento ocupe un espacio fijo.
La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-basis, con un valor predeterminado de 0 1 auto;
Este atributo tiene dos valores de acceso directo: auto (1 1 auto) y none (0 0 auto).
Se recomienda utilizar este atributo en lugar de escribir tres atributos separados, ya que el navegador inferirá valores relacionados.
El atributo align-self permite alinear elementos individuales de forma diferente a otros elementos, anulando el atributo align-items. El valor predeterminado es auto, lo que significa que heredará la propiedad align-items del elemento principal, o es equivalente a estirar si no hay ningún elemento principal.
Este atributo puede tener 6 valores excepto auto, los demás valores son los mismos que el atributo align-items.
A continuación, debe agregar algunos cuadros flexibles de CSS: Taoyuan Three Brothers: flex-grow, flex-shrink, flex-basis
Artículo de referencia:
/m0_46267097/article/details/ 108576784
Este artículo es un artículo de referencia. 108576784
/m0_37058714/article/details/80765562