Tabla de contenido
Introducción
¿Qué es el diseño flexible?
Flex es la abreviatura de Flexible Box, también conocido como diseño de caja flexible.
El diseño flexible consta de:
- contenedor flexible(
flex container) - elemento flexible(
flex items) - Husillo (
main axis) - eje transversal (
cross axis)
El papel del diseño flexible
Antes de que apareciera el diseño flexible, la forma de diseño de la página web era flujo estándar, flotante, posicionamiento, etc. Es relativamente problemático resolver problemas más complejos.
Mientras que flexel diseño puede:
- Escalado automático
- Diseñe estructuras de diseño flexibles y receptivas más fácilmente
- Control preciso y flexible sobre el diseño de cajas a nivel de bloque
- Disponible en PC y móvil
Propiedades del contenedor flexible (elemento principal)
Primero defina el contenedor flexible antes de usar el diseño flexible.
display:flex;
Después de definir el contenedor Flex, puede usar las propiedades correspondientes para cambiar el diseño de los subelementos, de modo que los subelementos se puedan comprimir o estirar automáticamente.
Propiedades correspondientes:
1. justify-content 主轴元素对齐方式
2. align-items 交叉轴元素对齐方式
3. flex-direction 设置主轴方向
4. flex-wrap 主轴一行满了换行
5. align-content 交叉轴行对齐方式
6. flex-flow 同时设置 flex-direction和 flex-wrap属性
1. justificar el contenido
Las propiedades del contenedor justify-contentpueden establecer la alineación de los elementos secundarios en la dirección del eje principal . (Recuerde definir primero el contenedor display:flex;)
justify-content: center;//居中对齐
justify-content: space-between;//间距在子元素之间
justify-content: space-evenly;//主轴方向所有地方的间距都相等
justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
código:
<!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>主轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
2. alinear elementos
Las propiedades del contenedor align-itemspueden establecer la alineación de los elementos secundarios en la dirección del eje transversal .
A partir de esto podemos establecer las propiedades del contenedor yjustify-content que se centren, para que los elementos queden perfectamente centrados.align-items
align-items: center;//居中
align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)
align-items: flex-start;//将子元素在容器顶部对齐
align-items: flex-end;//将子元素在容器底部对齐
código:
<!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>交叉轴对齐方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
/* align-items: stretch; */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
margin: auto;
border: 1px solid #000;
}
.father div {
/* 如果不设置宽，由内容撑开 */
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
3. dirección flexible
Las propiedades del contenedor flex-directionpueden cambiar la dirección del eje principal del diseño flexible. La dirección del eje principal de flexión por defecto es la dirección horizontal derecha. Si modifica la dirección del eje principal, la dirección del eje transversal cambiará en consecuencia.
flex-direction: column;//主轴方向为垂直方向（从上到下）
flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）
flex-direction: row;//主轴方向为水平方向（从左到右）
flex-direction: row-reverse;//主轴方向为水平方向（从右到左）
Para lograr el centrado vertical después de modificar la dirección del eje:
display:flex;
flex-direction: column;
justify-content: center;
4. envoltura flexible
Después de definir el contenedor flex, si demasiados elementos secundarios superan el ancho del eje principal, los elementos secundarios del contenedor se estirarán automáticamente.
como:
<!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>弹性盒子换行</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 500px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
Solución: flex-wraplas propiedades del contenedor permiten que los elementos secundarios que exceden la dirección del eje principal del contenedor se muestren en una nueva línea.
flex-wrap: nowrap;//默认值，不换行
flex-wrap: wrap;//换行，从上到下
flex-wrap: wrap-reverse;//换行，从下到上
5. alinear contenido
Las propiedades del contenedor align-contentpueden ajustar la alineación de las filas de subelementos ( primero debe establecer el salto de línea ).
align-content: center;//居中对齐
align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
align-content: space-between;//间距在子元素之间
Las propiedades de los tres primeros son las mismas que las de la alineación del eje principal, por lo que no las repetiré aquí.
align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)
6. flujo flexible
flex-flowLa propiedad flex-directiones flex-wrapuna propiedad abreviada para configurar las propiedades y .
flex-flow: row wrap;
Propiedades de elemento flexible (elemento secundario)
Podemos establecer las propiedades correspondientes para hacer que los elementos secundarios directos del contenedor flexible se conviertan en elementos elásticos (flexibles). ( Defina el contenedor flexible primero antes de usar el diseño flexible ) .
Propiedades correspondientes:
1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order
1. crecimiento flexible
Use flex-growatributos para definir la relación de zoom de los elementos secundarios dentro del cuadro flexible (cómo los elementos secundarios asignan el espacio restante del elemento principal cuando la suma del ancho de todos los elementos secundarios es menor que el ancho del elemento principal).
<!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>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
/* 没有设置宽度 */
background:red;
flex-grow: 1;
}
.box2{
background:blue;
flex-grow: 2;
}
.box3{
background:orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
2. flexión-encogimiento
Utilice flex-shrinkatributos para definir la relación de contracción de los elementos secundarios dentro del cuadro flexible (cómo los elementos secundarios reducen su propio ancho cuando la suma de todos los anchos de los elementos secundarios es mayor que el ancho del elemento principal).
<!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>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
flex-shrink: 1;
}
.box2{
width: 100px;
background:blue;
flex-shrink: 2;
}
.box3{
width: 100px;
background:orange;
flex-shrink: 1;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
3. base flexible
Use flex-basisel atributo para establecer el ancho del elemento secundario, el valor predeterminado es automático (el efecto es el mismo width, la prioridad widthes mayor , incluso si widthse mostrará más tarde flex-basis).
4. flexionar
Utilice el atributo flex para establecer los tres atributos de crecimiento flexible, reducción flexible y base flexible al mismo tiempo. El atributo flexible es un atributo compuesto.
Las aplicaciones prácticas generalmente usan atributos compuestos.
gramática:
flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;
5. alinearse
Utilice align-selfatributos para establecer la alineación de elementos de elementos secundarios.
Nota: align-selfLa propiedad anula la alineación establecida por la align-itemspropiedad .
<!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>
.father{
display:flex;
width:200px;
height:150px;
align-items: center;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 50px;
background:red;
align-self: flex-start;
}
.box2{
width: 100px;
height: 50px;
background:blue;
}
.box3{
width: 100px;
height: 50px;
background:orange;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
6. orden
Utilice orderatributos para definir el orden de clasificación de los elementos secundarios.
<!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>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
order: 2;
}
.box2{
width: 100px;
background:blue;
order: 1;
}
.box3{
width: 100px;
background:orange;
order: 3;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
