Cours par Webcam

Cours par Webcam

Formateur Web pour adultes depuis plus 11 ans, je vous propose des COURS collectifs par WEBCAM en LIVE pour booster vos connaissances et être autonome dans la création de site.

En savoir plus

CSS - texte

CSS - police

CSS - arrière-plan

CSS - boîte

CSS - mise en page

CSS - liste

CSS - tableau

CSS - animation

CSS - pseudo-class

CSS - pseudo-élément

CSS - les sélecteurs

Facebook
Twitter
LinkedIn

Attribut FLEX

Rôle

L’attribut flex permet de gérer la flexibilité d’un flex-item (élément enfant) d’un flex-container (élément parent)

Le flex-container correspond à n’importe quel bloc qui contient des enfants (flex-item) sur lequel on va appliquer le modèle de boîte flexible (display:flex)

Par défaut, l’espace occupé par chaque item se limite à son contenu. La propriété flex va permettre à un item de s’étirer et d’occuper l’espace disponible. Si tous les items ont leur valeur flex défini à 1, chaque enfant aura le même espace dans le conteneur. La valeur de flex ne correspond pas à une unité mais à une proportion : un item avec un flex de 2 occupera deux fois plus d’espace que les autres

Cet attribut est un raccourci de :

  • flex-grow spécifie combien de fois l’élément va s’étirer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeur vaut 0
  • flex-shrink : spécifie comment l’élément va diminuer par rapport au reste des éléments flexibles à l’intérieur du même conteneur. Par défaut cette valeurt vaut 1
  • flex-basis : spécifie la longueur initiale d’un élément flexible. Par défaut cette valeur est ‘auto’

 Note : voir notre tutoriel sur le modèle flex-box

Version : CSS3

Héritage (inherit) : non

Propriété Javascript : element.style.flex

Testez vous-même cet attribut

Utilisez Codepen.

– Le code CSS

.rowflex{
  display : flex;
  border : thin solid silver;  
  width : 700px;
}
.rowflex div{
  height: 30px;
}
.rowflex .milieu{
  flex: 1;
  background-color: orange;
}
.rowflex .gauche{
  flex: 2;
  background-color: pink;
}
.rowflex .droite{
  flex: 4;
  background-color: silver;
}

– Le code HTML

<div class="rowflex">
    <div class="gauche">gauche</div>
    <div class="milieu">milieu</div>
    <div class="droite">droite</div>
</div>

Résultat

Compatibilité

navigateur-chrome 21.0(-webkit-) navigateur-firefox 18.0(-moz-) navigateur-ie 10.0(-ms-) navigateur-safari 6.1(-webkit-) navigateur-opera 12.1

Valeurs

Les différentes valeurs de l’attribut flex sont:

auto
Equivalent de flex : 1 1 auto
Syntaxe :
flex : 1 1 auto
none
Equivalent de flex : 0 0 auto
Syntaxe :
flex : 0 0 auto
flex-grow

Capacité à s’étirer (la valeur represente une proportion

Voir l’attribut flex-grow
flex-shrink

Capacité à se retrecir (la valeur represente une proportion)

Voir l’attribut flex-shrink
flex-basis

Largeur minimum de l’élément flexible

Voir l’attribut flex-basis
initial
Défini à sa valeur initiale (attention pas pris en charge par Internet Explorer et Opéra en dessous de la version 15). Peut être utilisé pour « neutraliser » une spécificité.
Syntaxe :
flex : initial
inherit
Hérite de la même propriété que l’élément parent.
Syntaxe :
flex : inherit

A voir aussi

display– clear– z-index– align-content– align-items– align-self– vertical-align

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »