Cheatography
Login Register

Flex Anti-sèche 2018 Cheat Sheet

A cheat sheet in français (French) by Phil35
CSS3 Flex
11,737 views 2,785 downloads 1 Feb 2018 History
PRs
Download
3.7 avg · 0 ratings

Sources

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.

Propriétés du parent (couleur violet #88499C )

Propriétés du parent (couleur violet #88499C )

display: flex; / or inline­-flex / 

.container {
  display: flex; /\* or inline-flex \*/
}
déclar­ation obliga­toire qui crée le parent flexbox

direction principale

direction principale
.container {
flex-d­ire­ction: row | row-re­verse | column | column­-re­verse;
}

flex-wrap

flex-wrap
.conta­iner{
flex-wrap: nowrap | wrap | wrap-r­everse;
}
wrap ou wrap-r­everse va définir le sens de l'axe secondaire (cross axes)

flex-flow = flex-d­ire­ction + flex-wrap 

.container{
flex-flow: <‘flex-direction’> || <‘flex-wrap’>`
 }

justif­y-c­ontent (axe principal)

justify-content (axe principal)
.container {
justif­y-c­ontent: flex-start | flex-end | center | space-­between | space-­around | space-­evenly;
'}`
choisir une possib­ilité parmi les six...

align-­items : alignement relatif à une ligne

align-items : alignement relatif à une ligne
.container {
align-­items: flex-start | flex-end | center | baseline | stretch;
}

align-­con­tent: alignement entre plusieurs lignes

align-content: alignement entre plusieurs lignes
.container {
align-­con­tent: flex-start | flex-end | center | space-­between | space-­around | stretch ;
}

Propriétés des enfants (couleur orange #E77F24 )

Propriétés des enfants (couleur orange #E77F24 )

item : align-self ( indivi­duels / items)

item : align-self ( individuels / items)
.item {
align-­self: auto | flex-start | flex-end | center | baseline | stretch;
}
Permet de surcharger pour des articles les règles générales définies au niveau contai­ner­-pa­rent.

order: modifier l'ordre.

order: modifier l'ordre.
.item {
order: <in­teg­er>; / default is 0 /
}
Tous les items ayant le même niveau order sont affichés dans l'ordre d'ap­ari­tion.

flex: raccourci grow + shrink + basis

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:<­'­fle­x-g­row­'> <'fl­ex-­shr­ink­'> <'fl­ex-­bas­is'>
flex:<­'­fle­x-g­row­'>
}

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
il est recommandé d'ut­iliser ce raccourci plutôt que les valeurs séparé­ment.

flex-grow: répart­ition de l'espace

flex-grow: répartition de l'espace
item {
flex-grow: <nu­mbe­r>; / default 0 /
}
La place est répartie propor­tio­nne­llement aux coeffi­cients attribués.
Pour un effet parfait, il faut avoir assez de place vide avant redist­rib­ution.

Utiliser la propriété margin­:auto pour centrer

Utiliser la propriété margin:auto pour centrer
Il est possible de positi­onner un élément en bas de son conteneur à l’aide d’un :
margin­-top: auto,
ou mieux : centrer à la fois horizo­nta­lement et vertic­alement via un simple :
margin: auto.

/* paragraphe centré horizo­nta­lement et vertic­alement */
.container {
display: flex;
}
.container > p {
margin: auto;
}

Badges

Nice Cheat Sheet Good Cheat Sheet Downloaded from Unusual Locations × 3

Comments

No comments yet.

Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.