KNACSS/doc/02a-layout-alignements.md

65 lines
2.3 KiB
Markdown
Raw Normal View History

2015-03-07 14:36:58 +01:00
# Alignements
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
- les textes et contenus "inline" sont gérés via les classes `.txtleft`, `.txtright` et `.txtcenter` qui agiront sur la propriété CSS `text-align`
- les blocs sont alignés avec les classes `.left`, `.right` et `.center` qui affectent la valeur `auto` à la propriété `margin`
- les flottements sont gérés via les classes `.fl` (pour `float: left`) et `.fr` (pour `float: right`)
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
## Cas des flottants et les .mod
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
## Concrètement : je veux faire quoi ?
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
### Centrer horizontalement
2015-03-06 17:20:33 +01:00
2015-03-07 14:36:58 +01:00
#### Du texte ou une image
2015-03-06 17:20:33 +01:00
HTML :
```html
2015-03-07 14:36:58 +01:00
<div class="txtcenter">
2015-03-07 21:36:07 +01:00
<img src="licorne.png" alt="aïe ça pique">
2015-03-06 17:20:33 +01:00
</div>
```
2015-03-07 14:36:58 +01:00
#### Un bloc
2015-03-06 17:20:33 +01:00
HTML :
```html
2015-03-07 14:36:58 +01:00
<section>
<div class="center w50">centré horizontalement</div>
</section>
2015-03-06 17:20:33 +01:00
```
2015-03-07 14:36:58 +01:00
### Centrer verticalement
2015-03-06 17:20:33 +01:00
2015-03-07 14:53:44 +01:00
![centrer verticalement](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/02-layout.png)
Version table-cell (HTML) :
```html
<section class="col">
<div class="w50 center">centré horizontalement et verticalement</div>
</section>
```
Version table-cell (CSS) :
```css
section {
vertical-align: middle;
}
```
Version flexbox (HTML):
2015-03-06 17:20:33 +01:00
```html
2015-04-13 16:31:44 +02:00
<section class="flex-container-v">
2015-03-07 14:36:58 +01:00
<div class="center w50">centré horizontalement et verticalement</div>
</section>
2015-03-06 17:20:33 +01:00
```