diseño flexible
1.1 Diseño tradicional sobre diseño flexible
Disposición tradicional
- Buena compatibilidad
- Diseño engorroso
- Limitaciones, ya no es un buen diseño en el terminal móvil
flexión diseño flexible
- Operación conveniente, conjunto de diseño simple y una amplia gama de aplicaciones móviles
- La compatibilidad con el navegador de PC es deficiente
- IE 11 o inferior, no compatible o solo parcialmente compatible
Sugerir:
- Si se trata de un diseño de página del lado de la PC, todavía tenemos un diseño tradicional.
- Si se trata de un terminal móvil o un diseño de página del lado de la PC que no considera problemas de compatibilidad, todavía usamos un diseño flexible flexible
1.2 Primera experiencia
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 排列 */
justify-content: space-around;
}
div span {
/* width: 150px; */
height: 100px;
background-color: purple;
margin-right: 5px;
/* 各占1排列好 */
flex: 1;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
2. principio de diseño flexible
2.1 Principio de diseño
Flex es la abreviatura de caja flexible, que significa "diseño flexible". Se utiliza para proporcionar la máxima flexibilidad para el modelo de caja. Cualquier contenedor puede designarse como diseño flexible.
-
Cuando configuramos el diseño flexible para el cuadro principal, 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 codicioso = diseño flexible
utiliza elementos de diseño Flex, llamados contenedor Flex (contenedor flexible), denominado "contenedor", todos sus elementos secundarios se denominan automáticamente miembros del contenedor, denominados elementos Flex ( elemento flexible), denominado "elemento". -
En la experiencia, div es el contenedor padre flexible.
-
En la experiencia, span es el elemento flexible del subcontenedor.
-
Los subcontenedores pueden disponerse horizontal o verticalmente.
Resuma el principio del diseño flexible:
agregando atributos flexibles al cuadro principal para controlar la posición y la disposición de los cuadros secundarios
3. Atributos comunes del elemento principal de diseño flexible
3.1 atributos principales comunes
Los siguientes 6 atributos se establecen en el elemento padre
- flex-direction: establece la dirección del eje principal
- justify-content: establece la disposición de los subelementos en el eje principal
- flex-wrap: establece si el elemento secundario se ajusta
- align-content: establece la disposición de los subelementos en el eje transversal (multilínea)
- alinear-elementos: establece la disposición de los subelementos en el eje transversal (línea única)
- flex-flow: atributo compuesto, equivalente a configurar flex-direction y flex-wrap al mismo tiempo
3.2 flex-direction establece la dirección del eje principal main
Eje principal y eje lateral
En el diseño flexible, se divide en dos direcciones, el eje principal y el eje lateral. Los mismos nombres son: fila y columna, eje xy eje y
- La dirección del eje principal predeterminada es la dirección del eje x, horizontalmente a la derecha
- La dirección del eje lateral predeterminada es la dirección del eje y, horizontalmente hacia abajo
2. Valor de atributo
La propiedad flex-direction determina la dirección del eje principal (es decir, la dirección de disposición de los elementos).
Nota: El eje principal y el eje lateral cambiarán, dependiendo de quién esté establecido como eje principal en la flex-direction. , y el resto es el eje lateral. Y nuestros elementos secundarios están organizados a lo largo del eje principal.
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 默认的主轴是 x 轴行 row,写和没写是一样的，那么y轴就是侧轴 */
/* flex-direction: row; */
/* 简单理解 翻转 */
/* flex-direction: row-reverse; */
/* 我们可以把我们的主轴设置 y轴 那么 x 轴就成了侧轴 */
flex-direction: column;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
3.3 justify-content establece la disposición de los subelementos en el eje principal
El atributo justify-content define la alineación del elemento en el eje principal.
Nota: Antes de usar este atributo, asegúrese de determinar qué eje principal es
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/* 默认的主轴是 x 轴 row */
flex-direction: row;
/* justify-content: 是设置主轴上子元素排列方式*/
/* 顺序不变，向左边对齐，默认 */
justify-content: flex-start;
/* 顺序不变，向右边对齐 */
justify-content: flex-end;
/* 让我们子元素居中对齐 */
justify-content: center;
/* 平分剩余空间 */
justify-content: space-around;
/* 先两边贴边，在分配剩余的空间 */
justify-content: space-between;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
3.4 flex-wrap Establece si el elemento hijo se envuelve o no ⭐
De forma predeterminada, los elementos se organizan en una línea (también conocida como el "eje"), definida por el atributo flex-wrap, y el diseño flexible no se ajusta de forma predeterminada.
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* flex布局中，默认的子元素是不换行，如果装不开，会缩小子元素的宽度，放到父元素里面 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
3.5 alinear elementos establece la disposición de subelementos en el eje transversal (línea única) ⭐
Este atributo se utiliza para controlar la disposición de los subelementos en el eje lateral (el valor predeterminado es el eje y) cuando el subelemento es un solo artículo
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 默认的主轴是 x 轴 row */
justify-content: center;
/* 我们需要一个侧轴居中 */
align-items: center;
/* 拉伸，但是子盒子不要给高度，否则无变化 */
align-items: stretch;
/* 如果主轴变换为主轴有不同 */
}
div span {
width: 150px;
height: 100px;
background-color: purple;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
3.6 align-content establece la disposición de subelementos en el eje transversal (múltiples filas)
Establezca la disposición de los niños en el eje transversal y utilícela de manera inteligente cuando los niños parezcan ajustarse (varias filas). No hay efecto en una sola fila.
<style>
div {
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
/* align-content: flex-start; */
/* 居中 */
/* align-content: center; */
/* 一个贴上，一个贴下 */
/* align-content: space-between; */
/* 上面一个距离，下面一个距离 */
align-content: space-around;
}
div span {
width: 150px;
height: 100px;
background-color: purple;
color: #fff;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
3.6 La diferencia entre alinear-contenido y alinear-elementos
- align-items es adecuado para una sola línea, solo alineación superior, alineación inferior, centrado y estiramiento
- align-content es adecuado para el ajuste de línea (varias líneas) (no válido para una sola línea). Puede configurar la alineación, alineación inferior, centrado, estiramiento e incluso distribución del espacio restante.
- El resumen es encontrar elementos de alineación en una sola línea y encontrar contenido de alineación en varias líneas
3. Atributos comunes del elemento principal de diseño flexible
3.7 flujo flexible
La propiedad flex-flow es una propiedad compuesta de las propiedades flex-direction y flex-wrap
flujo flexible: envoltura de fila;
- flex-direction: establece la dirección del eje principal
- justify-content: establece la disposición de los subelementos en el eje principal
- flex-wrap: establece si el elemento secundario se ajusta
- align-content: establece la disposición de los subelementos en el eje transversal (multilínea)
- flex-flow: atributo compuesto, equivalente a configurar flex-direction y flex-wrap al mismo tiempo
4. Atributos comunes de los subelementos de diseño flexible
- El número de copias ocupadas por subelementos flexibles
- align-self controla la disposición de los propios niños en el eje transversal.
- El atributo de orden define el orden de los hijos (orden de adelante hacia atrás)
4.1 propiedad flexible
El atributo flex define el espacio restante asignado por el subelemento y usa flex para indicar cuántas copias toma .
.item {
flex: <number>; /* default 0 */
}
<style>
section {
display:flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
width: 100px;
height: 150px;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
Resultado:
¿cómo entender?
Flex en realidad significa comer pastel
4. Atributos comunes de los elementos de diseño flexible
4.2 align-self controla la disposición de los propios niños en el eje lateral
El atributo align-self 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, lo que significa que el atributo align-items del elemento padre se hereda. Si no hay un elemento padre, es equivalente a stretch.
span:nth-child(2) {
/* 设置自己在侧轴上的排列方式*/
align-self: flex-end;
}
4.3 El atributo de orden define el orden de los artículos.
Cuanto menor sea el valor, mayor será la disposición, el valor predeterminado es 0.
Nota: No es lo mismo que el índice z.