Que signifie « flex : 1 » dans CSS Flexbox ?

Comprendre la propriété Flexbox : que représente « flex : 1 » ?

La propriété flex, un raccourci pratique pour flex-grow, flex-shrink et flex-basis permettent un contrôle flexible de la mise en page. Bien que la valeur par défaut soit « 0 1 auto », il est courant de rencontrer « flex : 1 » dans la pratique.

Cela soulève la question : que signifie réellement « flex : 1 » ? Est-il interprété comme « 1 1 auto » ou « 1 0 auto » ?

Pour clarifier, « flex : 1 » représente ce qui suit :

• flex-grow : 1

  • Le div associé s'agrandira proportionnellement à la taille de la fenêtre size.

• flex-shrink : 1

  • Le div se contractera proportionnellement à la taille de la fenêtre.

• flex-basis : 0

  • Le div n'a pas de valeur de départ explicite et occupera l'espace de l'écran en fonction de la proportion disponible.
  • Par exemple, si trois divs sont contenus dans un wrapper, chacun occupera environ 33 % de la largeur de l'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!