diseño de flex
Medios para reemplazar la disposición flotante;
Debe primer elemento al contenedor elástico; // pantalla: flexión;
Un elemento puede ser tanto recipiente elástico y un elemento elástico;
Después de que el diseño se ajusta a la flexión, elementos secundarios flotan, claro, y el atributo vertical-align fallarán.
Del husillo: un elemento elástico dispuesto en una dirección;
Las propiedades elásticas del recipiente
1, flex-dirección determina la dirección del husillo
fila: valor predeterminado, de izquierda a derecha;
remar-inverso: de derecha a izquierda;
columna: de arriba a abajo;
columna-inversa: de abajo a arriba;
2, flex-wrap decidir si se debe envoltura
nowrap: valor por defecto, no se ajusta;
envolver: abrigo, sobre la primera línea;
wrap-inverso: envolturas, por debajo de la primera línea;
3, de flujo de flex
Shorthand flex-dirección y flex-wrap, el valor predeterminado es el nowrap fila;
// flex-flujo: fila envoltura;
4, justifica-contenido determina el elemento elástico está alineado sobre el husillo
flex-start: valor predeterminado, alineación a la izquierda;
flex-final: el alineado a la derecha;
introduzca: centro;
espacio entre: justificación, la separación entre los elementos elásticos son iguales (ambos lados del elemento elástico y el marco no hay distancia);
espacio-alrededor de: a ambos lados de cada uno de los elementos separadores elásticos son iguales (distancia entre el elemento elástico es más grande que los elementos de frontera dobles elástico de espaciamiento)
5, align-artículos para determinar cómo el sub-elemento alineado verticalmente (single) en el cuadro de padre
flex-comenzar: punto de inicio a lo largo del eje menor alineado con, desde el punto de partida ha sido descargado al final (flecha);
flex-final: el extremo del eje menor está alineado a lo largo de, comenzando desde el punto final ha sido clasificado;
centro: centro alineado;
la línea de base: alineación de línea base;
estirar: los valores por defecto, por lo que los elementos secundarios se estiran para acomodar el elemento padre (no es un elemento secundario a la altura de la premisa);
6, align-contenido determinado donde múltiples hileras de alineados verticalmente (single inválida fila)
La propiedad entró en condiciones de fuerza:
Propiedad se debe establecer caja libre de la matriz // elemento de pantalla: flexión;
Y dispuesto para alineados lateralmente disposición // flex-dirección: fila;
Y un conjunto de envoltura // flex-wrap: envoltura;
Los valores de propiedad:
1) tramo: Predeterminado, se extiende el espacio ocupado por el contenedor de cada fila, llenando manera de aumentar la brecha debajo de cada fila;
La primera fila de inicio predeterminada desde la parte superior de la disposición de contenedores.
2) Cancelar la pieza en bruto entre las filas y las filas y filas de todo como un todo,
centro: verticalmente centrada en el eje vertical;
flex-empezar: en la parte superior del recipiente;
flex-final: en la parte inferior de la embarcación;
3) el espacio entre: la línea por encima de la parte superior del recipiente se alinea, la fila más inferior, están alineados en la parte inferior del recipiente. Siendo el mismo espacio entre cada fila.
(Cerrar la alineación de contactos hay espacio libre);
espacio-en torno a: la posición vertical de cada fila de la pieza en bruto para retener la misma longitud, de modo que el hueco entre las dobles filas de solo espacio en blanco fila.
Propiedades elásticas de los elementos
1, orden de la resolución que ordena el elemento hijo
Cuanto menor sea el valor, más adelante, puede ser negativo, el valor predeterminado a cero; // orden: 1;
2, flex-Grow
El estiramiento determinación coeficiente de sub-elemento, prorrateado en el espacio restante en el elemento de matriz; // flex-Grow: 1;
Si todos los elementos son flex-crecer una propiedad, que alícuotas espacio restante (si lo hay);
flex-crecer propiedad si un proyecto es 2, otros proyectos son 1, entonces el resto del espacio está ocupado por el antiguo que los otros elementos más que duplicado.
3, flex-retráctil
coeficiente de contracción elemento determinante, cuando el elemento padre hay espacio suficiente para dar cabida a todos los elementos secundarios; // flex-encogimiento: 1;
Si el atributo flex-contracción todos los artículos son 1, cuando la falta de espacio, se reducirá;
flex-encogimiento propiedad si un proyecto es cero, otros proyectos son 1, cuando la falta de espacio, el primero no se encoge.
4, flex-base
Especifica la longitud del elemento de base sub del eje principal;
Si el cabezal transversal, el valor especificado es el ancho, es decir, se especifica la dirección longitudinal altura;
El valor predeterminado es auto, que indica el elemento de referencia en sí anchura / altura, ha pasado el valor numérico lugares tema específico;
5, flex: reducida base de crecimiento
flex-crecer, flex-contracción, flexión-base abreviada atributo;
inicial --- flex: 0 1 auto;
Auto --- Flex: Enero 1 asiento;
ninguno --- Flex: Auto 0 0; no elemento elásticamente resiliente, notaciones disminuido;
6, align-auto
Permite que un único elemento hijo tiene elementos secundarios otros en diferente alineación longitudinal, puede cubrir la propiedad align-artículos;
El valor por defecto es automático, heredado de la tabla primaria de elementos alinear-artículos atributos, si ninguno de los padres, es equivalente a la recta
Los valores de atributos: automóviles, flex-start, flex-end, centro, línea de base, estrías;
// pasaron dos horas de acabado, para mí, muy acostumbrados, más es el más dificultades a la rotura, se unen un par, Chong Chong Chong! !