Techniques Flexbox, 2 : centrer verticalement

Le centrage vertical est depuis toujours un cauchemar pour les développeurs web, et même s'il existe des solutions, aucune n'égale flexbox par sa simplicité. Un article concis de David Walsh.

Par

J’ai 31 ans et j’ai l’impression d’être dans l’arène du développement web depuis déjà des siècles. Nous avons été conscients pendant tout ce temps que la mise en page avec CSS pouvait être un cauchemar et nous avons considéré Flexbox comme notre sauveur. Cela reste encore à voir, mais ce qui est sûr c’est que flexbox résout facilement un problème qui nous empoisonne la vie depuis trop longtemps : le centrage vertical en CSS. Je vais vous montrer à quel point c’est facile !

 Voir la démo

Le centrage vertical suppose un parent et des éléments enfants...

<div class="flexbox-container">  
    <div>Blah blah</div>
    <div>Blah blah blah blah blah ...</div>
</div>  

...mais seul l’élément parent a besoin des propriétés CSS pour centrer verticalement les éléments enfants :

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

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

Mis à part les préfixes constructeurs ( NdT : problème facilement résolu avec Autoprefixer), c’est du CSS tout ce qu’il y a de plus simple ! Le centrage vertical sans flexbox est semé d’embûches, il est donc encourageant de voir que les choses évoluent dans le bon sens. Je ne suis pas encore persuadé que flexbox résoudra tous les problèmes de mise en page, mais il nous retire déjà une sacrée épine du pied pour ce qui concerne le centrage.

 NdT : Retrouvez plus d’infos sur align-items et d’autres propriétés flexbox dans le Dico CSS (work in progress).


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.



original paru le dans DWB, le blog de David Walsh.

Sur l’auteur : 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.

Traduit avec l’aimable autorisation de DWB et de l’auteur.
Copyright David Walsh © 2015.