Disposition Flex

1 Principes de mise en page

flex- Oui.flexible BoxAbréviation de,Signifie“Disposition élastique”, Conçu pour offrir une flexibilité maximale aux modèles en cartouche ,.N'importe quel conteneur peut être spécifié commeflexMise en page.

• Quand nous avons mis la boîte des pèresflexAprès la mise en page,Subelementfloat、vertical-align Les données seront invalidées .
• Nom：Disposition télescopique = Disposition élastique = Disposition de la boîte télescopique = Disposition de la boîte élastique = flexMise en page

AdoptionFlexÉléments de mise en page,AppeléFlexConteneur（flex Conteneur）,Abréviation conteneur.Tous ses éléments enfants deviennent automatiquement membres du conteneur,AppeléflexProjets（flex item）,Abréviations“Projets”

Résumé: En ajoutant à la boîte mèreflexPropriétés,Pour contrôler la position et la disposition des sous - boîtes.

2 flexPropriétés communes des parents de mise en page

2.1 Propriétés communes des parents

• flex-direction：Définir l'orientation de la broche
• justify-content：Définir la disposition des sous - éléments sur la broche
• flex-warp：Définir si l'élément enfant s'enroule ou non
• align-content：Définir la disposition des sous - éléments sur l'axe latéral（Plusieurs lignes）
• allign-items：Définir la disposition des sous - éléments sur l'axe latéral（Une seule ligne）
• flex-flow：Propriétés composites,C'est l'équivalent du réglage simultanéflex-directionEtflexwarp

2.2 flex-directionDéfinir l'orientation de la broche

2.2.1 Axes principaux et latéraux

• Orientation par défaut de la broche：XAxe = Niveau
• Direction par défaut de l'axe latéral ：YAxe = Verticalement vers le bas

Valeur de l'attribut	Description
row	Par défaut de gauche à droite
row-reverse	De droite à gauche
column	De haut en bas
column-reverse	De bas en haut

 div {
    
	width: 800px;
    height: 200px;
    background-color: pink;
    /* Ajouter au parentflexPropriétés */
    display: flex;
    /* La broche par défaut est rowHorizontal(Par défaut),columnVertical */
    flex-direction: column-reverse;
}

div span {
    
    width: 150px;
    height: 100px;
    background-color: yellow;
}

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

2.3 justify-content Définir la disposition des sous - éléments sur la broche

justify-content La propriété définit l'alignement du projet sur la broche

Attention!：Assurez - vous de déterminer quelle broche est avant d'utiliser cette propriété

Valeur de l'attribut	Description
flex-start	Par défaut Commencez par la tête. Si la broche estxAxe,De gauche à droite
flex-end	Disposition à partir de la queue
center	Centrer la broche （Si ouixAxe,Centre horizontal）
space-around	Diviser l'espace restant
space-between	Bordure des deux côtés d'abord,Diviser l'espace restant（Important）

div {
    
	width: 800px;
    height: 200px;
    background-color: pink;
    /* Ajouter au parentflexPropriétés */
    display: flex;
    /* La broche par défaut est rowHorizontal(Par défaut),columnVertical */
    flex-direction: column-reverse;
    /* justify-content Définir la disposition des sous - éléments sur la broche */
    justify-content: center;
}

2.4 flex-warp Définir si l'élément enfant s'enroule ou non

Par défaut,Les projets sont alignés（Aussi connu sous le nom de：“Axe”）Allez..
Définition：flexLa mise en page par défaut ne s'enroule pas.

Si trop d'éléments ,Réduit la largeur du petit élément,Dans l'élément parent.

Valeur de l'attribut	Description
nowrap	Par défaut,Pas de nouvelles lignes
wrap	Nouvelle ligne

2.5 align-items Définir la disposition des sous - éléments sur l'axe latéral（Une seule ligne）

