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. Le « display : flex » permet de mettre en page tous les éléments contenus dans votre balise. Le « justify-content: space-between » permet de repartir les blocs avec le même espace dans le conteneur. Enfin le « align-items: flex-start » va réduire la hauteur du bloc a sa propre dimension et le placer en haut.
/* Exemple FLEXBOX */
.conteneur
{
display: flex;
justify-content: space-between;
align-items: flex-start;
}Théorie Flexbox
Exercices