Flex Utils

Permet d'appliquer rapidement le layout flexbox à un container et ces items.
Module très pratique pour du prototypage rapide.

Utilisation

Ajouter la class .fx (pour activer display:flex) suivit des options choisies en modificateurs :
fx--option1--option2--option3
L'ordre des options n'a pas d'importance.

Options

  • Les valeurs par défaut s'appliquent si l'option n'est pas utilisée.
  • Pour chaque option, une seule valeur doit être utilisée.

flex-wrap

Défaut: nowrap

  • --wrap
  • --wrap-reverse

flex-direction

Défaut: row

  • --row-reverse
  • --column
  • --column-reverse

justify-content

Défaut: flex-start

  • --justify-center
  • --justify-end

align-items

Défaut: stretch

  • --alignI-start
  • --alignI-end
  • --alignI-center

align-content

Défaut: stretch

  • --alignC-start
  • --alignC-end
  • --alignC-center

grow

Défaut: 0
En appliquant l'option --grow sur le container, flex-grow: 1 s'appliquera sur tous les items.
Vous pouvez également utiliser cette option sur l'item voulu avec la class i__fx--grow

  • --grow pour le container: fx--grow
  • --grow pour l'item: i__fx--grow

no shrink

Shrink a une valeur par défaut de 1 sur les items.
Cette option permet de la supprimer (0). En appliquant l'option --no-shrink sur le container, flex-shrink: 0 s'appliquera sur tous les items.
Vous pouvez également appliquer l'option sur l'item voulu avec la class i__fx--no-shrink

  • --no-shrink pour le container: fx--no-shrink
  • --no-shrink pour l'item: i__fx--no-shrink

align-self

Cette option est applicable uniquement sur les items, en option à la class i__fx Défaut: auto

  • --start
  • --center
  • --end

Exemple

placeholder music

Sacripant en concert

50 €

21 et 22 août
au bistrot des gars & des garces.

Lorem ipsum Reprehenderit minim nulla voluptate officia laborum aliquip reprehenderit proident pariatur culpa labore culpa minim Excepteur consequat aliqua ex in labore elit.

Commentaires

  • Class fx--grow sur le container principal ticket : active grow:1 sur tous les items.
  • Class i__fx--center sur l'item img__ticket pour lui donner un self-align: center.
  • Class i__fx--no-shrink sur l'item header__ticket
    • pour lui appliquer un flex-shrink: 0.
  • Class fx--column--justify-center sur les items header__ticket & desc__ticket pour qu'ils deviennent à leur tour flex container. Avec ajout des options flex-direction: column et justify-content: center.
  • Les autres class utilisées (txt-center, no-vspace) sont d'autres class utilitaires documentés dans utils/typo-utils.css.