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 :
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 )

display: flex; / or inline­-flex /

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

direction principale

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

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)

.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

.container {
align-­items: flex-start | flex-end | center | baseline | stretch;
}

align-­con­tent: 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 )

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-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
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 :
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;
}
   
 

Metadata

Favourited By

Boulard

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