Primero, el concepto básico de diseño flexible
Antes de usar el diseño flexible, los diseños comunes incluyen: diseño de flujo, diseño flotante, diseño de posicionamiento, etc. La desventaja de estos diseños es que los elementos secundarios deben controlar su propia posición en el elemento principal y también prestar atención al colapso de la altura del elemento principal .
flex layout es un modelo de diseño, a menudo denominado flexbox. Después de usar el diseño flexible, proporciona poderosas capacidades de alineación y asignación de espacio para elementos secundarios.
Ventajas : evite formularios de diseño inflexibles, cree más modos de diseño para que pueda elegir y resuelva problemas como la alineación y distribución de elementos secundarios y la capacidad de respuesta.
Desventaja : solo puede confiar en su propio modo de diseño y no se puede cambiar si se modifica ligeramente.
Precauciones:
1. Lo que cambia el diseño flexible no es en sí mismo, sino en sus elementos secundarios internos. Es decir, al definir, defina flex en el elemento principal, trate el elemento principal como un 'contenedor' y luego cambie la disposición de los elementos secundarios internos.
2. Después de configurar el diseño flexible, el flotador y la eliminación de elementos secundarios no son válidos. Es decir, el elemento secundario no necesita flotar y el elemento principal no necesita borrar el flotador.
3. Para elementos con conjunto flexible, los elementos secundarios estarán "bloqueados". Es decir, si el elemento principal usa display:flex, sus elementos secundarios se convertirán en elementos a nivel de bloque.
En segundo lugar, el uso del diseño flexible.
1. Gramática básica
Los conjuntos de elementos principales muestran: flex.
2. Eje principal y eje transversal
Sintaxis : flex - dirección
El eje principal y el eje transversal son verticales, y el origen de los dos ejes depende de la disposición de los elementos secundarios, como se muestra en la figura.
Por defecto (sin escribir flex - direction ), se adopta el modo línea, es decir, el eje principal es la dirección horizontal.
3. Clasificación del husillo
4. Modo de nueva línea
Como se muestra en la figura anterior, el ancho del elemento principal ya no puede contener todos los elementos secundarios en una línea, pero dado que el salto de línea no está establecido, los elementos secundarios se comprimirán y forzarán a alinearse.
Activar salto de línea: flex-wrap: wrap; se puede lograr.
5. Alineación del eje principal
/* 默认起点对齐 */
justify-content: flex-start;
/* 终点对齐 */
justify-content: flex-end;
/* 居中对齐 */
justify-content: center;
/* 两端对齐 */
justify-content: space-between;
/* 周围分布相同空间 */
justify-content: space-around;
/* 均匀空间 */
justify-content: space-evenly;Los siguientes diagramas se utilizan para mostrar estos seis métodos de distribución diferentes, lo cual es conveniente para que todos los entiendan.
Si es modo columna, también se utiliza de la misma forma.
6. Alineación del eje transversal
/* 交叉轴起点*/
align-items: flex-start;
/* 交叉轴终点 */
align-items: flex-end;
/* 交叉轴居中 */
align-items: center;De hecho, es lo que solemos llamar centrado vertical.
El conocimiento básico sobre el diseño flexible está casi terminado. Este diseño es un diseño que suelo usar mucho. Puede resolver muchos problemas, como la composición tipográfica manual y la alineación de imágenes y texto. Espero que puedas dominar este diseño y te sea muy útil. !