1 experiencia de diseño flexible

Diseño tradicional y diseño flexible:

diseño tradicional	diseño elástico flexible
buena compatibilidad	Fácil de operar, diseño extremadamente simple y una amplia gama de aplicaciones móviles
diseño engorroso	El soporte del navegador de PC es deficiente
Limitaciones, no hay un buen diseño en el lado móvil	IE 11 o inferior, sin o solo soporte parcial

2 principio de diseño flexible

flex es la abreviatura de caja flexible, que significa " disposición elástica ", que se utiliza para proporcionar la máxima flexibilidad para el modelo de caja, y cualquier contenedor puede designarse como disposición flexible .

floatDespués de establecer el diseño flexible para el cuadro principal, los atributos clear, y de los elementos secundarios vertical-align dejarán de ser válidos.
diseño flexible = diseño flexible = diseño de caja flexible = tela de caja flexible = diseño flexible

Los elementos que adoptan un diseño Flex se denominan contenedor flexible o "contenedor" para abreviar. Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, llamados elementos flexibles (elemento flexible), denominados "elementos"

Los propios elementos flexibles también pueden convertirse en contenedores, llamados subcontenedores. Luego, el nivel superior se llama el contenedor principal.
Los subcontenedores se pueden organizar horizontal o verticalmente
Resumen del principio: controle la posición y la disposición de los cuadros secundarios agregando atributos flexibles al cuadro principal

3 atributos comunes de los padres de diseño flexible

3.1 Atributos principales comunes

Los siguientes 6 atributos se establecen en el elemento principal

flex-direction: Establecer la dirección del eje
justify-content: establece la disposición de los elementos secundarios en el eje principal
flex-wrap: establece si el elemento secundario se ajusta
align-content: establece la disposición de los elementos secundarios en el eje transversal (múltiples líneas)
align-items: establece la disposición de los elementos secundarios en el eje transversal (línea única)
flex-flow: Atributo compuesto, que equivale a establecer flex-direction y flex-wrap

3.2 Flex-direction Establecer la dirección del eje principal

flex-direction Establezca la dirección del eje principal.

eje principal y eje lateral

En el diseño flexible, se divide en dos direcciones: el eje principal y el eje lateral, y los nombres al mismo tiempo son: fila y columna, eje x y eje y.

La dirección del eje predeterminada es la dirección del eje x, horizontal a la derecha
La dirección predeterminada del eje lateral es la dirección del eje y, verticalmente hacia abajo

valor de atributo

flex-direction El atributo determina la dirección del eje principal (es decir, la dirección en la que se organizan los elementos)
Nota: el eje principal y el eje lateral cambiarán, dependiendo de flex-direction quién se establezca como eje principal, y el otro es el lateral eje. Los elementos secundarios se organizan a lo largo del eje principal.

valor de atributo	ilustrar
fila	Predeterminado, de izquierda a derecha
fila-reversa	de derecha a izquierda
columna	de arriba hacia abajo
columna inversa	de abajo hacia arriba

justify-content Establecer la disposición de los subelementos en el eje principal

Antes de usar este atributo, asegúrese de determinar qué eje es

valor de atributo	ilustrar
arranque flexible	Valor predeterminado, comience desde la cabeza, si el eje principal es el eje x, luego vaya de izquierda a derecha
extremo flexible	Ordenar desde el final
centro	Alinear en el eje principal (si el eje principal es x, estará centrado horizontalmente)
espacio alrededor	Divide el espacio restante en partes iguales
espacio entre	Primero adhiérase a ambos lados y luego divida el espacio restante por igual (importante)

flex-wrap Establecer si el elemento secundario se ajusta

De forma predeterminada, los elementos se organizan en una sola línea (también conocido como eje)

flex-wrap Definición de atributo, el valor predeterminado en el diseño flexible no es el salto de línea

Nota: si el cuadro principal no se puede abrir en una línea, el ancho del elemento secundario se reducirá para que aún se muestre en una línea

valor de atributo	ilustrar
ahora rap	predeterminado, sin nueva línea
envoltura	nueva línea
envolver-reversa	salto de línea inverso

