flex & flex-1 à flex-20: Appliquer la classe flex sur le parent et flex-[x] sur les enfants
flex-wrap: Appliquer les classes flex flex-wrap sur le parent afin que les enfants retournent à la ligne si la largeur d'écran ne suffit pas.
flex-break: Utiliser l'enfant <span class="flex-break"></span> afin de provoquer un retour à la ligne.
Appliquer la classe flex-break sur un enfant afin qu'il prenne tout la largeur du parent.
ACCORDION PURE CSS
accordion: Appliquer la classe accordion sur le label d'un input checkbox, l'élément qui suit aura automatiquement un effet d'accordéon
ATTENTION : l'élément qui suit doit être "doublé" => un div qui contient un second div (ex: label + div > div)
Content you want to show/hide.
Content you want to show/hide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non lacus lacinia, fringilla lacus et, ultricies eros. Praesent risus lorem, rhoncus sit amet tellus eu, molestie scelerisque ipsum. Praesent egestas lectus in suscipit placerat. Curabitur vel lorem suscipit, tempus urna vel, fermentum eros. Nam nec ligula consequat, imperdiet ligula eu, varius sem. Mauris elementum felis eu mattis imperdiet. Nullam sit amet lacinia sem, id vulputate felis. Suspendisse a ex enim. Morbi mauris sapien, tempus eu elementum eu, lacinia sed dui. Maecenas euismod auctor felis eu semper. Ut et mi malesuada, gravida est sed, porta arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non lacus lacinia, fringilla lacus et, ultricies eros. Praesent risus lorem, rhoncus sit amet tellus eu, molestie scelerisque ipsum. Praesent egestas lectus in suscipit placerat. Curabitur vel lorem suscipit, tempus urna vel, fermentum eros. Nam nec ligula consequat, imperdiet ligula eu, varius sem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non lacus lacinia, fringilla lacus et, ultricies eros.
auto-growing textarea
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Accordion details outer
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
Content you want to show/hide. Content you want to show/hide. Content you want to show/hide.
ELLIPSIS
ellipsis & ellipsis-1: Appliquer la classe ellipsis sur un elément afin d'afficher "..." si le texte est trop long ou saute à la ligne.
ellipsis-2 à ellipsis-6: Appliquer la classe ellipsis-[X] sur un elément afin d'afficher "..." si le texte est trop long et fait plus de X lignes.