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

49 lines
1.9 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">
<img src="licorne.png">
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
HTML :
```html
2015-03-07 14:36:58 +01:00
<section class="flexbox-v">
<div class="center w50">centré horizontalement et verticalement</div>
</section>
2015-03-06 17:20:33 +01:00
```