Maison >interface Web >tutoriel CSS >Comment utiliser l'attribut CSS flex
Comment utiliser l'attribut CSS flex
- 青灯夜游original
- 2019-05-28 13:15:303118parcourir
La propriété flex est une propriété abrégée de CSS, utilisée pour définir ou récupérer la manière dont les éléments enfants de l'objet modèle de boîte flexible allouent de l'espace. La propriété flex n'a aucun effet si l'élément n'est pas un enfant de l'objet modèle flexbox.
Comment utiliser l'attribut CSS flex ?
La propriété flex est utilisée pour définir ou récupérer la manière dont les éléments enfants de l'objet modèle de boîte flexible allouent de l'espace.
Explication : La propriété flex est la propriété abrégée des propriétés flex-grow, flex-shrink et flex-basis.
Syntaxe CSS
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Valeur de la propriété :
● flex-grow : Un nombre qui spécifie que l'élément sera par rapport à d’autres extensions de projets flexibles.
● flex-shrink : un nombre qui spécifie la quantité de rétrécissement de l'élément par rapport à d'autres éléments flexibles.
Quantityflex-basis : La longueur de l'article. Valeurs légales : "auto", "inherit" ou un nombre suivi de "%", "px", "em" ou toute autre unité de longueur.
Quantityauto : L'élément sera dimensionné en fonction de sa propre largeur et hauteur, mais s'étirera pour absorber l'espace libre supplémentaire dans le conteneur flexible, et se raccourcira également jusqu'à sa taille minimale pour tenir dans le conteneur. . Cela équivaut à définir la propriété sur "flex: 1 1 auto".
● none : l'élément sera dimensionné en fonction de sa propre largeur et de sa hauteur. Il est totalement inélastique et ne se raccourcira ni ne s'étirera pour s'adapter au conteneur flexible. Équivaut à définir la propriété sur "flex: 0 0 auto".
Quantity initial définit cette propriété à sa valeur par défaut, qui est "flex: 0 1 auto".
● hériter Cet attribut est hérité de l'élément parent.
Remarque : La propriété flex n'a aucun effet si l'élément n'est pas un enfant de l'objet modèle flexbox.
Exemple d'attribut CSS flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
</body>
</html>Rendu :
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!