CSS3 flex-Méthode d'utilisation et exemple de propriété grow

flex-La propriété grow CSS spécifie la manière dont un élément flex augmente par rapport aux autres éléments du conteneur flex.

Le tableau suivant décrit l'utilisation et l'historique des versions de cette propriété, ainsi que la syntaxe d'utilisation de cette propriété dans le script JavaScript.

flex-Syntaxe d'utilisation de grow

La syntaxe de cette propriété est la suivante :

flex-grow:　number　|　initial　|　inherit

Les exemples suivants montrent comment utiliser flex-propriété grow.

.flex-container　{
　　　　display:　flex;
}　
.item1　{
　　　　width:　100px;
　　　　background:　#ff80c0;
　　　　-webkit-flex-grow:　1;　/*　Safari　6.1+　*/
　　　　flex-grow:　1;
}
.item2　{
　　　　width:　100px;
　　　　background:　#8080ff;
　　　　-webkit-flex-grow:　3;　/*　Safari　6.1+　*/
　　　　flex-grow:　3;
}
.item3　{
　　　　width:　100px;
　　　　background:#0080ff;
　　　　-webkit-flex-grow:　5;　/*　Safari　6.1+　*/
　　　　flex-grow:　5;
}

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cette propriété.

Compatibilité du navigateur

flex-Compatibilité des navigateurs pour la propriété grow, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; toutes les navigateurs populaires prennent en charge cette propriété.

Lisez la suite

Veuillez consulter les tutoriels suivants :CSS3Mise en page en colonnes multiples。

Propriétés associées :align-content，align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。