manuel de référence CSS

règle CSS (RULES)

大全 des attributs CSS

CSS3 flex-Attribut basis CSS empty-Attribut cells

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

La propriété CSS flex spécifie les composants de longueur élastique. Il est utilisé pour configurer en même tempsflex-grow，flex-shrinketflex-basisPropriété abrégée de l'attribut.

Le tableau suivant décrit l'utilisation et l'historique des versions de cet attribut, ainsi que l'utilisation de cet attribut dans la syntaxe JavaScript.

Valeur par défaut :	0 1 auto; Voir toutes les propriétés
Applicable à :	Élément élastique
Héritage :	Non
Animable :	Oui, car chaque propriété de la notation est animable.Veuillez consulter Attributs d'animation。
Version :	CSS3nouvelle fonction
JavaScript Syntaxe :	object.style.flex="1"

Syntaxe d'utilisation de flex

La syntaxe de cet attribut est la suivante :

flex:　[　flex-grow　flex-shrink　flex-basis　]　|　none　|　auto　|　initial　|　inherit

Les exemples suivants montrent comment utiliser l'attribut flex.

Exemple

.flex-container　{
　　　　-webkit-flex:　1;　/*　Safari　6。1+　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　　　　　flex:　1;　
}

Voyons voir‹/›

Valeur de l'attribut

Le tableau suivant décrit les valeurs de cet attribut.

Valeur	Description
flex-grow	Spécifiez le coefficient de croissance élastique ou la positivité élastique de l'élément élastique.
flex-shrink	Spécifiez le coefficient de contraction élastique ou la négativité élastique de l'élément élastique.
flex-basis	Spécifiez la taille initiale de l'élément élastique.
none	Équivalent à fixer flex à 0 0 auto.
auto	Équivalent à fixer flex à1 1 auto.
initial	Rétablir cette propriété à sa valeur par défaut.
inherit	Si spécifié, l'élément lié utilise la valeur de l'attribut flex de son élément parent.

Compatibilité des navigateurs

La compatibilité des navigateurs pour les attributs flex, les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cet attribut ; tous les navigateurs populaires prennent en charge cet attribut.

	Firefox 18+ ^-moz-，28 Google Chrome 21+ ^-webkit-，29 Internet Explorer 10+ ^-ms-，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-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 flex-Attribut basis CSS empty-Attribut cells