flex

01. Boîte élastique

flex( Boîte élastique 、 Boîte télescopique )

- Oui.CSS Un autre moyen de mise en page , Il est principalement utilisé pour compléter la mise en page de la page au lieu de flotter ;
flex Peut rendre l'élément élastique , Permet aux éléments de changer en fonction de la taille de la page ;

1. Récipient élastique ：

Pour utiliser une boîte élastique , Vous devez d'abord définir un élément comme un conteneur élastique
Nous passons display Pour régler le conteneur élastique

display:flex Set toNiveau du bloc Récipient élastique

display:inline-flex Set toEn ligne Un récipient élastique pour

2. Élément élastique

L'élément enfant du récipient élastique est l'élément élastique （ Terme élastique ）
L'élément élastique peut être à la fois un récipient élastique

flex-direction Indique la disposition des éléments élastiques dans le conteneur .

Valeurs facultatives：

row
Par défaut, Les éléments élastiques sont disposés horizontalement dans le récipient （ Gauche à droite ） - Broche De gauche à droite
row-reverse

Les éléments élastiques sont disposés horizontalement en sens inverse dans le récipient （ Droite à gauche ） - Broche De droite à gauche
column

Disposition longitudinale des éléments élastiques （ De haut en bas ）
column-reverse

Disposition longitudinale des éléments élastiques （ De bas en haut ）

Broche： La direction dans laquelle les éléments élastiques sont disposés est appelée la broche .

Axe latéral： La direction perpendiculaire à l'axe principal est appelée axe latéral .

Propriétés de l'élément élastique ：

flex-grow Indique le facteur d'étirement de l'élément élastique ：

Lorsque l'élément parent a plus d'espace , Comment les éléments enfants s'étirent ;
Espace restant de l'élément parent , Sera réparti proportionnellement ;

flex-shrink Spécifiez le coefficient de retrait de l'élément élastique ：

.Lorsque l'espace dans l'élément parent n'est pas suffisant pour accueillir tous les éléments enfants , Comment rétrécir les éléments enfants ;

<!DOCTYPE html>
<html lang="en">
<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> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 500px; border: 10px red solid; /* Oui.ul Set to Elastic Container */ display: flex; flex-direction: row; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; } li:nth-child(1){ flex-grow: 0; flex-shrink: 1; } li:nth-child(2){ background-color: pink; /* flex-grow: 2; */ flex-shrink: 2; } li:nth-child(3){ background-color: orange; /* flex-grow: 3; */ flex-shrink: 3; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Copier le Code

Avant la contraction

Après contraction

02. Styles de récipients élastiques

flex-wrap:

Définit si l'élément élastique s'enroule automatiquement dans un conteneur élastique ;（Largeur du conteneur> Largeur de l'élément ）

Valeurs facultatives：
- nowrap Par défaut,L'élément ne s'enroule pas automatiquement;
- wrap L'élément s'enroule automatiquement le long de l'axe secondaire ;
- wrap-reverse L'élément s'enroule dans la direction opposée de l'axe secondaire ;

justify-content

Comment? Répartition de l'espace blanc sur la broche （ Comment les éléments de la broche sont disposés ）

Valeurs facultatives：
- flex-start Les éléments sont disposés le long du bord de départ de la broche ;
- flex-end Les éléments sont disposés le long du bord final de la broche ;
- center Disposition centrale des éléments ;
- space-around Les Blancs sont répartis de chaque côté de l'élément ;
- space-between Les Blancs sont répartis uniformément entre les éléments ;
- space-evenly Les Blancs sont répartis sur un seul côté de l'élément ;

<style> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 800px; border: 10px red solid; /* Paramètresul Pour les récipients élastiques */ display: flex; justify-content: center; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; flex-shrink: 0; } /* li:nth-child(1){ } */ li:nth-child(2){ background-color: pink; } li:nth-child(3){ background-color: orange; } </style>
Copier le Code

align-items

