Tout le monde sait ce qu'est `width` en CSS ?
Mais connais-tu ?
width: fit-content
width: min-content
width: max-content
J'ai pris longtemps avant de les connaître moi !
Et, je n'ai pas envie que ce soit ton cas...
#RT ❤️
👇 #thread #css #web
0. Comment fonctionne width
Contrairement à la height, la width prend par défaut toute la place disponible !
Alors que la height ne prend que la place minimum !
Pourquoi ? Ce sera le sujet d'un autre Thread
En fait, la valeur par défaut de width est « auto »
Donc quelle valeur peut prendre width ?
1. des mesures (100%, 100px, 1rem)
2. Keywords (auto, fit-content, max-content, min-content)
Let's explore the keywords !
1. width: min-content
Tout simplement on va dire à l'élément de prendre la taille minimum possible !
Avec la div d'avant, elle va prendre la taille du mot le plus long car par défaut les mots ne sont pas coupés !
Donc ici beautiful définit la taille de notre div !
2. width: max-content
Ici, on va dire à notre div de prendre le plus de place possible par rapport à son contenu !
Donc de ne surtout pas faire de retours à la ligne !
Il ne respecte aucune contrainte venant du parent !
Avec max-content si le contenu n'est pas trop grand, il va fit la taille de l'élément !
3. width: fit-content
Surement, le plus pratique !
Comme les deux autres, il se base sur la taille du contenu !
Il va prendre la taille minimum du contenu comme max-content mais il va respecter les contraintes du parent, et donc retourner à la ligne si besoin !
Tu es maintenant un pro des width bravo !
Si tu as appris qqch #rt un max pour faire une propagande ultime du fit-content ❤️
Sans oublier de me follow @melvynxdev ❤️
dernier Thread :
PS : tu peux rejoindre mes petits mails ici : melvynx.com/emails?f=t
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.