& vi. Boxe

Troisième personne du singulier : boxes Pluriel : boxes Participe présent : boxing Passé : boxed Participe passé : boxed

flex

Anglais [fleks] Américain [flɛks]

Bending (joint); contraction (muscle); montrant la force

n. flexion; [électricité] fil de fleur

Troisième personne du singulier : fléchit Participe présent : fléchissant Passé : fléchi Participe passé : fléchi

propriété CSS box-flex syntaxe

Fonction : Spécifie si les éléments enfants de la boîte peuvent agrandir ou contracter leur taille.

Syntaxe : box-flex: value;

Description : value La rangée d'éléments évolutive. La flexibilité est relative, par exemple, un élément enfant avec un box-flex de 2 est deux fois plus flexible qu'un élément enfant avec un box-flex de 1.

Remarque : Les éléments évolutifs peuvent être raccourcis ou agrandis à mesure que la boîte rétrécit ou s'agrandit. Chaque fois qu'il y a de l'espace supplémentaire dans la boîte, l'élément évolutif s'agrandit pour remplir cet espace. Aucun navigateur ne prend actuellement en charge l'attribut box-flex. Firefox prend en charge une propriété alternative -moz-box-flex. Safari, Opera et Chrome prennent en charge l'attribut alternatif -webkit-box-flex.

propriété CSS box-flex exemple

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:box;
width:300px;
border:1px solid black;
}

#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari and Chrome */
box-flex:1.0;
border:1px solid red;
}

#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari and Chrome */
box-flex:2.0;
border:1px solid blue;
}
</style>
</head>
<body>

<div>
<p id="p1">Hello</p>
<p id="p2">php中文网</p>
</div>

<p><b>注释：</b>IE 不支持 box-flex 属性。</p>

</body>
</html>

Exécuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne