Techniques Flexbox, 3 : layout sur 2 colonnes

Par David Walsh

Flexbox était censé être le bout du long, long tunnel des insuffisances de CSS, et je dois dire que ma seule déception à ce jour est liée au temps qu’il aura fallu aux constructeurs de navigateurs pour l’implémenter.

Je ne prétends pas avoir poussé flexbox jusqu’à ses limites, mais cette technique m’a permis de réaliser quelques tâches jusqu’ici très compliquées. L’une d’elles était la gestion facile du centrage vertical avec flexbox.

Ma tâche suivante a été de créer un layout responsif sur deux colonnes, avec des colonnes de même largeur et une marge de dimension fixe (en pixels), ainsi qu’un peu de padding. Ça s’est avéré terriblement simple… et c’est pour cela que j’aime Flexbox !

 Voir la démo

Le HTML

Dans notre balisage HTML, nous devons avoir un élément parent et deux éléments enfants :

<div class="flexbox-container">  
    <div><h3>Column 1</h3></div>
    <div><h3>Column 2</h3></div>
</div>  

Le contenu de chaque colonne peut avoir n’importe quelle hauteur, ce n’est pas important ici.

Le CSS

Le CSS est également incroyablement simple et concis :

.flexbox-container {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
}

.flexbox-container > div {
    width: 50%;
    padding: 10px;
}

.flexbox-container > div:first-child {
    margin-right: 20px;
}

On règle le display de l’élément parent sur flexbox, puis on donne à chaque élément enfant une largeur de 50%. Ce qui est sympa avec flexbox, c’est qu’on peut ajouter du padding, des bordures ou des marges aux éléments enfants sans avoir à s’inquiéter d’un débordement éventuel d’une colonne, renvoyée à la rangée du dessous.

 Voir la démo

J’étais super content quand j’ai appris CSS calc et je voulais faire un shim de ce que flexbox peut faire aujourd’hui, mais maintenant que flexbox est supporté par tous les navigateurs modernes, je n’ai plus besoin de CSS calc pour les mises en page. Excellent ! je suis vraiment content que flexbox soit là — les tâches qui auraient toujours dû être faciles le sont vraiment aujourd’hui !

NDT 1 : le CSS est encore plus simple si vous vous en remettez à Autoprefixer pour s'occuper à votre place des préfixes constructeurs.

NDT 2 : pour une mise en page plus complexe, voyez l'article génial de Landon Schropp Layout sur 12 colonnes avec Flexbox !

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur Flexbox parus dans la Cascade.