Diseño flexible
Significado : Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad a los modelos con forma de caja.
dirección flexible
La propiedad flex-direction determina la dirección del eje principal (es decir, la dirección en la que se organizan los elementos).
fila (predeterminado) : el eje principal es horizontal y el punto de partida está en el extremo izquierdo.
row-reverse : El eje principal es horizontal y el punto de partida está en el extremo derecho.
columna : El eje principal es vertical y el punto de partida está en el borde superior.
column-reverse : el eje principal es vertical y el punto de partida está en el borde inferior.
envoltura flexible
Si no se puede organizar una línea de eje, ¿cómo ajustar la línea?
nowrap (predeterminado) : no envolver.
wrap : Envolver, con la primera línea en la parte superior.
wrap-reverse : ajuste, primera línea a continuación.
flujo flexible
La propiedad flex-flow es la abreviatura de la propiedad flex-direction y la propiedad flex-wrap. El valor predeterminado es row nowrap.
.box {
flex-flow: <flex-direction> <flex-wrap>;
}
justificar-contenido
Definir la alineación de elementos en el eje principal.
inicio flexible (valor predeterminado) : alineado a la izquierda
extremo flexible :
centro alineado a la derecha :
espacio centrado entre : alineado en ambos extremos, con espacio igual entre elementos.
space-around : cada elemento está igualmente espaciado en ambos lados. Por lo tanto, el espacio entre elementos es dos veces mayor que el espacio entre elementos y el borde.
alinear elementos
Define cómo se alinean los elementos en el eje vertical.
flex-start : Alinea el punto inicial del eje transversal.
extremo flexible : alinea el extremo del eje transversal.
centro : alinea el punto medio del eje transversal.
línea base : La alineación base de la primera línea de texto del elemento.
estiramiento (valor predeterminado) : si el elemento no establece una altura o está configurado en automático, ocupará toda la altura del contenedor.
alinear contenido
Define la alineación de múltiples ejes. Esta propiedad no tiene efecto si el proyecto tiene un solo eje.
- Alinear horizontalmente cuando se establece la fila
- Alinear verticalmente cuando la columna está configurada
flex-start : Alinear con el punto inicial del eje transversal.
extremo flexible : alineado con el punto final del eje transversal.
centro : Alineado con el punto medio del eje transversal.
espacio entre : Alinee con ambos extremos del eje transversal y los intervalos entre los ejes se distribuyan uniformemente.
espacio alrededor : cada eje está igualmente espaciado en ambos lados. Por lo tanto, la distancia entre los ejes es el doble de la distancia entre los ejes y el marco.
estiramiento (predeterminado) : el eje ocupa todo el eje transversal.
otro
orden
orden : El atributo de orden define el orden en el que se ordenan los elementos. Cuanto menor sea el valor, mayor será la clasificación. El valor predeterminado es 0.
.item {
order: <integer>;
}
doblar
flex : El atributo flex es la abreviatura de flex-grow, flex-shrink y flex-basis, y el valor predeterminado es 0 1 auto. Las dos últimas propiedades son opcionales.
.item {
flex: 1 | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
- flex-grow : El atributo flex-grow define la relación de ampliación del elemento, el valor predeterminado es 0, es decir, si queda espacio, no se ampliará.
.item {
flex-grow: <number>; /* default 0 */
}
- flex-shrink : La relación de contracción del elemento, el valor predeterminado es 1, es decir, si no hay suficiente espacio, el elemento se encogerá.
.item {
flex-shrink: <number>; /* default 1 */
}
- base flexible : el tamaño principal del elemento antes de asignar el exceso de espacio. El navegador utiliza este atributo para calcular si hay espacio adicional en el eje principal. Su valor predeterminado es auto, que es el tamaño original del proyecto.
.item {
flex-basis: <length> | auto; /* default auto */
}
alinearse
align-self : el atributo align-self permite alinear un solo elemento de manera diferente a otros elementos y puede anular el atributo align-items. El valor predeterminado es automático, lo que significa heredar el atributo de alineación de elementos del elemento principal. Si no hay un elemento principal, es equivalente a estirar.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Excepto automático, todo lo demás es exactamente igual que el atributo de alineación de elementos.
El código fuente de github Flex-layout
se refiere al tutorial de diseño de Ruan Yifeng Flex