Directorio de artículos
referencia
Tutorial de diseño flexible: sintaxis
Tutorial de diseño flexible: ejemplos
1. ¿Qué es flex?
flex (caja flexible, caja telescópica)
- Es otro método de diseño en css3
- Principalmente en lugar de flotar para completar el diseño de la página
- Flex puede hacer que el elemento sea flexible, de modo que el elemento puede cambiar con el tamaño de la página.
Eje principal : la dirección de disposición.
Eje lateral: perpendicular al eje principal.
2. Recipiente flexible
Para utilizar una caja elástica, primero debe configurar un elemento como contenedor elástico Coloque el contenedor elástico a
través de la pantalla.
.box{
display: flex; /* 设置为块级弹性容器*/
dispaly: inline-flex /* 设置为行内弹性容器*/
}
- Después de configurar el diseño Flex, los atributos flotante, claro y de alineación vertical de los elementos secundarios no serán válidos
Propiedades del contenedor
dirección flexible
El atributo determina la dirección del eje principal (es decir, la dirección en la que se organizan los elementos)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
fila (valor predeterminado): el eje principal está en la dirección horizontal y el punto de inicio está en el extremo izquierdo.
reversa de fila: el eje principal está en la dirección horizontal y el punto de partida está en el extremo derecho.
columna: el eje principal está en la dirección vertical y el punto de partida está en el borde superior.
columna inversa: el eje principal está en la dirección vertical y el punto de partida está en el borde inferior.
envoltura flexible
De forma predeterminada, los elementos se organizan en una línea (también conocida como "línea de eje"). El atributo flex-wrap define cómo ajustar si una línea de eje no puede ajustarse.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
(1) nowrap (predeterminado): no envolver.
(2) Envolver: envolver, la primera línea está en la parte superior.
(3) wrap-reverse: wrap, la primera línea está debajo.
flujo flexible
El atributo flex-flow es la forma abreviada del atributo flex-direction y el atributo flex-wrap. El valor predeterminado es row nowrap
(dirección de disposición, cambio sin salto de línea)
.box {
flex-flow: <flex-direction> || <flex-wrap>;
}
justificar el contenido
El atributo justify-content define la alineación del elemento en el eje principal .
.box {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start (predeterminado): alineado a la izquierda
flex-end: alineado a la derecha
centro: centrado
space-between: alineado en ambos extremos, el espacio entre elementos es igual.
space-around: Los intervalos en ambos lados de cada elemento son iguales. Por lo tanto, el intervalo entre elementos es dos veces mayor que el intervalo entre elementos y el borde.
space-evenly: Distribuido uniformemente (mala compatibilidad)
alinear-elementos
Los elementos de alineación en el eje transversal de la definición de atributo de elemento deben estar alineados.
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start: alinea el punto inicial del eje transversal.
flex-end: alinea los puntos finales del eje transversal.
center: El punto central del eje transversal está alineado.
línea de base: la alineación de la línea de base de la primera línea de texto del proyecto.
estirar (predeterminado): si el proyecto no tiene una altura establecida o configurada en automático, ocupará la altura de todo el contenedor.
alinear contenido
El atributo align-content define la alineación de múltiples ejes. Si el proyecto tiene un solo eje, esta propiedad no tiene ningún efecto.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start: alinea con el punto inicial del eje transversal.
flex-end: alinear con el final del eje transversal.
centro: se alinea con el punto medio del eje transversal.
Espacio entre ejes: se alinea con ambos extremos del eje transversal y el espacio entre los ejes se distribuye uniformemente.
Espacio alrededor: el espacio en ambos lados de cada eje es igual. Por lo tanto, el intervalo entre el eje es dos veces mayor que el intervalo entre el eje y el marco.
estirar (predeterminado): el eje ocupa todo el eje transversal.
3. Propiedades de los elementos elásticos
El elemento hijo (directo) de un contenedor elástico es un elemento elástico (elemento elástico).
Un elemento puede ser un contenedor elástico y un elemento elástico al mismo tiempo.
pedido
El atributo de orden define el orden de los artículos. Cuanto menor sea el valor, mayor será la disposición y el valor predeterminado es 0.
.item {
order: <integer>;
}
crecimiento flexible
El atributo flex-grow define cómo estirar el elemento hijo cuando el elemento padre tiene espacio extra. El valor predeterminado es 0, es decir, si hay espacio extra, no se ampliará.
.item {
flex-grow: <number>; /* default 0 */
}
El espacio restante del elemento padre se distribuirá proporcionalmente
flexión-encogimiento
El atributo flex-shrink define cómo se estirará el elemento secundario cuando el espacio en el elemento principal no sea suficiente para acomodar todos los elementos secundarios. El valor predeterminado es 1, es decir, si el espacio es insuficiente, el elemento se encogerá.
.item {
flex-shrink: <number>; /* default 1 */
}
Si la propiedad flex-shrink de todos los elementos es 1, cuando el espacio es insuficiente, todos los elementos se reducirán. Si la propiedad flex-shrink de un elemento es 0 y todos los demás elementos son 1, el primero no se encogerá cuando el espacio sea insuficiente.
Los valores negativos no son válidos para este atributo.
base flexible
El atributo de base flexible define el tamaño principal (tamaño principal) que ocupa el artículo antes de que se asigne el espacio adicional. El navegador calcula si hay espacio extra en el eje principal basándose en este atributo. Su valor predeterminado es auto, que es el tamaño original del proyecto.
.item {
flex-basis: <length> | auto; /* default auto */
}
Se puede establecer en el mismo valor que los atributos de ancho o alto (como 350px) y el elemento ocupará un espacio fijo.
flexionar
La propiedad flex es una abreviatura de flex-grow, flex-shrink y flex-base, y el valor predeterminado es 0 1 auto. Los dos últimos atributos son opcionales.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
Este atributo tiene dos valores de atajo: auto (1 1 auto) y ninguno (0 0 auto).
inicial: 0 1 automático
automático: 1 1 automático
ninguno: 0 0 automático
Se recomienda utilizar este atributo primero en lugar de escribir tres atributos separados por separado, porque el navegador calculará el valor relevante.
alinearse
El atributo align-self permite que un solo elemento tenga una alineación diferente de otros elementos y puede anular el atributo align-items.
El valor predeterminado es auto, lo que significa que el atributo align-items del elemento principal se hereda. Si no hay ningún elemento principal, es equivalente a stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}