Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

Flex Anti-sèche 2018 Cheat Sheet by

Sources

Cette anti-sèche reprend princi­pal­ement le tutoriel
A Complete Guide to Flexbox (en)
et access­oir­ement le tutoriel :
alsacreations : 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 gra­s.

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

.cont­ainer {
flex-d­ire­ction: row | row-re­verse | column | column­-re­verse;
}

flex-wrap

.cont­ainer{
flex-wrap: now­rap | wrap | wrap-r­eve­rse;
}
wrap ou wrap-r­everse va définir le sens de l'axe second­aire (cross axes)

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

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

justif­y-c­ontent (axe principal)

.cont­ainer {
justif­y-c­ontent: fle­x-s­tart | flex-end | center | space-­between | space-­around | space-­eve­nly;
'}`
choisir une possib­ilité parmi les six...

align-­items : alignement relatif à une ligne

.cont­ainer {
align-­items: flex-start | flex-end | center | baseline | str­etc­h;
}

align-­con­tent: alignement entre plusieurs lignes

.cont­ainer {
align-­con­tent: flex-start | flex-end | center | space-­between | space-­around | str­etch ;
}
 

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

item : align-self ( indivi­duels / 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.

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

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­-sh­rink : capacité pour un élément à se contracter si nécessaire (0 ou 1)
flex­-ba­sis : 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.

Plus­ieurs é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.alsacreations.com/tuto/lire/1493-CSS3-Flexbox-Layout-module.html
il est recommandé d'utiliser ce raccourci plutôt que les valeurs séparé­ment.

flex-grow: répart­ition 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

Il est possible de positi­onner un élément en bas de son conteneur à l’aide d’un :
marg­in-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 */
.cont­ainer {
display: flex;
}
.cont­ainer > p {
margin: auto;
}
   
 

Metadata

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Web Programming Cheat Sheet
            CSS 2.1 and CSS 3 Help Cheat Sheet by Smashing Magazine
          Ressources pour Bootstrap Cheat Sheet