Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété flex

Description de la propriété flex.

flex définit la largeur des éléments dans un flex-box, ainsi que leur capacité à s'élargir ou se rétrécir en fonction de la place disponible. Plus précisément, flex définit la dimension de l'élément suivant l'axe principal. Mais comme ce dernier est souvent horizontal, c'est le plus souvent la largeur des éléments qui est affectée par flex.

flex doit être appliquée aux éléments internes d'un flex-box, et non pas au container flex lui-même. car la propriété n'est pas héritée par défaut.

flex est une propriété raccourcie qui regroupe les valeurs des propriétés suivantes :

  • flex-grow : définit si les éléments peuvent s'agrandir pour remplir le container flex.
  • flex-shrink : définit si les éléments peuvent se rétrécir si la place dans le container flex est insuffisante.
  • flex-basis : définit la dimension de base des éléments dans un container flex-box.

Rappel : dans un flex-box, les éléments ont une dimension de base (Object) mais peuvent s'agrandir ou se rétrécir en fonction de la place disponible. L'agrandissement est géré par Object et le rétrécissement par Object.

Pour une bonne compréhension des flex-box, nous vous recommandons la lecture du tutoriel sur les flex-box.

Rappel : si le container a un axe principal vertical (flex-direction:column), tout ce qui vient d'être dit s'applique à la hauteur des éléments dans le flex-box, et non plus à leur largeur.

Syntaxes pour flex.

  • flex: 0 1 auto;

    Valeur par défaut. La largeur des éléments est définie par leur propriété Object, ou, si cette dernière n'est pas définie ou est définie elle-même sur auto, c'est le contenu qui définit la taille de l'élément.

    Les éléments ne s'agrandissent pas, même s'il reste de la place dans la largeur du container, mais ils peuvent se rétrécir si la largeur du container est insuffisante.

  • flex: auto; flex: 1 1 auto;

    Ces deux syntaxes sont équivalentes. La largeur des éléments est définie par leur propriété Object, ou, à défaut, par le contenu de l'élément. Mais les éléments sont flexibles dans les deux sens : ils s'agrandissent ou se rétrécissent pour occuper toujours la place disponible, sans la dépasser.

  • flex: none; flex: 0 0 auto;

    Ces deux syntaxes sont équivalentes. La largeur des éléments est définie par leur propriété Object, ou, à défaut, par le contenu de l'élément. Les éléments ne sont pas flexibles : ils peuvent laisser de la place inoccupée dans le container ou, au contraire, déborder du container.

  • flex: 0 2 200px;

    Exemple d'une syntaxe qui pourrait être appliquée à un des élément du flex-box.
    La largeur de l'élément est par défaut fixée à 200 pixels, mais il peut se rétrécir si la place dans le container est insuffisante. Cet élément se réduira deux fois plus que d'autres qui ont la valeur 1 pour Object. Par contre l'élément ne pourra pas s'agrandir, même s'il reste de la place disponible dans le container.

  • flex: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur applique les valeurs choisies aux quatre éléments dans le container flex-box. Observez comment ils se répartissent l'espace disponible en fonction des valeurs indiquées.

flex :
CSS
HTML
XML
Cascading Styles Sheet

Voir aussi...

Flex-box - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • display : Type de l'élément et la façon de l'afficher.
  • flex-basis : Détermine la dimension par défaut d'un élément contenu dans un flex-box.
  • flex-direction : Choisit l'axe principal et l'axe secondaire d'un flex box.
  • flex-flow : Echaînement des éléments enfant dans un flex-box.
  • flex-grow : Autorise ou non l'agrandissement d'un élément contenu dans un flex-box.
  • flex-shrink : Autorise ou non la compression d'un élément contenu dans un flex-box.
  • flex-wrap : Gestion des retours à la ligne dans un container flex.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • order : Ordre des éléments dans un flex-box.