1 expérience de mise en page flexible

Disposition traditionnelle et disposition flexible :

mise en page traditionnelle	flex disposition élastique
bonne compatibilité	Facile à utiliser, mise en page extrêmement simple et large éventail d'applications mobiles
mise en page encombrante	La prise en charge du navigateur PC est médiocre
Limitations, pas de bonne mise en page côté mobile	IE 11 ou inférieur, pas de support ou uniquement un support partiel

Principe de mise en page 2 flex

flex est l'abréviation de flexible Box, qui signifie « mise en page élastique », qui est utilisée pour offrir une flexibilité maximale au modèle de boîte, et tout conteneur peut être désigné comme une mise en page flexible .

floatUne fois la mise en page flexible définie pour la boîte parent, les attributs clear, et des éléments enfants vertical-align deviendront invalides.
flex layout = flex layout = flex box layout = flex box cloth = flex layout

Les éléments qui adoptent une disposition Flex sont appelés un conteneur flexible ou « conteneur » en abrégé. Tous ses éléments enfants deviennent automatiquement des membres du conteneur, appelés éléments flexibles (élément flexible), appelés "éléments"

Les éléments flexibles eux-mêmes peuvent également devenir des conteneurs, appelés sous-conteneurs. Ensuite, le niveau supérieur est appelé le conteneur parent
Les sous-conteneurs peuvent être disposés horizontalement ou verticalement
Résumé du principe : contrôlez la position et la disposition des boîtes enfants en ajoutant des attributs flexibles à la boîte parent

3 attributs communs des parents de mise en page flex

3.1 Attributs parents communs

Les 6 attributs suivants sont définis sur l'élément parent

flex-direction: Définir la direction de l'axe
justify-content: Définir la disposition des éléments enfants sur l'axe principal
flex-wrap: Définissez si l'élément enfant s'enroule
align-content: Définit la disposition des éléments enfants sur l'axe transversal (lignes multiples)
align-items: Définit la disposition des éléments enfants sur l'axe transversal (ligne unique)
flex-flow: attribut composite, qui équivaut à définir flex-direction et flex-wrap

3.2 flex-direction Définir la direction de l'axe principal

flex-direction Définissez la direction de l'axe principal.

arbre principal et arbre latéral

Dans la mise en page flexible, il est divisé en deux directions : l'axe principal et l'axe latéral, et les noms sont en même temps : ligne et colonne, axe x et axe y.

La direction de l'axe par défaut est la direction de l'axe x, horizontale vers la droite
La direction de l'axe latéral par défaut est la direction de l'axe y, verticalement vers le bas

valeur d'attribut

flex-direction L'attribut détermine la direction de l'axe principal (c'est-à-dire la direction dans laquelle les éléments sont disposés)
. Remarque : l'axe principal et l'axe latéral changeront en fonction de flex-direction celui qui est défini comme axe principal, et l'autre est le côté axe. Les éléments enfants sont disposés le long de l'axe principal

valeur d'attribut	illustrer
ligne	Par défaut, de gauche à droite
ligne-inverse	de droite à gauche
colonne	de haut en bas
colonne-inverse	de bas en haut

justify-content Définir la disposition des sous-éléments sur l'axe principal

Avant d'utiliser cet attribut, assurez-vous de déterminer quel axe est

valeur d'attribut	illustrer
flex-start	Valeur par défaut, commencer par la tête, si l'axe principal est l'axe des x, puis aller de gauche à droite
extrémité flexible	Trier à partir de la fin
centre	Aligner dans l'axe principal (si l'axe principal est x, il sera centré horizontalement)
espace autour	Diviser équitablement l'espace restant
l'espace entre	Collez d'abord les deux côtés, puis divisez l'espace restant de manière égale (important)

flex-wrap Définir si l'élément enfant s'enroule

Par défaut, les éléments sont disposés sur une seule ligne (alias axe)

flex-wrap Définition d'attribut, la valeur par défaut dans la mise en page flexible n'est pas un saut de ligne

Remarque : Si la boîte parent ne peut pas être ouverte sur une seule ligne, la largeur de l'élément enfant sera réduite afin qu'il soit toujours affiché sur une seule ligne.

valeur d'attribut	illustrer
maintenant	par défaut, pas de saut de ligne
envelopper	nouvelle ligne
wrap-inverse	saut de ligne inversé

align-items Définit la disposition des éléments enfants sur l'axe transversal (ligne unique)

