Cheatography
https://cheatography.com
Rappel des propriétés flexbox les plus utilisées
This is a draft cheat sheet. It is a work in progress and is not finished yet.
Inclure du CSS
fichier |
<link href="./css/styles.css" rel="stylesheet" type="text/css"/> |
inline |
<div style="background-color:black"></div> |
Interne |
<style type="text/css"></style> |
Flexbox
Display:flex |
mode flexbox |
flex-direction:
| |
définit la direction dans laquelle les éléments sont placés. |
s'utilise avec |
display:flex |
exemple |
flex-direction:column-reverse |
Valeurs possibles : |
row |
Les éléments sont disposés dans la même direction que le texte. |
column |
Les éléments sont disposés de haut en bas. |
row-reverse |
Les éléments sont disposés dans la direction opposée au texte. |
column-reverse |
Les éléments sont disposés de bas en haut. |
quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.
align-items :
| |
aligne les éléments verticalement |
s'utilise avec |
display:flex |
Valeur possible: |
flex-start |
Les éléments s'alignent au haut du conteneur. |
flex-end |
Les éléments s'alignent au bas du conteneur. |
center |
Les éléments s'alignent au centre vertical du conteneur. |
baseline |
Les éléments s'alignent à la ligne de base du conteneur. |
stretch |
Les éléments sont étirés pour s'adapter au conteneur. |
quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.
align-self:
exemple |
align-self:center |
s'utilise avec |
display:flex |
Cette propriété accepte les mêmes valeurs que align-items, mais s'applique seulement à l'élément ciblé.
justify-content:
| |
aligne les éléments horizontalement |
s'utilise avec |
display:flex |
exemple |
justify-content:flex-end |
Valeur possibles: |
flex-start |
Les éléments s'alignent au côté gauche du conteneur. |
flex-end |
Les éléments s'alignent au côté droit du conteneur. |
center |
Les éléments s'alignent au centre du conteneur. |
space-between |
Les éléments s'affichent avec un espace égal entre eux. le premier élément est aligné sur le bord du conteneur. |
space-around |
Les éléments s'affichent avec un espacement égal à l'entour d'eux. |
space-evenly |
cette propriété répartit l'espace disponible de manière égale entre les éléments du conteneur.Cela donnera des espaces identiques entre chaque paire d'éléments, ainsi qu'entre le premier élément et le bord du conteneur, et entre le dernier élément et le bord opposé du conteneur. |
quand la direction est en colonne, justify-content change pour la verticale et align-items pour l'horizontale.
|
|
Sélecteurs
a |
tous les éléments a |
div p |
tous les éléments p enfants d'une div |
.menu > ul |
tous les éléments ul enfants directs d'un élément dont l'attribut class est menu |
p + span |
un élément span adjacent à un paragraphe |
.xxx |
élément dont l'attribut class est xxx |
#yyy |
élément dont l'attribut id est yyy |
input[type=text] |
tous les éléments de formulaire input dont l'attribut type est text |
h1,h2,h3 |
définition commune pour les éléments h1,h2 et h3 |
p h2 |
descendant (h2 dans un p) |
a:visited |
pseudo-classe lien visité |
div:hover |
pseudo-classe passage souris sur element div |
:first-letter ; :before ; :after |
pseudo-classe |
align-content :
| |
définir comment plusieurs lignes sont espacées l'une à l'autre |
s'utilise avec |
display:flex |
Valeurs possibles : |
flex-start |
Les lignes sont amassées dans le haut du conteneur |
flex-end |
Les lignes sont amassées dans le bas du conteneur. |
center |
Les lignes sont amassées dans le centre vertical du conteneur. |
space-between |
Les lignes s'affichent avec un espace égal entre eux. |
space-around |
Les lignes s'affichent avec un espace égal autour d'eux. |
stretch |
Les lignes sont étirées pour s'adapter au conteneur. |
Quand il n'y a qu'une seule ligne, align-content n'a aucun effet.
flex-wrap:
| |
spécifie si l'élément doit être sur une seule ligne ou pas |
s'utilise avec |
display:flex |
nowrap |
Tous les éléments sont tenus sur une seule ligne. |
wrap |
Les éléments s'enveloppent sur plusieurs lignes au besoin. |
wrap-reverse |
Les éléments s'enveloppent sur plusieurs lignes dans l'ordre inversé. |
order:
| |
order est appliqué à des éléments individuels. |
s'utilise avec |
display:flex |
exemple |
order:1 |
Par défaut, les éléments ont une valeur order de 0, mais on peut utiliser cette propriété pour mettre une valeur à un entier positif ou négatif. Le éléments s'affichent alors par ordre du plus petit au plus grand.
flex-flow
s'utilise avec |
display:flex |
Par exemple |
flex-flow: row wrap |
Les deux propriétés flex-direction et flex-wrap sont utilisées tellement souvent ensembles que le raccourci flex-flow a été créé pour les combiner. Ce raccourci accepte les valeurs des deux propriétés séparées par un espace.
reference
http://www.w3schools.com/cssref/ |
|
