Les applications concrètes de Flexbox, suite : encore une solution simple à un problème compliqué de mise en page, présentée par David Walsh. Mais pourquoi diable a-t-il fallu attendre si longtemps?
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 !
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.
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 !
Autoprefixer pour s'occuper à votre place des préfixes constructeurs.
NDT 1 : le CSS est encore plus simple si vous vous en remettez àLayout sur 12 colonnes avec Flexbox !
NDT 2 : pour une mise en page plus complexe, voyez l'article génial de Landon SchroppInté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.
(publicité)
Traduit avec l’aimable autorisation de l’auteur.
Copyright David Walsh © 2015.
Sur l’auteur : David Walsh est développeur web chez Mozilla, conférencier, développeur du framework MooTools et il a bien d’autres cordes à son arc. On peut le suivre sur Twitter, Google+, Facebook.