Comparaison de la disposition traditionnelle et de la disposition flexible
Disposition traditionnelle
- Bonne compatibilité
- Disposition encombrante
- Limitations, ne peut pas être bien présenté sur le terminal mobile
mise en page flexible
- Fonctionnement pratique, disposition extrêmement simple
- Mauvais support sur PC
Si vous ne tenez pas compte de la compatibilité, vous pouvez utiliser la mise en page flex sur le PC.
Principe de la disposition flexible
flex: disposition flexible, utilisée pour fournir une flexibilité maximale pour les modèles en boîte, tout conteneur peut être désigné comme disposition flexible
Un élément avec une disposition flexible est appelé un conteneur, et tous ses éléments enfants deviendront automatiquement membres du conteneur, appelés éléments flexibles.
Précautions
- Lorsque notre boîte parent est définie sur la mise en page flexible, les attributs float clear et vertical-align de l'élément enfant seront invalides
- Disposition flexible = disposition flexible = disposition de boîte flexible = disposition de boîte flexible = disposition flexible
principe
Contrôlez la position et la disposition des boîtes enfants en ajoutant des attributs flex à la boîte parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* justify-content属性定义了项目在主轴上的对齐方式。 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
propriété parent flex
flex-direction: définir la direction de l'axe principal
Dans la disposition flex, il est divisé en un axe principal et un axe latéral
L'axe principal par défaut est horizontal à droite dans la direction x
L'axe latéral par défaut est l'axe y horizontalement vers le bas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
flex-direction: row;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: space-around;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
justify-content: définir la disposition des éléments enfants sur l'axe principal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
/* 设置主轴方向 */
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
flex-direction: row;
border-radius: 10px;
justify-content: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
flex-wrap: contrôle si les éléments enfants s'enroulent
Dans la mise en page flexible, les éléments enfants de l'élément flexible ne seront pas enveloppés, seront toujours affichés sur une ligne et la largeur sera plus étroite.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 决定子元素是否换行 */
flex-wrap: wrap;
}
span {
width: 100px;
height: 100px;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-items: définissez la disposition des sous-éléments sur l'axe transversal (applicable à une seule ligne)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 设置侧轴上的对齐方式 */
align-items: center;
}
span {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
align-content: définit l'alignement des éléments enfants sur l'axe transversal (convient pour plusieurs lignes)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
/* 为父盒子添加弹性盒属性 */
display: flex;
width: 600px;
height: 600px;
margin: auto;
border: 5px solid red;
border-radius: 10px;
/* 设置主轴上子元素的排列方式 */
justify-content: center;
/* 决定子元素是否换行 */
flex-wrap: wrap;
/* 设置侧轴上的对齐方式 */
align-content: space-between;
}
span {
width: 180px;
height: 180px;
text-align: center;
line-height: 100px;
font-size: 700;
background-color: royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
La différence entre align-items et align-content
flex-flow
Flex-flow est un attribut composite de flex-direction et flex-wrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
/* flex-flow是flex-direction属性及flex-wrap属性的复合属性 */
flex-flow: row wrap;
width: 600px;
height: 600px;
margin: auto;
border: 1px solid red;
border-radius: 15px;
}
span {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
text-align: center;
line-height: 200px;
font-weight: 700;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</section>
</body>
</html>
propriétés enfant flex
L'attribut flex définit l'espace restant alloué par le sous-élément et utilise flex pour indiquer le nombre de copies qu'il prend.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 80%;
height: 400px;
border: 8px solid red;
border-radius: 20px;
margin: auto;
}
section span:nth-of-type(1) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: purple;
}
section span:nth-of-type(2) {
/* flex属性定义子项目分配的剩余空间，用flex表示占多少份数 */
flex: 1;
height: 400px;
border-radius: 50%;
background-color: red;
}
section span:nth-of-type(3) {
width: 200px;
height: 400px;
border-radius: 50%;
background-color: blue;
}
</style>
</head>
<body>
<section>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
align-self: contrôle la disposition des enfants sur l'axe transversal
L'attribut order définit l'ordre des sous-éléments
Plus la valeur est petite, plus le classement est élevé, la valeur par défaut est 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: flex;
width: 60%;
height: 600px;
border: 8px solid red;
border-radius: 10px;
}
section span {
width: 33.3%;
height: 400px;
border-radius: 50%;
background-color: red;
font-weight: 700;
line-height: 400px;
text-align: center;
color: black
}
section span:nth-of-type(3) {
/* 定义子项目的排列顺序 */
order: -1;
/* 定义子项在侧轴上的排列方式 */
align-self: flex-end;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
</body>
</html>
