Formule de calcul de flex-shrink

CSS étant l’un des langages les plus simples et intuitifs du monde, je vous dévoile en exclusivité la formule permettant de calculer la largeur exacte d’un élément doté de la propriété flex-shrink au sein de son parent flex-container :

Largeur finale de l’élément =
(flex-shrink * flex-basis) / (somme des (flex-shrink * flex-basis)) * (largeur du parent – somme des flex-basis) + (flex-basis de l’élément)

Je vous en prie, c’est tout naturel 🙂

Ressources :

… Un article explicatif devrait suivre bientôt sur Alsacréations 😉

6 réflexions au sujet de « Formule de calcul de flex-shrink »

  1. Tu as juste oublié de préciser que le contenu peut empêcher le shrink d’un des éléments, auquel cas on le réduit tant que possible jusqu’à cette contrainte, puis refait une passe pour les éléments restants… 🙂

  2. Sur ton dernier example sur codepen:
    Compression flex-item 1 : (1 * 600) / (1600 + 2600) * -200 = -66.667px
    Compression flex-item 2 : (2 * 600) / (1600 + 2600) * -200 = -133.33px
    Le -200 c’est -400/2 ?

Les commentaires sont fermés.