Objetivo de aprendizaje: Caso de diseño flexible
- Más información sobre el diseño flexible
- Utilice un diseño flexible
- caso de imitación
1. Diseño flexible (qué es un diseño flexible)
-
Caja flexible La
caja flexible consta de un contenedor flexible (contenedor flexible) y un subelemento flexible (elemento flexible).
-
Contenedor flexible: es necesario agregar el elemento principal del diseño flexible;
-
Elemento hijo flexible: un elemento hijo en un contenedor de diseño flexible, también llamado elemento;
- Eje principal: en diseño flexible, usaremos la dirección horizontal o vertical especificada por el atributo como eje principal [eje X/Y];
- Eje transversal: otro eje perpendicular al eje transversal (puede entenderse como la línea vertical del eje principal)
Ejemplo de diseño flexible
<body>
<style>
.box {
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
Agregar diseño flexible al elemento principal
Código clave: pantalla: flex;
<body>
<style>
.box {
display: flex;
/*将父元素改为弹性容器 flex*/
height: 400px;
background-color: #000;
}
.box div {
/* 使用子代选择器 */
width: 400px;
height: 100px;
background-color: blue;
/* 设置背景 */
color: white;
font-size: 30px;
}
</style>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</div>
</body>
resultado de la operación
2. Propiedades del diseño flexible
1. Propiedades que actúan sobre el contenedor principal.
Este formulario es muy importante y no es necesario memorizarlo, ¡pero debes leerlo más! ¡mira más! ¡mira más!
| valor | describir |
|---|---|
| dirección flexible | Especificar la disposición de los elementos secundarios en el contenedor flexible. |
| envoltura flexible | Establezca si los elementos secundarios de la caja flexible deben ajustarse cuando excedan el contenedor principal. |
| flujo flexible | Abreviatura de dirección flexible y envoltura flexible |
| justificar-contenido | Establezca la alineación de los elementos de flexbox en la dirección del eje principal (eje horizontal) |
| alinear elementos | Coloque el elemento flexbox en el eje lateral (alineación en la dirección del eje vertical) |
| alinear contenido | Modifique el comportamiento del atributo flex-wrap, similar a align-items, pero en lugar de configurar la alineación del elemento , establezca la alineación de la línea |
1-1 atributo de dirección flexible
El atributo flex-**direction se utiliza para especificar la disposición de los subelementos en el contenedor flexible, que determina la dirección del eje principal.
| valor | describir |
|---|---|
| fila (predeterminada) | El eje principal es horizontal y el punto de partida está en el extremo izquierdo. |
| fila inversa | El eje principal es horizontal y el punto de partida está en el extremo derecho. |
| columna | El eje principal es vertical y el punto de partida está en el borde superior. |
| columna-inversa | El eje principal es vertical y el punto de partida está en el borde inferior. |
1-2 atributo de envoltura flexible
La propiedad flex-wrap especifica si el contenedor flexible es de una sola fila o de varias filas, y la dirección del eje horizontal (eje X) determina la dirección en la que se apilan las nuevas filas. El atributo flex-wrap establece si los elementos secundarios del cuadro flexible se ajustan cuando exceden el contenedor principal.
| valor | describir |
|---|---|
| nowrap (predeterminado) | Cuando el ancho del contenedor no sea suficiente, cada artículo se comprimirá en una fila. |
| envoltura | Envuelva las líneas para que la primera línea esté en la parte superior del contenedor. |
| envoltura inversa | Ajuste de línea y la primera línea está en el fondo del contenedor. |
I. valor de nowrap (predeterminado)
II valor de envoltura
wrap envuelve la línea y la primera línea está en la parte superior del contenedor
III valor inverso de envoltura
Ajuste de línea y la primera línea está en el fondo del contenedor.
1-3 atributo de flujo flexible
Flex-flow es la abreviatura de flex-direction y flex-wrap. El valor predeterminado es: flex-flow: row nowrap; (más comúnmente utilizado)
- dirección flexible: fila (predeterminado)|fila-reversa|columna|columna-reversa;
- flex-wrap:nowrap (predeterminado)|wrap|wrap-reverse;
1-4 atributo de justificación de contenido
| valor | describir |
|---|---|
| inicio flexible (predeterminado) | El elemento hijo está en el punto inicial del eje principal. |
| extremo flexible | El elemento hijo está al final del eje principal. |
| centavo | centro |
| espacio entre | En ambos extremos, el espacio entre elementos es igual. (El primer y último artículo, sin separación del contenedor principal) |
| espacio alrededor | Cada elemento está igualmente espaciado en ambos lados y el espacio entre elementos es dos veces mayor que el espacio entre el elemento y el borde (el principio y el final tienen un cierto espacio desde el borde del contenedor principal) |
1-5 propiedad .align-items
Coloque el elemento flexbox en el eje lateral (alineación en la dirección del eje vertical)
| valor | describir |
|---|---|
| inicio flexible | Alineación del punto inicial del eje transversal |
| extremo flexible | Alineación del punto final del eje transversal |
| centavo | Alinear el punto medio del eje transversal. |
| base | La alineación base de la primera línea de texto del elemento (la altura y el tamaño de fuente del texto afectarán la línea base de cada línea). |
| estiramiento (predeterminado) | Si el elemento no tiene una altura establecida o está configurado en automático, ocupará toda la altura del contenedor. |