Cette propriété contrôle la disposition des sous-éléments sur l'axe latéral (axe y par défaut) et est utilisée lorsque le sous-élément est un élément unique

valeur d'attribut	illustrer
flex-start	de haut en bas
extrémité flexible	de bas en haut
centre	presser ensemble (centrée verticalement)
extensible	Étirer (par défaut)

align-content Définit la disposition des éléments enfants sur l'axe transversal (multiligne)

Définit la disposition des sous-éléments sur l'axe latéral et ne peut être utilisé que lorsque le sous-élément apparaît dans une nouvelle ligne (plusieurs lignes), il n'a aucun effet sous une seule ligne

valeur d'attribut	illustrer
fléchir	Par défaut, commencer l'alignement à la tête de l'axe transversal
extrémité flexible	Commencer l'alignement à la fin de l'axe transversal
centre	Afficher au milieu de l'axe latéral
espace autour	Les enfants divisent également l'espace restant sur l'axe transversal
l'espace entre	Les éléments enfants sont d'abord distribués aux deux extrémités sur l'axe latéral, puis divisent l'espace restant de manière égale
extensible	Définissez la hauteur de l'élément enfant pour diviser arbitrairement la hauteur de l'élément parent

La différence entre align-content et align-items

align-items Applicable aux boîtiers à une seule ligne, uniquement alignement haut-bas, centrage et étirement
align-content Applicable au cas d' une nouvelle ligne (lignes multiples) (invalide dans le cas d'une seule ligne), vous pouvez définir des valeurs d'attribut telles que l'alignement supérieur, l'alignement inférieur, le centrage, l'étirement et la division égale de l'espace restant

flux flexible

flex-flow L'attribut est un attribut composé de flex-direction et flex-wrap d'attribut

flex-flow: row wrap;

flex-direction: Définir la direction de l'axe
justify-container: Définir la disposition des éléments enfants sur l'axe principal
flex-wrap: Définissez si l'élément enfant s'enroule
align-content: Définit la disposition des éléments enfants sur l'axe transversal (lignes multiples)
align-items: Définit la disposition des éléments enfants sur l'axe transversal (ligne unique)
flex-flow : attribut composite, qui équivaut à définir flex-direction et flow-wrap

4 attributs communs des enfants de mise en page flexible

Parts des éléments flexibles
align-self contrôle l'alignement de l'enfant lui-même sur l'axe transversal
L'attribut order définit l'ordre dans lequel les sous-éléments sont disposés (avant et après)

flex L'attribut définit le sous-élément pour allouer l'espace restant , qui est utilisé pour flex indiquer le nombre de copies qu'il occupe. flex La valeur peut être un entier ou un pourcentage

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

Par exemple, pour diviser une boîte de manière égale, la largeur (hauteur) du sous-élément n'est pas donnée, puis des attributs sont définis pour chaque sous-élément :flex: 1

align-self Contrôle la façon dont les enfants s'organisent sur l'axe transversal

align-self Les attributs permettent aux éléments individuels d'avoir un alignement différent des autres éléments, remplaçant align-items les attributs. La valeur par défaut est auto, ce qui signifie qu'elle hérite align-items des attributs de l'élément parent, et s'il n'y a pas d'élément parent, elle équivaut à strech.

valeur d'attribut	décrire
`auto`	La valeur par défaut hérite de la valeur align-items de la boîte parent.
`strech`	Les éléments sont étirés pour s'adapter au conteneur.
`center`	L'élément est au centre du conteneur
`flex-start`	élément au début du conteneur
`flex-end`	l'élément est à la fin du conteneur

order La propriété définit l'ordre dans lequel les éléments sont triés

Plus la valeur est petite, plus la disposition est élevée, la valeur par défaut est 0

Remarque : z-index pas la même chose que

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
            /* 我们想只让3号盒子下来底侧 */
        }
        
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        
        div span:nth-child(2) {
            /* 默认是0   -1比0小所以在前面  */
            order: -1;
        }
        
        div span:nth-child(3) {
            align-self: flex-end;
        }
    </style>
</head>

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

5 dégradés de couleurs

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 600px;
            height: 200px;
            /* 背景渐变必须添加浏览器私有前缀 */
            /* background: -webkit-linear-gradient(left, red, blue); */
            /* background: -webkit-linear-gradient(red, blue); */
            background: -webkit-linear-gradient(top left, red, blue);
        }
    </style>
</head>

<body>
    <div></div>
</body>

[HTML+CSS] Mise en page flexible pour le développement Web mobile