manuel de référence CSS

règle CSS @ (RULES)

大全 des attributs CSS

CSS3 flex-Attribut wrap CSS3 flex-Attribut grow

CSS3 flex-Méthode d'utilisation et exemple de l'attribut shrink

flex-L'attribut shrink CSS spécifie la manière dont un élément flex se rétrécit par rapport aux autres éléments du conteneur flex.

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

Valeur par défaut :	1
Applicable à :	Élément élastique
Héritage :	Non
Animable :	est.Veuillez consulter Attributs d'animation.
Version :	CSS3nouvelle fonctionnalité
JavaScript Syntaxe :	object.style.flexShrink="5"

flex-Syntaxe d'utilisation de shrink

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

flex-shrink:　number　|　initial　|　inherit

Les exemples suivants montrent comment utiliser flex-Attribut shrink

Exemple

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

Vérifiez pour voir‹/›

Valeur de l'attribut

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

Valeur	Description
number	Un nombre positif utilisé pour déterminer le flex-Coefficient de l'élément élastique shrink. La valeur par défaut est1.Les nombres négatifs ne sont pas valides.
initial	Définir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise le flex de son élément parent-Valeurs de l'attribut shrink.

Compatibilité du navigateur

flex-Compatibilité du navigateur de l'attribut shrink, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

	Firefox18+ ^-moz-,28+ Google Chrome 21+ ^-webkit-,29+ Internet Explorer 11+ Apple Safari 6.1+ ^-webkit- Opera 12.1+

Pour en savoir plus

Veuillez consulter les tutoriels suivants :CSS3Agencement en colonnes multiples.

Attributs associés :align-content,align-items,align-self,display,flex,flex-basis,flex-direction,flex-flow,flex-grow,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-Attribut wrap CSS3 flex-Attribut grow