26985 sujets

CSS et mise en forme, CSS3

Bonjour, je ne sais ou nos amis modérateurs mettrons cela mais lorsque vous vous lancerez comme moi dans Flexbox et Grid-Layout, faites vos CSS sans risque de fautes de syntaxe, allez sur le lien Grid ou Flexbox choisissez le petit dessin que vous voulez obtenir et cliquez le, et hop c'est copié... vous le collez dans votre CSS et c'est du garanti, forcément, puisque c'est le site du créateur de GRID Smiley cligne
http://flexbox.malven.co/
http://grid.malven.co/

HOP THIS HELP !!
Meilleure solution
Modérateur
Hello,

En allant voir le site de flexbox, j'ai vu un flex-shrink: 2. Je pensais que cette propriété acceptait simplement 0 ou 1. En allant voir la documentation W3C, je lis ceci :
<‘flex-shrink’>
This <number> component sets flex-shrink longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to 1.
Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.


Un bon exemple d'utilisation ? Pcq je ne vois toujours pas quand et comment l'utiliser…
Deux liens très intéressants, merci. Sur les petits tableaux, on voit bien la différence entre grid-rows: 1/3; et grid-rows: 1 /span3;, ce qui n'est pas évident quand on débute sous grid. Dans le premier cas, on va de la ligne 1 à la ligne 3, sans la dépasser. Dans le second cas, on part de la ligne 1 et on passe par dessus la ligne 3, pour recouvrir l'item 3. span, mot Anglais qui a plusieurs traductions en Français, étant pris ici dans le sens "portée". Géniaux, ces petits tableaux, ça devient presque trop facile en copiant/collant. Tu ne crois pas qu'un peu d'échecs, de recherches et d'expérimentations "à la main" ont aussi leur utilité ?
Dans le même genre : https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows propose aussi des petits modules à modifier en temps réel.
Et l'article sur https://www.alsacreations.com/article/lire/1388-css3-grid-layout.html est bien fait aussi, non ?