Cet attribut est l'enfant de contrôle sur l'axe latéral（Par défautyAxe）La disposition sur,Utilisé lorsque le Sous - élément est un seul élément.

Valeur de l'attribut	Description
flex-start	Par défaut De haut en bas
flex-end	De bas en haut
center	Serrez - vous et concentrez - vous.（Centre vertical）
stretch	Stretch（ Ne donnez pas de hauteur aux sous - boîtes ）

2.6 align-content Définir la disposition des éléments enfants sur l'axe latéral（Plusieurs lignes）

Définir la disposition des enfants sur l'axe latéral,Et ne peut être utilisé que pour les enfants Nouvelle ligne Situation（Plusieurs lignes）

Valeur de l'attribut	Description
flex-start	La valeur par défaut commence à s'arranger à la tête de l'axe latéral
flex-end	Début de l'alignement à l'arrière de l'axe latéral
center	Afficher au milieu de l'axe latéral
space-around	Les enfants divisent également l'espace restant sur l'axe latéral
space-between	Les sous - éléments sont répartis d'abord sur l'axe latéral, puis sur les deux extrémités , En divisant l'espace restant
strech	.Définir la hauteur de l'élément enfant diviser la hauteur de l'élément

div {
    
    width: 800px;
    height: 300px;
    background-color: pink;
    display: flex;
    /* Nouvelle ligne */
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
}

div span {
    
    width: 150px;
    height: 100px;
    background-color: yellow;
    margin: 10px;
}

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>

2.6 align-contentEtalign-itemsLa différence

• align-itemsPour une seule ligne,Alignement uniquement vers le Haut、Aligner vers le bas、Centre et étirement
• align-contentS'adapter à la nouvelle ligne（Plusieurs lignes）Dans les circonstances（Invalide en une seule ligne）,Vous pouvez définir l'alignement supérieur、Aligner vers le bas、Centre、 Valeurs d'attributs telles que l'élévation et la répartition égale de l'espace restant .

2.7 flex-flow

flex-flow La propriété estflex-directionEtflex-wrap Attribut composé de l'attribut.

Par exemple： Réglage de la broche et du saut de ligne （Changement de colonne）

flex-direction: column;
flex-wrap: wrap;

Ou

flex-flow: column wrap;

3 flexPropriétés communes des sous - éléments de mise en page

3.1 flex Propriétés

Définir les sous - projets allouer l'espace restant,AvecflexPour indiquer le nombre d'exemplaires.

.item {
    
	flex: <number>;		/* default 0 */
}

Par exemple：Fixation à gauche et à droite, Le milieu occupe tout l'espace restant

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;
    background-color: yellow;
}

section div:nth-child(3) {
    
    width: 100px;
    height: 150px;
    background-color: blue;
}

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

Trois boîtes en moyenne trois parts égales

section {
    
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div{
    
    flex: 1;
    text-align: center;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

4.2 align-self Contrôle la disposition des enfants sur l'axe latéral

align-self Les propriétés permettent aux éléments individuels d'être alignés différemment des autres éléments ,Couverturealign-itemsPropriétés.

La valeur par défaut estauto, Représente l'élément parent intégré align-itemsPropriétés,S'il n'y a pas d'élément parent,Est égal àstretch

section {
    
    display: flex;
    width: 60%;
    height: 150px;
    background-color: pink;
    margin: 0 auto;
}

section div {
    
    flex: 1;
    text-align: center;
}

section div:nth-child(3) {
    
    /*  Alignez - vous sur une position  */
    align-self: flex-end;
    background-color: yellow;
}

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>

4.3 order Les propriétés définissent l'ordre dans lequel les éléments sont disposés

Plus la valeur est petite,Plus on avance, plus on avance.,Par défaut0

Attention!：Etz-indexC'est différent

section div:nth-child(3) {
    
    flex: 1;
    order:-1;
}

Adresse de référence：https://www.bilibili.com/video/BV1N54y1i7dG