Définir l'alignement des éléments sur l'axe secondaire ;
Définir les relations entre les éléments
- Valeurs facultatives：
  - stretch Par défaut, Définir la longueur de l'élément à la même valeur
  - flex-start Les éléments ne s'étirent pas , Aligner le bord de départ le long de l'axe secondaire
  - flex-end Aligner le long du bord final de l'axe secondaire
  - center Centrage
  - baseline Alignement de base

<!DOCTYPE html>
<html lang="en">
<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> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 600px; height: 800px; border: 10px red solid; /* Paramètresul Pour les récipients élastiques */ display: flex; /* flex-direction: column; */ /* flex-wrap: wrap-reverse; */ /* flex-flow: wrap Et direction Propriétés abrégées de */ flex-flow: row wrap; /* justify-content: center; */ /*align-items: flex-end;*/ align-items: center; /*align-items: baseline;*/ /* align-content: Répartition de l'espace blanc de l'axe secondaire */ /*align-content: space-between;*/ } li{ width: 200px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; flex-shrink: 0; } li:nth-child(1){ /* align-self: Utilisé pour couvrir l'élément élastique actuel align-items */ align-self: stretch; } li:nth-child(2){ background-color: pink; } li:nth-child(3){ background-color: orange; } li:nth-child(4){ background-color: yellow; } li:nth-child(5){ background-color: chocolate; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>
2
<div>2</div>
</li>
<li>
3
<div>3</div>
<div>3</div>
</li>
<li>4</li>
<li>
5
<div>5</div>
</li>
</ul>
</body>
</html>
Copier le Code

03. Styles d'éléments élastiques

flex-grow: Coefficient de croissance de l'élasticité ;

/* flex-grow: 1; */

flex-shrink Facteur de réduction de l'élément élastique ;

.Le calcul du facteur de réduction est complexe
La réduction est basée sur Facteur de réduction Et Taille de l'élément pour calculer

flex-shrink: 1;

flex-basis Indique la longueur de base de l'élément sur la broche

Si la broche est Horizontal Et Cette valeur indique la largeur de l'élément ;

Si la broche est LongitudinalEt Cette valeur indique la hauteur de l'élément ;

La valeur par défaut est auto, Indique la hauteur ou la largeur de l'élément de référence lui - même
Si une valeur spécifique est passée , Cette valeur prévaut

flex Vous pouvez définir les trois styles de l'élément élastique ：

flex Croissance Réduction Base;

initial Correspondant à "flex: 0 1 auto";

auto Correspondant à "flex: 1 1 auto";

none Correspondant à "flex: 0 0 auto" L'élément élastique n'est pas élastique .

<!DOCTYPE html>
<html lang="en">
<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> *{ margin: 0; padding: 0; list-style: none; } ul{ width: 900px; border: 10px red solid; /* Réglage de la boîte élastique */ display: flex; } li{ width: 200px; height: 100px; background-color: #bfa; font-size: 50px; text-align: center; line-height: 100px; /* flex-grow: 1; */ /* flex-shrink: 1; */ /* flex-basis: auto; */ /* flex Vous pouvez définir les trois styles de l'élément élastique flex Croissance Réduction Base; initial "flex: 0 1 auto". auto "flex: 1 1 auto" none "flex: 0 0 auto" L'élément élastique n'est pas élastique */ flex: initial; } li:nth-child(1){ /* order Déterminer l'ordre dans lequel les éléments élastiques sont disposés */ order: 2; } li:nth-child(2){ background-color: pink; /* flex-grow: 2; */ order: 3; } li:nth-child(3){ background-color: orange; /* flex-grow: 3; */ order: 1; } </style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
Copier le Code

04. Page mobile

Dans le développement de pages mobiles , Les dimensions des écrans varient considérablement d'un appareil à l'autre , Il faut donc tenir compte de Pixels Et Viewport.

1. Pixelspixel

L'écran est composé d'un pixel ;

Il faut faire une distinction claire CSS La différence entre un pixel et un pixel physique .

CSS Les pixels sont les dimensions du dessin ou modèle ; Les pixels physiques sont les pixels physiques de l'écran .

Lorsque le Navigateur affiche une page web ,Il fautCSS Les pixels sont convertis en pixels physiques puis rendus .

Uncss Les pixels sont finalement affichés par plusieurs pixels physiques , À la discrétion du navigateur ： Par défaut à pcFin,UncssPixels = Un pixel physique

2. Viewportviewport

Un viewport est la zone de l'écran utilisée pour afficher une page web ;
Vous pouvez voir la taille du viewport ,Pour observerCSS Rapport des pixels aux pixels physiques ;
Par défaut： Largeur du viewport 1920px（CSSPixels） 1920px（Pixels physiques）
- En ce moment,css Le rapport entre les pixels et les pixels physiques est 1:1.
Zoomez deux fois sur la situation ： Largeur du viewport 960px（CSSPixels） 1920px（Pixels physiques）
- En ce moment,css Le rapport entre les pixels et les pixels physiques est 1:2.
On peut changer la taille du viewport ,Pour changerCSS Rapport des pixels aux pixels physiques .

Sur différents écrans d'affichage , La taille des pixels unitaires est différente , Plus les pixels sont petits, plus l'écran est clair .

24Pouces 1920x1080

iphone6 4.7Pouces 750 x 1334

Pixels de Smartphone Beaucoup plus petit que Pixels de l'ordinateur .

Par défaut, Les pages Web de l'extrémité mobile auront tous les affichages définis à 980Pixels（cssPixels）

Pour s'assurer quepc La page Web de bout en bout est normalement accessible à partir de l'extrémité mobile , Mais si la largeur de la page dépasse 980, Le navigateur de l'extrémité mobile Zoome automatiquement la page pour afficher la page entière .

Donc la plupart pc Tous les sites Web de bout en bout peuvent être navigués normalement dans le terminal mobile , Mais souvent, il n'y a pas de bonne expérience .

Pour résoudre ce problème, La plupart des sites Web sont spécialement conçus pour le mobile .

3. Le viewport parfait

La taille par défaut du viewport pour l'extrémité mobile est 980px(cssPixels),

Par défaut, Le rapport pixel de l'extrémité mobile est 980/ Largeur de l'extrémité mobile （980/750）;

Si nous écrivons le Code d'extrémité mobile directement dans la page web ,Voilà.980 Sous le viewport de , Le rapport pixel est très mauvais , Ce qui fait que le contenu de la page est très, très petit ;

Lors de l'écriture d'une page mobile , Assurez - vous d'avoir un rapport pixel plus raisonnable ：

1cssPixels Correspondant à 2 Pixels physiques

1cssPixels Correspondant à 3 Pixels physiques

Peut passermeta Étiquette pour définir la taille du viewport

Chaque appareil mobile est conçu pour , A un rapport de pixels optimal ,

En général, il suffit de définir le rapport pixel à cette valeur pour obtenir le meilleur résultat ;

La taille du viewport qui fixe le rapport de pixels au meilleur rapport de pixels est appelée le viewport parfait .

Définir la taille du viewport device-width Indique la largeur de l'appareil （ Le viewport parfait ）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Copier le Code

InHTML Ajouter une fois metaÉtiquettes, Vous pouvez définir le viewport parfait .

 <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Définir la taille du viewport device-width Indique la largeur de l'appareil （ Le viewport parfait ）-->
<!-- <meta name="viewport" content="width=device-width"> -->
<title>Document</title>
<style> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: red; } </style>
Copier le Code

4. vwAdaptation

La taille des affichages parfaits varie d'un appareil à l'autre ：

iphone6 -- 375

iphone6plus -- 414

En raison des différents affichages de périphériques et des différents rapports de pixels ,Donc la même chose375 Les pixels ont des significations différentes selon les appareils ,

Comme dansiphone6Moyenne 375 C'est plein écran ,Et voilàplusMoyenne375 Il manque un morceau

Donc, au moment du développement de l'extrémité mobile , Ne peut plus être utilisé px Pour la mise en page , vw Indique la largeur du viewport （viewport width）

100vw = Largeur d'un viewport
1vw = 1%Largeur du viewport

vw Cette Unit é est toujours égale à la largeur du viewport pour le calcul ：

Utiliser la largeur en pourcentage , Pour assurer la cohérence de l'affichage à l'extrémité mobile .

~~Mais il ne peut pas être utilisé width：20%, C'est pour montrer ;~~

Parce que% Par défaut à la référence HTMLLargeur de, Difficile à utiliser en cas de paternité .

Dimensions d'un dessin donné ： 750px 1125px

Largeur du dessin ou modèle ： 750px

UtiliservwEn unités： 100vw

Sur cette base,Comment créer un 48px x 35px Élément de taille ？

Par 100vw = 750px( Pixels du dessin )
On en est arrivés là.

0.1333333333333333vw = 1px

6.4vw = 48px( Pixels de dessin )

4.667vw = 35px

Oui.48px----> 6.4vw

<style> *{ margin: 0; padding: 0; } .box1{ width: 6.4vw; height: 4.667vw; background-color: #bfa; } </style>
Copier le Code

5. rem

Lors de l'écriture d'une page mobile basée sur un projet de conception ,Nous utilisonsvwMéthode, Chaque dimension de conception doit être calculée une fois vw,C'est gênant.


html{
font-size:0.1333333vw;
}
.box1{
/* rem - 1 rem = 1 htmlTaille de police pour */
width: 48rem;
height: 35rem;
background-color: #bfa;
}
Copier le Code

InCSSMoyenne,Nous pouvons utiliser1 rem = 1 htmlTaille de police pour, Écrivez la relation de conversion directement à HTML Dans le style de l'étiquette .

Attention!： Pour l'instantchrome Le navigateur du noyau s'affiche normalement , Mais l'ancienne version du navigateur sera HTML Minimum par défaut font-size：12px, Cause display overscale .

Une solution est ：

Oui.0.13333333vw Multiplier par un facteur pour faire HTMLDefont-sizePlus grand que12px;

Comme multiplier par 100,C'est devenu13.333333vw = 100px;

1rem=13.333333vw = 100px.

En écrivant un style ：

50px（ Taille du projet de conception ） Juste écrire ---> 50/100rem.

05. Disposition réactive

Disposition réactive

Les pages Web peuvent présenter des effets différents selon l'appareil ou la taille de la fenêtre ;
Utiliser une disposition réactive , Une page Web peut être adaptée à tous les appareils ;
La clé pour répondre à la mise en page est Demandes des médias;
Accès aux médias , Peut être utilisé pour différents appareils , Ou un état différent de l'appareil pour définir le style séparément .

Demandes des médias

Syntaxe：

@media Règles de requête{}
- Type de média：
  - all Tous les équipements
  - print Matériel d'impression
  - screen Équipement avec écran
  - speech Lecteur d'écran
- Peut être utilisé, Connexion de plusieurs types de médias , Pour qu'il y ait une relation entre eux

Attention!：

Lors de l'utilisation, Vous pouvez ajouter un only,Indique seulement.

only Est principalement utilisé pour la compatibilité avec certaines anciennes versions du navigateur .

@media only screen {
body{
background-color: #bfa;
}
}
Copier le Code

Caractéristiques des médias：

width Largeur du viewport

height Hauteur du viewport

min-width Largeur minimale du viewport （ Prend effet lorsque le viewport est plus grand que la largeur spécifiée ）

max-width Largeur maximale du viewport （ Prend effet lorsque le viewport est inférieur à la largeur spécifiée ）

Point limite pour le changement de style , On appelle ça un point d'arrêt , C'est - à - dire que le style de la page change à ce point Les points d'arrêt les plus couramment utilisés .

Moins de768 --- Super petit écran --- max-width=768px

Plus grand que768 ---Petit écran--- min-width=768px

Plus grand que992 --- Écran moyen --- min-width=992px

Plus grand que1200 ---Grand écran--- min-width=1200px.

Par exemple, les codes suivants ：

 <style> @media only screen and (min-width: 500px) and (max-width:700px){ body{ background-color: #bfa; } } </style>
Copier le Code

Rendre la page plus large que 500px,Moins de700pxDans le champ d'application,body La couleur de fond est réglée à #bfa.

Note de service CSS (vi): Flex, page mobile et mise en page réactive