4.7 KiB
Positionnements avec KNACSS
Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions.
Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée.
Différents choix offerts
Les types de positionnements inclus nativement dans KNACSS sont les suivants :
- positionnement flottant
- positionnement avec
display: inline-block - positionnement avec
display: table-cell - positionnement avec Flexbox
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
Votre décision pourra être guidée par les indices suivants :
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (
float,position: absolute) - Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
Concrètement : je veux faire quoi ?
Deux blocs voisins de largeur fixe
Les choix offerts avec KNACSS :
flottant et flottant
La classe .fl pour float: left permet à un élément d'être flottant à gauche.
Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
HTML :
<div class="fl w400p">premier</div>
<div class="fl w400p">deuxième</div>
- Avantage : simple, rapide, intuitif, hyper compatible
- Inconvénient : positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements)
inline-block et inline-block
La propriété display: inline-block (sous forme de classe .inbl chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné.
HTML :
<div class="inbl w400p">premier</div>
<div class="inbl w400p">deuxième</div>
- Avantage : positionnement dans le flux, compatible dès IE8
- Inconvénient : un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
table-cell et table-cell
HTML :
<div class="row">
<div class="col w400p">premier</div>
<div class="col w400p">deuxième</div>
</div>
- Avantage : positionnement dans le flux, compatible dès IE8
- Inconvénient :
flexbox
HTML :
<div class="flexbox">
<div class="w400p">premier</div>
<div class="w400p">deuxième</div>
</div>
- Avantage :
- Inconvénient :
Deux blocs voisins dont un fixe et un fluide
Les choix offerts avec KNACSS :
flottant et .mod
HTML :
<div class="fl w400p">premier</div>
<div class="mod">deuxième</div>
inline-block et inline-block
Pas possible [Résolu]
table-cell et table-cell
HTML :
<div class="row">
<div class="col w400p">premier</div>
<div class="col">deuxième</div>
</div>
flexbox
HTML :
<div class="flexbox">
<div class="w400p">premier</div>
<div class="flexitem-fluid">deuxième</div>
</div>
Deux blocs voisins de même hauteur
Les choix offerts avec KNACSS :
flottant et flottant
Pas possible [Résolu]
inline-block et inline-block
Pas possible [Résolu]
table-cell et table-cell
Par défaut, les éléments constituant des "cellules de tableau", donc table-cell ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
HTML :
<div class="row">
<div class="col">premier</div>
<div class="col">deuxième</div>
</div>
flexbox
Là aussi c'est automatique : les enfants d'un conteneur flexbox ont tous par défaut la même hauteur.
HTML :
<div class="flexbox">
<div>premier</div>
<div>deuxième</div>
</div>
Plusieurs blocs voisins de même taille
Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de grilles offertes par KNACSS.