Proyecto Flex layout-Ctrip
Diseño tradicional y diseño flexible
Disposición tradicional
- Buena compatibilidad y diseño engorroso
- Limitaciones, no se pueden diseñar bien en dispositivos móviles
diseño flexible
- Operación conveniente, diseño extremadamente simple y una amplia gama de aplicaciones móviles
- El soporte del navegador de PC es relativamente pobre
- La versión baja de IE11 no es compatible
opciones
- Si se trata de un diseño de página del lado de la PC, considere el modo de diseño tradicional
- Si se trata de un terminal móvil o un terminal de PC que no considera problemas de compatibilidad, utilice un diseño flexible flexible
Principio de diseño
- Diseño flexible de caja flexible, que se utiliza para proporcionar la máxima flexibilidad para los modelos en caja, cualquier contenedor puede designarse como diseño flexible
- Cuando el cuadro principal está configurado para diseño flexible, los atributos flotante, claro y alineación vertical del elemento secundario no serán válidos
- Diseño flexible = diseño flexible = diseño de caja flexible = diseño de caja flexible = diseño flexible
- Usar contenedores de elementos flexibles
- Todos los elementos secundarios son automáticamente miembros-proyectos de contenedor
Atributos comunes
Atributos comunes de los padres
flex-direction establece la dirección del eje principal
- valores predeterminados de fila de izquierda a derecha
- reversa de la fila de derecha a izquierda
- columna de arriba a abajo
- columna inversa de abajo hacia arriba
Disposición de los elementos secundarios en el eje principal de justify-content
- flex-start se establece por defecto en el eje principal x desde la cabeza, de izquierda a derecha
- el extremo flexible se organiza desde el final
- centro El eje principal está alineado en el centro
- el espacio alrededor divide el espacio restante por igual
- el espacio entre primero ribete los dos lados y luego divide el resto por igual
Si los elementos secundarios de envoltura flexible se envuelven
- el valor predeterminado de nowrap no se ajusta
- envolver
alineación de elementos de la disposición del subelemento del eje lateral (línea única)
- valores predeterminados de inicio flexible de arriba a abajo
- extremo flexible de abajo hacia arriba
- acurrucados juntos en el centro
- tramo
Disposición de subelementos del eje lateral de contenido de alineación (varias líneas)
- flex-start se establece por defecto en el eje principal x desde la cabeza, de izquierda a derecha
- el extremo flexible se organiza desde el final
- centro El eje principal está alineado en el centro
- el espacio alrededor divide el espacio restante por igual
- el espacio entre primero ribete los dos lados y luego divide el resto por igual
- stretch establece la altura del elemento secundario para dividir en dos la altura del elemento principal
propiedades de flujo flexible
- Flex-direction y flex-wrap compuestos
Atributos comunes de los niños
El número de elementos flexibles
-
Puede asignar el espacio restante del cuadro principal al proyecto secundario
-
Realice el diseño del Santo Grial: después de establecer el ancho y la altura fijos de las cajas de 1, 3 elementos, establezca directamente el valor de flexión de 1 en la caja 2, de modo que pueda ocupar exclusivamente el espacio restante de la caja principal, de modo que pueda cambiar con el cambio de página.
section {
/* 必须先设置成为flex布局 */
display: flex;
width: 80%;
margin: 40px auto;
}
div:nth-child(2) {
flex: 1;
}
align-self controla la disposición de los propios niños en el eje transversal.
- Este atributo 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, que hereda la propiedad align-items del elemento principal. Si no hay ningún elemento principal, es equivalente a stretch
el orden define el orden de los niños
- Ajusta el orden de carga de los niños, el valor predeterminado es 0
- Si quieres hacer la premisa, el valor del atributo puede ser un número negativo, si es en el futuro, debes dar un número grande
Terminal móvil Ctrip
Parte del cuadro de búsqueda
- Utilice un diseño flexible para permitir que el contenido de búsqueda ocupe el espacio restante del elemento principal, flex: 1, de modo que el efecto de que el área cambie a medida que cambia la página
- Se agregan pequeños íconos usando pseudo elementos
- La realización del diseño vertical, el texto sobre la imagen de abajo
- Darse cuenta de la disposición horizontal de imágenes y texto
- Ajuste el eje principal al eje Y
- Luego céntralo en el eje transversal.
.search-box .login {
/* 内部使用flex布局样式 */
display: flex;
flex-direction: column;
/* 主轴侧轴的子元素样式均设置为center排布 */
align-items: center;
justify-content: center;
}
//插入伪元素精灵图的步骤
.search-box .login::after {
content: "";
display: block;
width: 22px;
height: 22px;
background: url(../images/sprite.png)no-repeat 0 -36px;
background-size: 21px auto;
order: -1;//对排布的先后顺序进行调整
}
- Gradiente de imagen de fondo usando pseudo elementos
.focus::after {
content: "";
display: block;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}
parte de la columna de navegación local
- Utilice ul, li para lograr un diseño horizontal básico
- En cada li, use flex para hacer Y como el eje principal y X como el eje lateral para centrar
Sección de navegación principal
- Escriba primero la estructura y el estilo comunes y vuelva a modificar el estilo especial
background-image: url(../images/hot_sale.png), linear-gradient(to right, #ffbc49, #ffbc49);
- Establecer propiedades de fondo
- Agregar un fondo degradado
- El fondo que cambia de color escrito más tarde sobrescribirá la imagen de fondo escrita primero
diseño de entrada subnav
- La barra de navegación no puede usar la distribución flexible. Debes agregar un porcentaje del ancho para que el diseño se adapte al ancho
- La etiqueta li todavía se usa internamente, el fondo se agrega a través de una etiqueta i, el intervalo se agrega al problema, Y es el eje principal y el estilo de lista se puede realizar al centrarlo.
Zona de actividad popular
- Sobre la escritura de la pequeña flecha.
- Se puede lograr mediante pseudo-clase, establecer un borde superior derecho
- Localizar elementos por el método de hijo y padre
- Confirme la flecha pequeña en la dirección correcta girando 45 °
Agregue un fondo a la etiqueta de i, agregue una pregunta al intervalo, establezca Y como el eje principal y luego alinéelo en el centro para lograr el estilo de lista
[Las imágenes del enlace externo se están transfiriendo ... (img-alrHagqp-1609680194967)]
Zona de actividad popular
- Sobre la escritura de la pequeña flecha.
- Se puede lograr mediante pseudo-clase, establecer un borde superior derecho
- Localizar elementos por el método de hijo y padre
- Confirme la flecha pequeña en la dirección correcta girando 45 °