align-items Establece la disposición de los elementos secundarios en el eje transversal (línea única)

Esta propiedad controla la disposición de los subelementos en el eje lateral (eje Y de forma predeterminada) y se utiliza cuando el subelemento es un único elemento.

valor de atributo	ilustrar
arranque flexible	de arriba hacia abajo
extremo flexible	de abajo hacia arriba
centro	apretar juntos (centrado verticalmente)
estirar	Estirar (predeterminado)

align-content Establece la disposición de los elementos secundarios en el eje transversal (multilínea)

Establece la disposición de los subelementos en el eje lateral y solo se puede usar cuando el subelemento aparece en una nueva línea (múltiples líneas), no tiene efecto debajo de una sola línea

valor de atributo	ilustrar
doblar	Por defecto, comienza la alineación en la cabeza del eje transversal
extremo flexible	Comience la alineación al final del eje transversal
centro	Mostrar en el medio del eje lateral
espacio alrededor	Los niños dividen el espacio restante por igual en el eje transversal.
espacio entre	Los elementos secundarios se distribuyen primero en ambos extremos en el eje lateral y luego dividen el espacio restante por igual
estirar	Establezca la altura del elemento secundario para dividir arbitrariamente la altura del elemento principal

La diferencia entre alinear contenido y alinear elementos

align-items Aplicable a casos de una sola línea, solo alineación, centrado y estiramiento de arriba a abajo
align-content Aplicable al caso de nueva línea (múltiples líneas) (no válido en el caso de una sola línea), puede establecer valores de atributo como alineación superior, alineación inferior, centrado, estiramiento y división del espacio restante por igual

flujo flexible

flex-flow El atributo es un atributo compuesto de flex-direction y el flex-wrap atributo

flex-flow: row wrap;

flex-direction: Establecer la dirección del eje
justify-container: establece la disposición de los elementos secundarios en el eje principal
flex-wrap: establece si el elemento secundario se ajusta
align-content: establece la disposición de los elementos secundarios en el eje transversal (múltiples líneas)
align-items: establece la disposición de los elementos secundarios en el eje transversal (línea única)
flex-flow : Atributo compuesto, que equivale a establecer flex-direction y flow-wrap

4 atributos comunes de los niños de diseño flexible

Acciones de artículos flexibles
align-self controla la alineación del propio niño en el eje transversal
El atributo order define el orden en que se organizan los subelementos (antes y después)

flex El atributo define el subelemento para asignar el espacio restante , que se utiliza para flex indicar cuántas copias ocupa. flex El valor puede ser un número entero o un porcentaje

.item {
    flex: <number>; /*default 0*/
}

Por ejemplo, para dividir un cuadro en partes iguales, no se proporciona el ancho (alto) del elemento secundario y luego se establecen los atributos para cada elemento secundario:flex: 1

align-self Controla cómo los niños se organizan en el eje transversal

align-self Los atributos permiten que los elementos individuales tengan una alineación diferente a la de otros elementos, anulando align-items los atributos. El valor predeterminado es auto, lo que significa heredar align-items los atributos del elemento principal y, si no hay ningún elemento principal, es equivalente a strech.

valor de atributo	describir
`auto`	El valor predeterminado hereda el valor de elementos de alineación del cuadro principal.
`strech`	Los elementos se estiran para adaptarse al contenedor.
`center`	El elemento está en el centro del contenedor.
`flex-start`	elemento al principio del contenedor
`flex-end`	el elemento está al final del contenedor

order La propiedad define el orden en que se ordenan los elementos.

Cuanto menor sea el valor, mayor será el arreglo, el valor predeterminado es 0

Nota: z-index no es lo mismo que

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面  */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>

5 gradientes de color

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀 */
            /* background: -webkit-linear-gradient(left, red, blue); */
            /* background: -webkit-linear-gradient(red, blue); */
            background: -webkit-linear-gradient(top left, red, blue);
        }
    </style>
</head>

<body>
    <div></div>
</body>

[HTML+CSS] Flex Layout para desarrollo web móvil