Diseño elegante de caja flexible flexible

Introducción a Flex

Antes del diseño flexible, queríamos hacer un diseño elegante de dos o tres columnas para la página. Nos costó mucho usar la flotación o el posicionamiento para lograrlo. Ahora podemos usar rápida y fácilmente el cuadro flexible flexible para lograr

• Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad para los modelos de caja. Los elementos a nivel de bloque usan display: flex; los elementos en línea usan inline-flex, y después de que el contenedor usa el diseño Flex, los atributos de flotación, claro y alineación vertical de los elementos secundarios no serán válidos

conceptos básicos

• La pantalla de configuración del elemento actual: flex; o inline-flex, la caja se llama contenedor flexible contenedor, denominado " contenedor "
• Todos los elementos secundarios del elemento actual se convierten automáticamente en miembros del contenedor y se convierten en elementos flexibles, denominados " elementos ".
• El contenedor está dividido en dos ejes por defecto: el eje principal horizontal y el eje transversal vertical. Se main startllama a main endla posición inicial del eje principal (la intersección con el marco) y se llama a la posición final ; la posición inicial de la cruz Se llama al eje y se llama a cross startla posición final cross end. Los elementos se organizan a lo largo del eje principal de forma predeterminada. Se llama al espacio del eje principal ocupado por un solo elemento main sizey al espacio ocupado por el eje transversal cross size.

6 atributos utilizados en el proyecto

• flex-grow: relación de zoom
• flex-shrink: reducir la relación
• base flexible: valor base flexible
• flex: abreviatura de flex-grow, flex-shrink y flex-base
• orden: orden de clasificación
• align-self: alineación de un solo elemento

1. flex-grow

Defina la relación de ampliación del elemento flexible en el eje principal, el valor predeterminado es 0: incluso si queda espacio restante (ancho), no se ampliará.

• Asignar el espacio restante de la caja de acuerdo con la proporción establecida
• Expansión: el valor predeterminado del diseño de las columnas izquierda y derecha es O;
• Si el valor del atributo flex-grow de todos los elementos flexibles es 1, significa que dividen por igual el espacio restante (si lo hay)

2. flexión-encogimiento

Defina la relación de reducción del elemento flexible en el eje principal. El valor predeterminado es 1, es decir, si el espacio es insuficiente, el elemento flexible se encogerá.

• Tan pronto como la relación de contracción del elemento configurado exceda la parte de la caja, corte el tamaño correspondiente de acuerdo con el tamaño de la relación, es decir, cuanto mayor sea la relación, mayor será el corte, el valor predeterminado es 1;
• Si el valor del atributo flex-shrink de todos los elementos flexibles es 1, cuando el espacio es insuficiente, se reducirá proporcionalmente
• El elemento flexible con contracción flexible de 0 no se encogerá cuando el espacio sea insuficiente.

3. base flexible

Valor de referencia de flexibilidad. El elemento ocupa el espacio del eje principal. El valor predeterminado es auto, que significa el tamaño original del elemento flexible.

• El navegador calcula si hay espacio extra en función de este atributo
• Si los valores de ancho y alto se fijan como unidades de longitud absoluta (como 350px), el elemento flexible ocupa un espacio fijo

4. flexión

Es una abreviatura de las tres propiedades de flex-grow, flex-shrink y flex-base, el valor predeterminado es 0 1 auto

• Dos valores de acceso directo: ninguno significa (0 0 automático); automático significa (1 1 automático)
• Se recomienda usar primero los valores de atributo en lugar de escribir tres atributos separados primero (el navegador calculará automáticamente los valores relevantes)

5. orden

Los atributos definen el orden de los artículos. Cuanto menor sea el valor, mayor será la disposición y el valor predeterminado es 0.

6. alinearse a sí mismo

Permitir que un solo elemento flexible y otro elemento flexible tengan una alineación diferente en el eje transversal, lo que puede anular el valor de los elementos de alineación

• alinear-elementos: auto | inicio flexible | extremo flexible | centro | línea de base | estirar
• El valor predeterminado es auto: indica que el atributo align-items del elemento padre se hereda
• línea de base alineada de acuerdo con la línea de base
• Equivalente a estirar sin elemento padre

Establecer 6 atributos en el contenedor 12241.25

• flex-direction determina la dirección del eje principal
• flex-wrap si envolver
• Taquigrafía para flex-flow flex-direction y flex-wrap
• Alineación de elementos de contenido justificado en el eje principal
• alineación de elementos de alineación en el eje transversal
• align-content La alineación de múltiples ejes.

1. dirección flexible

Determine la dirección del eje principal, es decir, la dirección de la disposición de los elementos.

• dirección de flexión: fila | reversa de fila | columna | columna inversa
• fila (valor predeterminado) El eje principal es horizontal y el punto de partida está en el extremo izquierdo
• El eje principal de reversa es 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 extremo superior
• columna inversa El eje principal está en la dirección vertical y el punto de partida está en el extremo inferior

2. envoltura flexible

De forma predeterminada, los elementos se organizan en una línea (también conocida como el "eje"), definida por el atributo flex-wrap, si un eje no está alineado, cómo ajustar

• flex-wrap: nowrap | envolver | envolver-revertir
• nowrap (predeterminado): sin
  ajuste de línea * wrap: change hang, la primera línea está en la parte superior
• wrap-reverse: wrap, la primera línea está debajo

3. flujo flexible

Abreviatura de flex-direction y flex-wrap, el valor predeterminado es row nowrap

flujo flexible: &&

4. justificar el contenido

El atributo define la alineación del artículo en el eje principal.

.box {
    
    
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start (predeterminado): justificado a la izquierda
• extremo flexible: alinear a la derecha
• centro: centrado
• space-between: Justificado en ambos extremos, el espacio entre elementos es igual.
• Espacio alrededor: el espacio en ambos lados de cada elemento es igual. Por lo tanto, el intervalo entre elementos es dos veces mayor que el intervalo entre elementos y el borde.

5. alinear-elementos

Los atributos definen cómo se alinean los elementos en el eje transversal.

.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.

6. alinear contenido

Define la alineación de varias líneas de eje. Si el proyecto tiene solo una línea principal, este atributo no tiene ningún efecto

• alinear-contenido: flex-start | extremo flexible | centro | espacio entre | espacio alrededor | tramo
• estirar (predeterminado): el eje se cubre con todo el eje transversal
• espacio entre: alinear 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
• flex-start: alinear con el punto inicial del eje transversal

flexión horizontal y verticalmente centrada:

.container{
    
    
            margin: 30px;
            height: 100%;
            width:100%;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
    
    
           
            background: red;
        }

Punto de conocimiento esencial: CSS está centrado, ¿no lo has recordado?