Flex Anti-sèche 2018 Cheat Sheet by Phil35

Cette anti-sèche reprend princi­pal­ement le tutoriel
A Complete Guide to Flexbox (en)
et access­oir­ement le tutoriel :
alsacr­eations : CSS3 Flexbox Layout module : flexib­ilité (fr)
Notez le code couleurs :
Violet : pour les attributs du container parent (consi­dérer comme synonimes parent et container )
Orange : pour les atributs des articles enfants (consi­dérer comme synonimes items, articles, enfants)
Lorsqu'un attribut peut prendre plusieurs valeurs, la valeur par défaut est indiquée en gras.

La propriété flex est un raccourci de trois propri­étés, qui s’appl­iquent aux "­fle­x-i­tem­s" et dont les foncti­onn­alités sont:
flex-grow : capacité pour un élément à s’étirer dans l’espace restant (0 ou n)
flex-s­hrink : capacité pour un élément à se contracter si nécessaire (0 ou 1)
flex-basis : taille initiale de l’élément avant que l’espace restant ne soit distribué ( <le­ngt­h> ou "­aut­o" )

.item {

  flex: none

  flex:<­'fl­ex-­gro­w'> <'f­lex­-sh­rin­k'> <'f­lex­-ba­sis­'> 

  flex:<­'fl­ex-­gro­w'>

}

Par défaut, les valeurs de ces propriétés sont :
flex-grow: 0, flex-s­hrink: 1 et flex-b­asis: auto

En clair, les flex-items n’occupent initia­lement que la taille minimale de leur contenu.
Pour rendre un élément flexible, il suffit de lui attribuer une valeur de flex-grow (ou flex en raccourci) supérieure à zéro.
Cet élément absorbera alors l’espace restant au sein de son conteneur.

Plusieurs éléments peuvent être rendus flexibles et se répartir l’espace restant. L’espace disponible est alors tout simplement distribué entre les éléments flexibles (propo­rti­onn­ell­ement à leur coeffi­cient flex-grow )

www.al­sac­rea­tio­ns.c­om­/tu­to/­lir­e/1­493­-CS­S3-­Fle­xbo­x-L­ayo­ut-­mod­ule.html