English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manuel de référence CSS

règle CSS (RULES)

大全 des attributs CSS

CSS3 flex-mode d'utilisation et exemples de l'attribut basis

flex-l'élément élastique de base spécifié par l'attribut CSS

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

Valeur par défaut :auto
Applicable à :Élément flexible
Héritage :Non
Animable :Oui.Veuillez consulter Attributs d'animation.
Version : CSS3nouvelle fonctionnalité
JavaScript syntaxe :object.style.flexBasis="180px"

flex-Syntaxe d'utilisation de basis

La syntaxe de cet attribut est la suivante :

flex-basis:　width　|　auto　|　initial　|　inherit

Les exemples suivants montrent comment utiliser flex-Attribut basis.

.flex-container　{
　　　　display:　flex;　　　　　　
}　
.item1　{
　　　　background:　#ff80c0;
　　　　-webkit-flex-basis:　300px;　/*　Safari　6.1+　*/
　　　　flex-basis:　300px;
}
.item2　{
　　　　background:　#8080ff;
　　　　-webkit-flex-basis:　30%;　/*　Safari　6.1+　*/
　　　　flex-basis:　30%;
}
.item3　{
　　　　width:　120px;
　　　　background:#0080ff;
}
Vérifiez ici‹/›

Valeur de l'attribut

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

ValeurDescription
widthLongueur exprimée en unités absolues ou relatives, utilisée pour spécifier la longueur initiale de l'élément flexible. Les valeurs négatives ne sont pas valides.
autoLa largeur de l'élément flexible est égale à sawidthValeur de l'attribut. Si width n'est pas spécifié pour l'élément flexible, la largeur dépendra de son contenu. C'est la valeur par défaut.
initialRéinitialisez cette propriété à sa valeur par défaut.
inheritSi spécifié, l'élément lié utilise le flex de son élément parent-Valeurs de l'attribut basis.

Compatibilité du navigateur

flex-La compatibilité du navigateur de l'attribut basis, les numéros dans le tableau suivant indiquent la version minimale du navigateur qui prend en charge cette propriété ; tous les navigateurs populaires prennent en charge cette propriété.

  • Firefox 18+ -moz-,28

  • Google Chrome 21+ -webkit-,29

  • Internet Explorer 10+ -ms-,11

  • Apple Safari 6.1+ -webkit-

  • Opera 12.1+

Lisez la suite

Veuillez consulter les tutoriels suivants :CSS3Agencement en colonnes multiples.

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

CSS3 flex-Attribut directionCSS3 Attribut flex