Prefacio
Aprenda el diseño de Flex por primera vez para grabar y organizar notas.
Uno, Flex
Introducción
- El modelo flexbox, un método de diseño CSS, se puede utilizar en lugar de flotante.
- Los elementos son flexibles y cambian con el tamaño de la página.
concepto basico
1. Recipiente flexible
- Utilice la base del diseño Flex, que es establecer un elemento como un contenedor flexible
- Método de configuración:
- Contenedor flexible a nivel de bloque
- Contenedor flexible en línea
display:flex;
display:inline-flex;
2. Elementos elásticos
- Los elementos secundarios del contenedor elástico son elementos elásticos.
- Pueden ser declaraciones anidadas, es decir, los elementos flexibles también pueden ser contenedores flexibles
3. Husillo
- Dirección de disposición de elementos elásticos.
4. Eje transversal (eje auxiliar)
- Perpendicular al eje principal
2. Atributos básicos
1. Las propiedades del contenedor
- dirección flexible:
- Valor de propiedad: fila (valor predeterminado) | fila-inversa | columna | columna-inversa
- envoltura flexible:
- Valor de propiedad: nowrap (valor predeterminado) | wrap | wrap-reverse
- justificar-contenido:
- Valor de la propiedad: flex-start (valor predeterminado) | flex-end | center | space-start | space-end | space-evenly
- alinear-elementos:
- Valor de la propiedad: stretch (valor predeterminado) | flex-start | flex-end | center | baseine
- alinear-contenido:
- Valor de la propiedad: flex-start (valor predeterminado) | flex-end | center | space-start | space-end | space-evenly
dirección flexible
Especificar cómo ordenar elementos elásticos
fila
- Dirección horizontal, de izquierda a derecha, valor predeterminado
- En este momento, el eje principal es horizontal, de izquierda a derecha.
reversa
- Dirección horizontal inversa, de derecha a izquierda
- En este momento, el eje principal es horizontal, de derecha a izquierda.
columna
- Dirección vertical, de arriba hacia abajo
- En este momento, el eje principal es vertical, de arriba a abajo.
columna inversa
- Dirección vertical opuesta, de abajo hacia arriba
- En este momento, el eje principal es vertical, de abajo hacia arriba
ul{
display:flex;
flex-direction: row|row-reverse|column|column-reverse
}
envoltura flexible
Especifica si el elemento se ajustará
Nowrap
- El elemento no se ajustará automáticamente, el valor predeterminado
envolver
- El elemento se envuelve automáticamente a lo largo del eje menor.
envolver-revertir
- Los elementos se envuelven automáticamente a lo largo de la dirección opuesta del eje menor
ul{
display:flex;
flex-direction:row;
flex-wrap: nowrap|wrap|wrap-reverse;
}
Nota
- flujo flexible:
- Atributos abreviados para envoltura y dirección, los valores de los atributos no están ordenados, separados por espacios
justificar el contenido
Especificar cómo se asigna el espacio restante en el eje principal (cómo se organizan los elementos en el eje principal)
inicio flexible
- El valor predeterminado, el espacio restante no está asignado
- Los elementos se organizan desde el punto de partida del eje principal
extremo flexible
- El espacio restante no está asignado
- Los elementos están dispuestos desde el final del eje principal.
centrar
- Los elementos están centrados en el eje principal
- El espacio restante se asigna a ambos lados de todos los elementos.
espacio alrededor
- El espacio restante del eje principal se asigna a ambos lados de cada elemento.
- El espacio del medio es el doble del espacio lateral.
espacio entre
- El espacio restante del husillo se distribuye uniformemente entre los elementos.
espacio uniforme
- El espacio restante del eje se asigna a un lado de cada elemento.
- Baja compatibilidad, usar con precaución
ul{
display:flex;
justify-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
alinear-elementos
Especificar cómo se alinean los elementos en el eje menor
tramo
- Defaults
- Extienda el elemento para asegurarse de que el valor de longitud de cada elemento de línea sea el mismo y complete la línea completa (el elemento no establece la altura o la altura es automática)
inicio flexible
- Los elementos no se estiran y alinean a lo largo del punto de inicio del eje menor (de cada fila)
extremo flexible
- El elemento no se estira ni se alinea a lo largo del punto final del eje menor (de cada fila)
centrar
- Alinear el centro a lo largo del eje menor (de cada fila)
base
- Alinear con la línea base de la primera línea del elemento
- Adecuado para elementos con diferentes tamaños de texto, no de uso común
ul{
display:flex;
align-items: stretch|flex-start|flex-end|center|baseline;
}
alinear contenido
Especificar cómo se asigna el espacio restante en el eje secundario (cómo se organizan los elementos en el eje secundario), similar a la propiedad justify-content
inicio flexible
- El valor predeterminado, el espacio restante no está asignado
- Los elementos se organizan desde el punto de partida del eje menor
extremo flexible
- El espacio restante no está asignado
- Los elementos están dispuestos desde el final del eje secundario
centrar
- Los elementos están centrados en el eje secundario
espacio alrededor
- El espacio restante del eje auxiliar se asigna a ambos lados de cada elemento.
- El espacio del medio es el doble del espacio lateral.
espacio entre
- El espacio restante del eje auxiliar se distribuye uniformemente entre los elementos.
espacio uniforme
- El espacio restante del eje secundario se asigna a un lado de cada elemento.
- Baja compatibilidad, usar con precaución
ul{
display:flex;
align-content: flex-start|flex-end|center|space-around|space-between|space-evenly;
}
2. Atributos del elemento
- orden:
- Valor de propiedad: 0 (valor predeterminado)
- crecimiento flexible:
- Valor de propiedad: 0 (valor predeterminado)
- flexión-encogimiento:
- Valor de la propiedad:
- base flexible:
- Valor de la propiedad:
- alinearse a sí mismo:
- Valor de la propiedad:
orden
Especificar el orden de los elementos
- Número arbitrario, los elementos con números más grandes se colocan detrás
- Valor predeterminado: 0
li:nth-child(1){
order:2;
}
li:nth-child(2){
order:3;
}
li:nth-child(3){
order:1;
}
crecimiento flexible
El factor de crecimiento del elemento especificado.
- Valor predeterminado: 0
- El espacio restante se asigna a los elementos en proporción, es decir, los elementos crecen en proporción
li:nth-child(1){
flex-grow:0;
}
li:nth-child(2){
flex-grow:3;
}
li:nth-child(3){
flex-grow:1;
}
flexión-encogimiento
El factor de reducción del elemento especificado
- Valor predeterminado: 1
- El tamaño de la reducción está relacionado con el factor de reducción y el tamaño del propio elemento.
li:nth-child(1){
flex-shrink:0;
}
li:nth-child(2){
flex-shrink:2;
}
li:nth-child(3){
flex-shrink:15;
}
base flexible
Especifique el tamaño inicial del elemento en el eje principal
- Si el eje principal es horizontal, especifique el ancho del elemento; si es vertical, especifique la altura del elemento
- Valor predeterminado: auto (la altura o el ancho del elemento en sí)
- Pase el valor para cambiar la altura o el ancho del elemento
ul{
dispaly:flex;
flex-direction:row;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
ul{
dispaly:flex;
flex-direction:column;
}
li:nth-child(1){
flex-basis:auto;
}
li:nth-child(2){
flex-basis:100px;
}
li:nth-child(3){
flex-basis:10px;
}
Nota
flexionar:
- Propiedades abreviadas de flex-grow, flex-shrink y flex-base, los valores de propiedad tienen un orden fijo
- Valor de la propiedad:
- initial:
equivalente a flex: 0 1 auto; el
elemento no crecerá, pero se encogerá, y el tamaño se establecerá de acuerdo con su propio ancho y alto- auto:
equivalente a flex: 1 1 auto; el
elemento crecerá y encogerá, y el tamaño se establecerá de acuerdo con su propio ancho y alto- none es
equivalente a flex: 0 0 auto; el
elemento es completamente inelástico, no crecerá, no se encogerá, pero establecerá el tamaño de acuerdo con su propio ancho y alto
alinearse
Sobrescribir elementos de alineación en el elemento actual
tramo
- Defaults
- Solo estire este elemento para llenar toda la línea (el elemento no tiene una altura establecida o la altura es automática)
inicio flexible
- No estire este elemento, simplemente alinéelo a lo largo del punto de inicio del eje menor (de la fila)
extremo flexible
- No estire este elemento, simplemente alinéelo a lo largo del punto final del eje menor (de la fila)
centrar
- Centre este elemento a lo largo del eje menor (de la fila)
base
- Alinear con la línea base de la primera línea del elemento
- Adecuado para elementos con diferentes tamaños de texto, no de uso común
ul{
display:flex;
align-items:flex-start;
}
li:nth-child(1){
align-self:stretch;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(2){
align-self:flex-start;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(3){
align-self:flex-end;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(4){
align-self:center;
}
ul{
display:flex;
align-items:stretch;
}
li:nth-child(5){
align-self:baseline;
}
Adjunto
Video de aprendizaje: la nueva versión de la nueva versión completa del tutorial básico HTML5 + CSS front-end web de Silicon Valley (131,133-134 episodios)