Maison >interface Web >tutoriel CSS >Utilisation de l'attribut flex-shrink en CSS (réduction de la largeur lorsque la largeur du cadre est inférieure à la largeur de la page)
Utilisation de l'attribut flex-shrink en CSS (réduction de la largeur lorsque la largeur du cadre est inférieure à la largeur de la page)
- 不言original
- 2018-11-08 17:31:463640parcourir
Cet article vous expliquera comment utiliser l'attribut flex-shrink en CSS. Les amis dans le besoin peuvent s'y référer.
Utilisez la propriété flex-shrink pour spécifier dans quelle mesure la largeur du cadre dans Flexbox doit être plus petite que nécessaire.
Syntaxe :
flex-shrink :(数量）
Exemple de code :
flex-shrink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="flex-shrink.css" />
</head>
<body>
<div class="container">
<div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
<div class="frameB">第二个内容<br />php中文网<br /></div>
<div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
<div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
<div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
</div>
</div>
</body>flex-shrink.css
.container {
display: flex;
}
.frameA {
border: 1px solid #e9006b;
flex-shrink: 1;
}
.frameB {
border: 1px solid #ff6a00;
flex-shrink: 2;
}
.frameC {
border: 1px solid #d0b106;
flex-shrink: 3;
}
.frameD {
border: 1px solid #4aae20;
flex-shrink: 4;
}
.frameE {
border: 1px solid #01b9b3;
flex-shrink: 5;
}Explication :
Nous définissons frameA flex-shrink sur 1, frameB flex-shrink sur 2, frameC flex-shrink 3, frameD flex-shrink 4, frameE flex-shrink 5 . Ce paramètre vous permet de spécifier de combien réduire la largeur du cadre s'il devient plus étroit que requis pour l'affichage du texte. Le cadre est rétréci selon un rapport frameA:frameB:frameC:frameD:frameE = 1:2:3:4:5. (frameE rétrécit beaucoup plus que frameA.)
L'effet est le suivant :
Utilisez un navigateur Web pour afficher les résultats du code ci-dessus. La page ci-dessous s'affiche.
Réduisez la largeur de la fenêtre. La largeur de chaque cadre est toujours une largeur qui permet au contenu d'être affiché inutilement lorsqu'il n'est pas nécessaire de le réduire.
Si vous réduisez davantage la largeur de la fenêtre, le texte intérieur sera renvoyé à la ligne et la largeur du cadre diminuera
Réduisez davantage la largeur du cadre. À partir du cadre « premier contenu », on peut voir que la largeur du cadre « cinquième contenu » diminue fortement.
En réduisant davantage la largeur, vous pouvez clairement voir l'étendue du changement.
Il peut être confirmé que la largeur de rétrécissement du cadre est rétrécie dans le rapport frameA:frameB:frameC:frameD:frameE = 1:2:3:4 : 5.
Que faire lorsque flex-shrink n'est spécifié que dans une seule image
Modifiez le CSS comme suit et spécifiez flex-shrink uniquement dans une seule image.
flex-shrink.css
.container {
display: flex;
}
.frameA {
border: 1px solid #e9006b;
flex-shrink: 5;
}
.frameB {
border: 1px solid #ff6a00;
}
.frameC {
border: 1px solid #d0b106;
}
.frameD {
border: 1px solid #4aae20;
}
.frameE {
border: 1px solid #01b9b3;
}Affiche la page sur un navigateur Web. Lorsque la largeur de la fenêtre est très large, comme dans le cas précédent, chaque cadre n'a pas besoin d'afficher la largeur.
Réduisez la largeur de la fenêtre de votre navigateur Web. Si le contenu du cadre est inutile, la taille du cadre n'est pas modifiée.
De plus, si vous raccourcissez la largeur de la fenêtre, chaque largeur de cadre deviendra plus étroite et le texte à l'intérieur du cadre se repliera et apparaîtra.
Si vous réduisez davantage la largeur de la fenêtre, la largeur du cadre deviendra également plus étroite. Vous pouvez constater que la largeur du premier cadre de contenu diminue par rapport aux autres cadres.
Vous pouvez donc utiliser Flexbox pour définir le retrait du cadre.
Supplément : Si flex-shrink n'est pas spécifié, la valeur flex-shrink sera traitée comme 1.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!