Attribut flex CSS

Définition et utilisation

Flex est une abréviation des propriétés suivantes :

Flex définit la longueur élastique des éléments élastiques.

Remarque :Si l'élément n'est pas un élément élastique, l'attribut flex est invalide.

Voir également :

Tutoriel : CSS Flexbox

Référence :Attribut flex-basis CSS

Référence :Attribut flex-direction CSS

Référence :Attribut flex-flow CSS

Référence :Attribut flex-grow CSS

Référence :Attribut flex-shrink CSS

Référence :Attribut flex-wrap CSS

Référence :HTML DOM propriété flex

Exemple

Faites en sorte que la longueur de tous les éléments flexibles soit la même, peu importe leur contenu :

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Essayer vous-même

Syntaxe CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Valeur de l'attribut

Valeur Description
flex-grow Nombre, indiquant la quantité de croissance de l'élément par rapport aux autres éléments élastiques.
flex-shrink Nombre, indiquant la quantité de rétraction de l'élément par rapport aux autres éléments élastiques.
flex-basis

Longueur de l'élément.

Valeurs valides : "auto"、"inherit" ou des valeurs mesurées en "%", "px", "em" ou toute autre unité de longueur.
auto Équivalent à 1 1 auto.
initial Équivalent à 0 1 auto. Voir : initial。
none Équivalent à 0 0 auto.
inherit Inhérite cette propriété de son élément parent. Voir : inherit。

Détails techniques

Valeur par défaut : 0 1 auto
Héritage : Non
Création d'animation : Support. Voir les propriétés séparées. Voir :Propriétés liées aux animations。
Version : CSS3
Syntaxe JavaScript : object.style.flex="1"

Plus d'exemples

Utilisez flex et les requêtes media pour créer différentes mises en page pour différentes tailles d'écran/设备 :

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* Mise en page responsive - Créez une mise en page en une colonne (100％) plutôt qu'en deux colonnes (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Essayer vous-même

Support du navigateur

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge cette propriété en totalité.

Les nombres avec -webkit-、-ms- ou -moz- indiquent la première version utilisant le préfixe.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0