Propriété CSS flexible
Exemple
Laissez tous les éléments flexibles avoir la même longueur, quel que soit leur contenu :
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Conseil : Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La flex
propriété est une propriété abrégée pour :
La flex
propriété définit la longueur flexible sur les éléments flexibles.
Remarque : Si l'élément n'est pas un élément flexible, la flex
propriété n'a aucun effet.
Valeur par défaut: | 0 1 automatique |
---|---|
Hérité: | non |
Animable : | oui, voir propriétés individuelles . En savoir plus sur l'animation |
Version: | CSS3 |
Syntaxe JavaScript : | objet .style.flex="1" |
Prise en charge du navigateur
Les nombres dans le tableau indiquent la première version du navigateur qui prend entièrement en charge la propriété.
Les nombres suivis de -webkit-, -ms- ou -moz- spécifient la première version qui a fonctionné avec un préfixe.
Property | |||||
---|---|---|---|---|---|
flex | 29.0 21.0 -webkit- |
11.0 10.0 -ms- |
28.0 18.0 -moz- |
9.0 6.1 -webkit- |
17.0 |
Syntaxe CSS
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Valeurs de propriété
Value | Description |
---|---|
flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items |
flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items |
flex-basis | The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit |
auto | Same as 1 1 auto. |
initial | Same as 0 1 auto. Read about initial |
none | Same as 0 0 auto. |
inherit | Inherits this property from its parent element. Read about inherit |
Plus d'exemples
Exemple
Utilisation flex
avec des requêtes multimédias pour créer une mise en page différente pour différentes tailles d'écran/appareils :
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column
layout (50%) */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Pages connexes
Tutoriel CSS : Boîte flexible CSS
Référence CSS : propriété flex-basis
Référence CSS : propriété flex-direction
Référence CSS : propriété flex-flow
Référence CSS : propriété flex-grow
Référence CSS : propriété flex-shrink
Référence CSS : propriété flex-wrap
Référence HTML DOM : propriété flex