Resumen de la Flex
modelo de caja elástica (flexión), por lo general usado para implementar el diseño de página, de uso supuesto flex es muy flexible, además de una pluralidad de bloques de cassette dispuesto horizontalmente, que también se puede utilizar líneas de flexión para una pluralidad de casetes de la misma fila en la horizontal y vertical la dirección de disposición del efecto, tales como una pluralidad de etiquetas span línea, queremos su alineación horizontal, puede mostrar atributo se añadió flex, entonces justificar-valor de contenido del espacio-entre, se puede realizar, incluyendo la dirección horizontal, queremos diferente altura vertical de la caja está centrada, puede ser align-artículos usados o align-contenido, valor de atributo centro se puede realizar, por supuesto, otros efectos si se desea, puede adoptar diferentes atributos y valores de atributo.
Flex Set propiedad de presentación (elástico modelo de caja), primeros bloques de cassette convencional dispuesto como sigue:
Después de ajustar el flex Display valor de la propiedad, bloquear elementos dispuestos horizontalmente que puede lograrse:
Las propiedades del contenedor
1, flex-dirección para determinar la dirección de alineación de los sub-elementos (es decir, la dirección de disposición del proyecto)
Valor 1: valor predeterminado fila, la dirección horizontal del husillo, los subelementos de izquierda a derecha;
Valor 2: fila-inverso: husillo horizontal dirección, comenzando en el extremo derecho de la embarcación, a la inversa para (flex-dirección: fila-inversa ;);
valor 3: columna, la disposición transversal del eje (flex-dirección: columna;)
valor 4: columna-inversa; en la caja para que cross-eje para lograr orden inverso (Flex-dirección: Reverse-columna;)
2, línea Flex-ajuste si una envoltura predeterminado cómo nueva línea.
Cuando la anchura del elemento es mayor que la anchura total del contenedor, implicará envoltura o no, la cantidad de contenedores se convierte por defecto, todos los artículos se clasifican en una línea, define flex-wrap cómo menor que si el ajuste de línea de descarga. Tiene tres valores posibles:
(1). Nowrap (por defecto): No envuelva. Incluso si la anchura total de la caja es mayor que la anchura del contenedor no se ajusta
(2) de envoltura de: envolturas, el excedente se envolver sin apretar (Flex-wrap: wrap;)
(. 3) wrap-Reverse: avance de línea, no sólo envoltura, sino también en orden inverso desde la parte inferior hacia arriba. (Flex-wrap: wrap-inversa ;)
justificar-contenido se define en el eje de las maneras título ## alineados
justificar-contenido define el proyecto está alineado sobre el husillo. Tiene seis valores posibles:
Start-Flex (por defecto) se alinea con la posición de inicio del husillo, que está dispuesta a partir de la posición inicial del husillo (1.). (La justificar-Contenido: Start-Flex;)
(2) End-Flex: una posición alineada al extremo del husillo, de tope de este modo el extremo del eje principal, pero no afecta a la orden de los elementos. (La justificar-contenido: End-Flex;)
(. 3) Centro: centrado (justificar-contenido: centro;) centrado en la dirección del husillo
(4) Espacio entre; justificación, se observa que los extremos izquierdo y derecho de elementos se el espacio es en contra de los lados izquierdo y derecho del contenedor, el restante (dirección del eje mayor) en partes iguales entre los elementos restantes. (La justificar-contenido: Espacio-ENTRE;)
(. 5) Espacio-alrededor; dispersión alineados, para señalar que los elementos no hacen tope contra la izquierda y derecha ambos extremos de los lados izquierdo y derecho del contenedor (nota la distinción entre alineados y alineados en ambos extremos y una diferencia media ), el espacio restante en el recipiente (dirección del husillo) distribuidos uniformemente por el elemento en la dirección de su inicio y el final del husillo (nota de que la dirección del eje mayor es lados horizontal o vertical) (izquierda y derecha de los elementos y por lo tanto el contenedor en ambos lados de los elementos de borde de la única la mitad de la distancia entre). (La justificar-contenido: Espacio-ENTRE;)
(. 6) Espacio-UNIFORMEMENTE; de manera uniforme, es de asignar todo el espacio restante en promedio en todas las direcciones contenedor principal; dispersión alineado y la diferencia es, la distancia entre cada elemento y un husillo la distancia entre el inicio y el borde de extremo del elemento y los lados del contenedor son la misma dirección general. (Justificar-contenido: espacio-uniformemente ;)
align-artículos definen cómo los proyectos están alineados en el eje transversal (eje vertical)
align-artículos definen el elemento de atributo (Tenga en cuenta también que si el cabezal ha cambiado de dirección) debe ser alineado en el eje transversal. Se puede tomar cinco valores. DETALLADA dirección de alineación que intersecta el, cross-eje relacionados eje de arriba a abajo se supone lo siguiente.
(1) flex-inicio: el punto de partida de la alineación del eje transversal (y valores por defecto). (Align =-objetos dejados: Flex-Start;)
(2) End-Flex: fin alineación del eje transversal. (Align =-objetos dejados: Flex-End;)
Centro; la dirección transversal del eje central alineado; (Alinear-artículos: Centro) (3).
align-contenido define una pluralidad de ejes (multi-línea) de alineación
(1) flex-empezar: el punto de partida de la alineación del eje transversal; (align = left-contenido: Flex-Start;)
(2) Flex-End: cross-eje de alineación punto hinchado; (align = left-Contenido: Flex-End;)
(. 3) centro; eje de intersección de un punto medio; (= contenido-alinear a la izquierda: center;)
Espacio-alrededor; dispersión alineado, debe observarse que los elementos no lo hacen de intersección ambos extremos del eje contra los lados del recipiente (nota la distinción entre los dos extremos, y (4). alineación, y la diferencia entre la alineación media), el espacio restante en el recipiente (la dirección del eje transversal) de los elementos de manera uniforme para su inicio y fin a la dirección del eje transversal (tenga en cuenta la dirección transversal es un eje horizontal o vertical) de ambos lados (y por lo tanto el eje transversal elementos de ambos lados del borde de la media contenedor) la distancia entre los elementos. (= Contenido-Alinear a la izquierda: Espacio-ENTRE;)
Espacio-ENTRE; justificación, se hace constar que los dos extremos del proyecto tendrán transversal eje contra los lados izquierdo y derecho del contenedor, (dirección del eje mayor) del resto del espacio (5). elementos restantes igualmente. . (Contenido-align = left: Espacio-ENTRE;)
(. 6) Espacio-UNIFORMEMENTE; de manera uniforme, es tener de manera uniforme en todos los contenedores espacio intersecta la dirección axial restantes; y una diferencia entre la dispersión está alineada, la distancia entre cada elemento y dirección del eje transversal y el final del proyecto la distancia entre los lados de la llanta recipiente es grande como el principio. (Align-contenido: espacio-uniformemente ;)
Las propiedades del proyecto
1, flex-crecer; el valor predeterminado es 0, el recipiente flex sub prevista la brecha contenedor padre el espacio restante, que puede establecer el valor, mayor es el más alto es el peso asignado un valor de peso entre el elemento correspondiente.
Tales artículos originalmente en el recipiente se disponen de tal manera (no apoyar contenedor lleno)
prótesis en un casete 3 está provisto de una, la caja 3 cabe en el recipiente lleno de espacio restante a crecer flex (flex-crecer en el husillo: 1; la como se muestra en la figura.)
2, atributo Orden define los artículos ordenar, cuanto menor sea el valor, la disposición más adelante, el valor predeterminado es 0, por ejemplo, atribuimos valor 3 a la caja 1, la caja 2 para el valor del atributo de 2, 4 de la caja 3 , la caja 1 es 4, por lo que el sub-cuadro será del orden de 1234 se convierte en 3,241.
3, atributo flex-contracción define la relación de reducción de los artículos, el valor predeterminado es 1, si todos los artículos son el valor de atributo predeterminado 1, cuando no hay suficiente espacio se reducirá. Si un proyecto en el que la propiedad es 0, 1 otra manera predeterminada, cuando la falta de espacio, el primero no se encoge. (Esta propiedad no es negativo), como se muestra a continuación, caja de valor de atributo 4 flex-retráctil se establece en 0, el valor predeterminado otro casete 1, cuando la falta de espacio, la caja 4 no se reduce.
4, atributo flex-base define el espacio de husillo antes de asignar espacio adicional, ocupada por el proyecto. Navegador basado en esta propiedad para calcular si el cabezal dispone de suficiente espacio libre. El valor por defecto de automóviles (el tamaño original del proyecto).
5, la propiedad de la flexión, que es un flex-Grow, flex-retráctil y taquigrafía flex-base, el valor predeterminado 0 1 auto, los dos valores se pueden seleccionar de acuerdo con sus valores o no necesidad (el valor predeterminado), pero también Tenga en cuenta el orden entre ellos.
6, align-auto atributo conjunto a un único elemento, lo que permite un único elemento y otros artículos pueden tener diferentes disposiciones (peso es mayor que-elemento align valor predeterminado atributo automático).
