Plan du cours
Qu’est-ce que Flexbox ?
Flexbox est le système le plus abouti pour mettre en page des éléments sur une page web d’autant plus qu’il est maintenant compatible avec tous les navigateurs.
Fini les float: left ou les float: right etc.
Flexbox va aussi vous simplifier la vie pour l’adaptabilité de votre site aux différents écrans (responsive).
Aucune hésitation à avoir c’est clairement la méthode css à connaitre de nos jours.
Avant la création de flexbox
Pour placer les éléments on a utilisé:
- Les tableaux
- les floats
- Les positions
- Les display : inline / block / inline-block
Revenons brièvement sur les display:
- display: inline;
- Les éléments se mettent à côté les uns des autres.
- Ils ne peuvent pas être redimensionnés, les width et les height ne marchent pas sur les éléments inline car ce ne sont pas des blocks.
- display: block;
- Les éléments occupent toute la largeur et se positionnent les uns en-dessous des autres.
- Les éléments peuvent être redimensionnés avec width et height.
- display: inline-block
- Les éléments sont inline mais peuvent être redimensionnés comme un block.
Exemple:
créons un conteneur avec 3 éléments à l’intérieur que nous allons styliser avec du css pour bien les délimiter.
La première classe va déterminer la hauteur et la largeur des éléments.
La seconde va déterminer la couleur des éléments.
Nous voyons ici que les <div> étant des blocks, ils se positionnent les uns en-dessous des autres.
Pour les positionner les uns à côté des autres on peut utiliser display: inline; (mais dans ce cas la largeur et la hauteur prédéfinies ne fonctionnent plus),
Ou bien nous pouvons utiliser display: inline-block; et dans ce cas, en plus de s’aligner côte à côte, les éléments garderont aussi leurs propriétés de style block, c’est-à-dire leurs largeurs et hauteurs prédéfinies.
Si je rajoute des éléments, ces derniers vont se placer en-dessous des autres sur une autre rangée car ils ne sont pas flexibles et c’est là que flexbox va tout changer.
Déclarer une FlexBox (boite modulable)
Bien, il est temps maintenant de rentrer dans le vif du sujet.
display: flex
La première chose à faire lorsqu’on veut utiliser flexbox et de définir un conteneur.
<div id= »conteneur »>
Nous donnons ensuite à ce conteneur une propriété css primordiale qui est : display: flex et qui signifie que notre conteneur devient flexible (je vais y revenir plus tard).
#conteneur{
display: flex;
}
Reprenons l’exemple ci-dessus (1 conteneur avec 3 éléments) mais cette fois-ci nous allons rajouter la propriété display: flex au conteneur :
Vous allez me dire que pour l’instant ça ne change rien par rapport à la propriété display: inline hormis le fait que le code soit simplifié.
Ok, mais que se passe-t-il si je rajoute des éléments ?
Tous les éléments qui se trouvent à l’intérieur du conteneur sont devenus flexibles !
Flexbox adapte les éléments à la taille de l’écran et continue de les aligner sur la même ligne.
Faites le test en rétrécissant la taille de votre page.
Empiler les éléments les uns en-dessous des autres (position verticale)
flex-direction
Cette propriété détermine dans quelle direction le conteneur va placer ses éléments.
Elle peut contenir 4 valeurs différentes :
- flex-direction: column; aligne les éléments les uns en-dessous des autres (verticalement) du haut vers le bas du conteneur.
- flex-direction: column-reverse; aligne les éléments les uns en-dessous des autres (verticalement) du bas vers le haut du conteneur.
- flex-direction: row; aligne les éléments côte à côte sur la gauche.
- flex-direction: row-reverse; aligne les éléments côte à côte et les place complètement à droite (un peu à la manière de float :right).
Pour aligner nos éléments en position verticale, on rajoute au conteneur la propriété :
flex-direction: column;
#conteneur{
display: flex;
flex-direction: column;
}
Si je veux inverser les éléments, je vais utiliser flex-direction: column-reverse;
display: flex;
flex-direction: column-reverse;
}
Voyons rapidement le résultat que donnent les deux autres valeurs de flex-direction.
flex-direction: row;
flex-direction: row-reverse;
display: flex;
flex-direction: row;
}
#conteneur{
display: flex;
flex-direction: row-reverse;
}
Gérer le retour à la ligne
flex-wrap
On l’a vu, avec flexbox, les éléments s’adapte à la taille de votre page mais du coup si on rétrécie la page les éléments rétrécissent aussi même si on leur a donné un taille précise, ici 400px.
Si on veut que nos éléments gardent une largeur de 400px on doit les forcer à retourner à la ligne lorsqu’il n’y a plus de place.
Nous allons utiliser la propriété flex-wrap: wrap sur le conteneur ce qui va forcer les éléments à aller à la ligne lorsqu’il n’y a plus de place.
#conteneur{
display: flex;
flex-wrap: wrap;
}
Je peux la aussi inverser les éléments avec la propriété : flex-wrap: wrap-reverse;
*A noter que flex-wrap: nowrap; n’est rien de plus que la valeur par défaut.
Il existe aussi la propriété flex-flow qui combine à la fois la propriété flex-direction et la propriété flex-wrap mais elle est peut utilisée.
#conteneur{
display: flex;
flex-flow: row wrap;
}
Bien dans cette première partie nous avons vu comment donner une direction a nos éléments à l’intérieur de leur conteneur.
Horizontal, vertical, sans ou avec retour a la ligne.
Nous avons vu pour ça les propriétés :
- diplay: flex
- flex-direction: column / column-reverse / row / row-reverse;
- flex-wrap: wrap / nowrap / wrap-reverse;
- flex-flow
Dans la seconde partie nous verrons comment aligner nos éléments de façons beaucoup plus pointues que seulement en leur donnant une direction.
Avant de passer à la leçon suivante je vous invite vivement à bien maitriser celle-ci, testez les différentes propriétés et valeurs dans tous les sens jusqu’à être parfaitement confortable avec.
cool merci ils sont super vos tutos j’apprend tellement et bien