COMMENT UTILISER FLEXBOX?

de1

Imaginez que vous pouvez construire un layout très compliqué en quelques minutes ! Maintenant c’est possible avec Flexbox. Flexbox est un modèle de boîte flexible, un nouveau layout CSS qui offre la possibilité de créer facilement des maquettes dynamiques.

Ce modèle a les avantages suivants :

• Réorganisation des éléments indépendamment de l’ordre du flux,
• Alignements et positionnement au centre horizontalement et verticalement, justification, répartition,
• Distribution des éléments horizontaux ou verticaux, avec passage à la ligne autorisé ou non,
• Gestion des espaces disponibles.

Vous avez peut-être entendu dire que la plupart des navigateurs ne comprennent pas Flexbox ? C’est faux : 93% des internautes utilisent des navigateurs compatibles à ce nouveau layout.

Nous allons créer un dé pour comprendre ce qu’est un Flexbox.

Face 1

Nous avons un dé à 6 faces. Pour commencer, on prend la face numéro 1. Donc on commence par l’HTML :
<div class= »first-face »>
<span class= »pip »></span>
</div>

On ajoute des styles classiques pour les faces et  les points. Voici le résultat !

de2

Avant tout il ne faut pas oublier de dire au navigateur que .firtst-face, с’est  un « flex-container » permettant de créer un contexte général d’affichage :

.first-face {
  display: flex;
}
de3

Au premier regard rien de spécial mais en réalité cela change tout.

de4

Par défaut l’axe principal est un axe horizontal. Si on ajoute encore un point sur cette face on l’affichera à droite.

L’attribut justify-content définie l’alignement le long de l’axe principal. Cependant, pour placer ce point au milieu il faut utiliser center.

.first-face {

  display: flex;
  justify-content: center;
}

de5

Maintenant ce point se trouve au centre de élément parent.

L’attribut align-items détermine comment placer les éléments le long de l’axe horizontal. Pour le placer au centre il faut utiliser center.

Сomme auparavant :

.first-face {
  display: flex;
  justify-content: center;
  align-items: center;
}
de6

Voilà ! Le point se trouve au centre et au milieu !

Face 2

Ici, le premier point se trouve dans le coin gauche au dessus.

Et comme toujours on commence par le marquage

<div class="second-face">
  <span class="pip"></span>
  <span class="pip"></span>
</div>

.second-face {

  display: flex;
}
de7

Ensuite on ajoute de l’espace entre les deux points.

justify-content

pour cela on utilise l’attribut space-between

.second-face {
  display: flex;
  justify-content: space-between;
}

de8

Maintenant nous avons un problème : on ne peut plus utiliser  align-items pour ne pas influencer les deux points. Heureusement flexbox a align-self pour corriger ce problème.

.second-face {
  display: flex;
  justify-content: space-between;
}
 .second-face .pip:nth-of-type(2) {
  align-self: flex-end;
}

Face 4

C’est encore plus intéressant! Il faut supporter deux colonnes avec 2 points (chacune).

<div class="fourth-face">
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>
  <div class="column">
    <span class="pip"></span>
    <span class="pip"></span>
  </div>

</div>

Pour ajouter plus d’espace on utilise justify-content: space-between

.fourth-face {
  display: flex;
  justify-content: space-between;
}

de11

Attention: il ne faut pas oublier d’ajouter display: flex pour que ce soit des « flex-containers ». Ainsi on peut utiliser flex-direction (pour indiquer la direction de l’axe horizontal) :

.fourth-face {
  display: flex;
  justify-content: space-between;
}

.fourth-face .column {

  display: flex;
  flex-direction: column;
}

de12

Et comme d’habitude on utilise  justify-content pour terminer nos modifications :

.fourth-face {
  display: flex;
  justify-content: space-between;
}
.fourth-face .column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

de13

C’est fini. Maintenant vous pouvez créer tous les faces du dé vous-même. Bonne chance ! 🙂

Articles similaires

4 raisons de ne pas désactiver le zoom en responsive design

 

Votre site utilise un design responsive et vous vous demandé s’il faut désactiver le zoom ?

Après tout, il faut beaucoup d’efforts pour que votre site s’affiche correctement. Le « pincement pour zoomer » a-t-il été créé pour les vieux sites où il n’y avait pas d’autres moyens de s’en sortir ?

Actuellement avec les sites web responsives, chaque objet est à sa place : l’utilisateur n’a pas besoin du zoom. Ce serait donc logique de le désactiver, pourtant voici quelques raisons de ne pas le faire : Читать дальше...

5 sites e-commerce pour acheter votre sapin de Noël en ligne

Les Fêtes approchent à grands pas et il faut déjà préparer les cadeaux pour vos amis et votre famille;  acheter un sapin vert: le principal attribut du soir de Noel et du Nouvel An ! Cette année, vous pouvez gagner du temps et ne pas passer 2 ...