olivier evrard

*********************
*********************

1.7 Web

Positionner plusieurs colonnes avec CSS

Float

Avant, le positionnement se faisait en utilisant la propriété float. Mais cela était un détournement. Car float est là et uniquement là pour faire de l’habillage autour d’un élément. Ce n’est donc plus une bonne idée pour faire une bonne mise en page.

Inline-block

Ensuite, on a longtemps utilisé la valeur inline-block de la propriété display pour mettre en page en plusieurs colonnes d’une manière encore plus facile. Les éléments inline-block sont comme des éléments en ligne mais ils peuvent avoir une largeur et une hauteur et surtout un comportement de block. Cela fonctionne bien mais CSS 3 a ensuite amené une déclaration vraiment réfléchie depuis le début pour positionner un ou plusieurs blocs : flexbox.

Flexbox

Aujourd’hui, les déclarations CSS de positionnement ont bien évolués et CSS 3 apporte une nouvelle déclaration très puissante : flexbox. Nous utiliserons donc maintenant flexbox pour positionner.

/* Exemple FLEXBOX */

.conteneur
{
    display: flex;
    justify-content: space-between;
}

Attention pour aligner la hauteur d’une bordure sur la hauteur d’un bloc géré par flex, il faudra assigner à ce bloc la déclaration CSS suivante :

height: 100%;

Théorie Flexbox

Exercices

*********************