Que fait réellement « flex : 1 » dans CSS Flexbox ?

Comprendre la signification de « flex : 1 »

La propriété flex, comme nous le savons, est une représentation concise de la flex- propriétés de croissance, de flexion-rétrécissement et de base flexible. Avec une valeur par défaut de 0 1 auto, sa définition se lit comme suit :

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

Cependant, il a été observé que « flex : 1 » est couramment utilisé dans divers scénarios. Comprendre ses implications nécessite un examen plus approfondi.

Déchiffrer « flex : 1 »

Lorsque « flex : 1 » est déclaré, cela se traduit par ce qui suit :

flex-grow : 1;    ➜ The div expands proportionally to the window's size.       
flex-shrink : 1;  ➜ The div shrinks proportionally to the window's size. 
flex-basis : 0;   ➜ The div lacks a predetermined starting value, adapting its size dynamically based on the available screen space. (e.g., if three divs are present within the wrapper, each div will occupy approximately 33% of the available space.)

En résumé, "flex: 1" demande essentiellement au div de se développer et de se contracter proportionnellement à la fenêtre environnante. De plus, il garantit une utilisation optimale de l’espace en ajustant sa taille de manière dynamique sans point de départ prédéfini. Cette propriété s'est avérée particulièrement utile dans la conception Web réactive, où la flexibilité et l'adaptabilité sont cruciales pour offrir une expérience utilisateur transparente sur plusieurs appareils.

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!