Les flexbox vous permettent, si votre html est structuré correctement, de créer des grilles responsive (qui s'adapte à la taille de l'écran de l'utilisateur) très rapidement.

Pour commencer, la structure de votre HTML doit être la suivante :

<div class="flexContainer">
   <div class="colonne">CONTENU</div>
   <div class="colonne">CONTENU UN PEU PLUS LONG</div>
   <div class="colonne">CONTENU TREEEEEEEEES TREEEEEEES LONG...</div>
</div>

Dans votre CSS ajoutez simplement :

.flexContainer {
      display : flex;
}

Le résultat est le suivant : 3 colonne côte à côte dont la taille s'adapte à son contenu

Vous pouvez modifier ce comportement par défaut en CSS en ajoutant la propriété "flex-direction"

.flexContainer {
      display : flex;
      flex-direction : row-reverse;
}

Dans cet exemple la valeur "row-reverse" place mes colonnes à l'envers

Toutes les valeurs de "flex-direction":
• "row" : comportement par défaut, les colonnes sont alignées horizontalement dans le bon sens
• "row-reverse" : les colonnes sont alignées horizontalement dans le sens inverse
• "column" : les colonnes sont placées les unes en dessous des autres
• "column-reverse" : les colonnes sont placées les unes en dessous des autres dans le sens inverse

Disons maintenant que je spécifie une largeur à mes colonnes

.colonne {
      width : 300px;
}

Mes colonnes sont automatiquement redimensionnées pour qu'elles tiennent toutes alignées dans leur container

On peu cependant forcer une taille défini aux colonnes en ajoutant la propriété "flex-wrap" au flexContainer

.flexContainer {
      display : flex;
      flex-wrap : wrap;
}

Pour déterminer l'allignement de vos colonnes dans le container, utilisez la propriété "justify-content"

.flexContainer {
      display : flex;
      justify-content : center;
}

Les autres valeurs de cette propriété sont :
• "flex-start" : valeur par défaut, aligné à gauche
• "flex-end" : aligné à droite
• "center" : aligné au center
• "space-around" : prend tout l'espace en conservant des marges à gauche et à droite

• "space-between" : prend tout l'espace sans conserver de marge

Si j'augmente la hauteur du container, les colonnes s'adaptent pour occuper tout l'espace

Il es possible de changer ce comportement avec la propriété "align-items"

.flexContainer {
      display : flex;
      align-items : center;
      height : 150px;
}

Les autres valeurs possibles sont :
• "stretch" : valeur par défaut, les colonnes occupent toute la hauteur disponible
• "flex-start" : collé en haut du container
• "flex-end" : collé en bas du container
• "center" : centré verticalement dans le container

Suite de l'article : les propriétés des colonnes (en cours d'écriture)

La propriété filter en CSS3 permet de modifier de façon assez sympathique les couleurs d'un élément. Survoler les images pour voir l'effet

Blur permet de flouter un élément. Remplacez X par une valeur en px, indiquant l'étendu du flou. 0px laisse l'élément normal.

Grayscale permet de passer un élément de couleur en nuance de gris, 0 n'a aucun effet, et 1 passe l'élément en noir et blanc. Vous pouvez utiliser les décimaux de 0 à 1 (0.3 ; 0.4 ; etc...)

Le même fonctionnement que grayscale, en mettant l'élément en sepia. Utilisez les valeurs de 0 à 1.

Brightness vous permet d'augmenter la luminosité d'un élément.
0 represente le noir
1 l'élément normal
Vous pouvez ensuite aller jusqu'à 10 pour augmenter la luminosité

Même fonctionnement que brightness, Contrast permet d'augmenter le contraste entre les couleur.
0 n'a aucun contraste, ce qui affiche un élément gris
1 ne modifie rien
Vous pouvez ensuite aller jusqu'à 10 pour augmenter le contraste.

Hue-Rotate fait "tourner" la teinte des couleurs. En tournant de 180° vous inversez les teintes.
Je parle bien de teinte et non de couleur. Cette propriété n'a aucun effet sur les éléments en nuance de gris.

Invert inverse les couleurs d'un élément.
0 ne modifie rien
0.5 rend l'élément d'un gris uni
1 inverse totalement les couleurs

Saturate permet de modifer la saturation des couleurs.
0 met l'élément en nuance de gris
1 ne modifie rien
10 sature au maximum

Comment régler l'opacité des images, d'un élément ou d'une couleur? Avec la propriété "opacity" ou avec les couleur rgb et la valeur alpha ;)

Opacity admet une valeur entre 0 (transparent) et 1 (totalement visible). Si vous voulez nuancer l'opacité, mettez par exemple 0.5
/!\ Il faut mettre un point, non une virgule ;)
Ecrite ainsi, cette propriété modifie l'opacité de tout un élément: texte, image, fond, ombre...

Pour que seule les images est une opacité plus faible (et que votre article ne devienne pas transparent en même temp) il faut écrire le sélécteur, en précisant que les propriété ne s'appliqueront qu'aux images:

Maintenant, seules les images à l'interieur de se sélecteur auront une opacité différente.

Certaine fois, il serait pratique de pouvoir rendre une couleur un peu plus transparente, comme le fond d'un article, sans  que le texte ne devienne aussi transparent. Pour cela, on utilise rgba.
Il faut savoir maitriser les couleur rgb (voir Couleur) auquel on rajoute la valeur alpha qui va nous permettre de régler l'opacité. On note le code suivant:

On change les valeur de Rouge, Vert et Bleu avec un nombre compris entre 0 et 255 pour donner la couleur. Ensuite, on change Alpha par une valeur comprise entre 0 (transparent) et 1 (totalement visible). Comme pour opacité, on note 0.5 avec un point, non avec une virgule.

/!\ ça semble logique, mais rgba ne s'utilise qu'avec des propriété qui utilise des couleur comme background-color, color, box-shadow...

Le propriété color concerne uniquement la couleur du texte et s'écrit de la façon suivante :

sélecteur {
   color: #COLOR;
}

Voyons maintant quelques exemple concrets :

p {
   color: red;
}
p a {
   color: green;
}

Vous pouvez utiliser les couleurs nommées, les code hexa, le rgb, ainsi que le rgba pour avoir du texte transparent

p {
   color: rgba(255,0,0,0.5);
}

Référez-vous à cet article si vous voulez en savoir plus sur l'utilisation des couleurs

Retour aux Propriétés