KNACSS/doc/02b-layout-positionnement.md

# 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

![Deux blocs voisins de largeur fixe](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout1.png)

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 :
```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 :
```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 :
```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 :
```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

![Deux blocs voisins de largeur fixe et fluide](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout2.png)

Les choix offerts avec KNACSS :

#### flottant et .mod

HTML :
```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 :
```html
<div class="row">
    <div class="col w400p">premier</div>
    <div class="col">deuxième</div>
</div>
```

#### flexbox

HTML :
```html
<div class="flexbox">
    <div class="w400p">premier</div>
    <div class="flexitem-fluid">deuxième</div>
</div>
```

### Deux blocs voisins de même hauteur

![Deux blocs voisins de même hauteur](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout3.png)

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 :
```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 :
```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.

### Centrer horizontalement

#### Du texte ou une image

#### Un bloc

### Centrer verticalement