1. Principio de diseño flexible
2. Atributos comunes del elemento principal de diseño flexible
Atributos principales comunes :
1) flex-direction establece la dirección del eje principal
Eje principal y eje lateral :
2) justify-content establece la disposición de los subelementos en el eje principal
3) Si el elemento secundario de envoltura flexible se ajusta
4) align-items establece la disposición de subelementos en el eje lateral (línea única)
5) align-content establece la disposición de subelementos en el eje lateral (múltiples filas)
La diferencia entre align-content y align-items :
6） flujo flexible
7) Resumen
3. Atributos comunes de los subelementos de diseño flexible
1) Número de copias ocupadas por subelementos flexibles
Caso :
<html>
<head>
<style>
section {
display: flex;
width: 60%;
height: 150px;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
</body>
</html>
2) align-self controla la disposición de los propios niños en el eje lateral.
3) El atributo de orden define el orden de los subelementos (antes y después del pedido)
Materiales de aprendizaje :
https://www.bilibili.com/video/BV1N54y1i7dG?p=3