Techniques Flexbox, 1 : titre aligné et retour à la ligne

Premier article d’une série sur les applications pratiques de Flexbox. Chris Coyier résout un problème d'alignement de titre et de sous-titre avec retour à la ligne, compliqué sans flexbox.

Par

L’autre jour, je me suis trouvé dans une situation où j’avais besoin d'éclater un titre en deux sections. Le titre principal, en grand et en gras, aligné à gauche comme un titre habituel et un sous-titre, aligné à droite, sur la même ligne que le titre. Quand il y a de la place pour les deux, tout va bien. Mais évidemment le texte peut changer et l’espace disponible dépend de votre design.

J'aimerais avoir deux mises en page, l'une avec le titre et le sous-titre alignés, lorsqu'il y a suffisamment d'espace, et l'autre avec les deux titres superposés et alignés à gauche, lorsqu'il n'y a pas assez de place. Regardons cela de plus près.

Pour commencer, voici ce à quoi ressemble notre mise en page lorsqu’il y a suffisamment de place :

le titre principal est aligné à gauche, le sous-titre à droite, sur une même ligne

S’il n’y a pas assez de place, que ce soit à cause de la taille de l’écran ou de la longueur du sous-titre, nous voulons un retour à la ligne aligné à gauche, comme ceci :

le sous-titre est aligné à gauche, sous le titre principal

Il existe de nombreuses façons d’aligner le sous-titre à droite lorsqu’il y a de l’espace pour cela.

  • Nous pourrions le positionner absolument à droite. Le problème principal de cette solution est que les éléments positionnés absolument sortent du flux du document, par conséquent on n’a pas moyen de savoir quand opérer le retour à la ligne par rapport au titre. Il nous faudrait spécifier des largeurs, ce que nous ne voulons pas faire dans ce cas.
  • Nous pourrions le flotter à droite. De cette manière, nous n’avons pas à spécifier de largeur et le texte reste dans le flux du document, ce qui est très bien. Cependant, au moment où le retour à la ligne est nécessaire, le texte reste accroché à droite au lieu d’être joliment aligné à gauche comme souhaité.
  • Nous pourrions transformer tout cela en table, ce qui nous permettrait d’aligner le sous-titre à droite sans problème. Mais les cellules d’un tableau ne peuvent pas être renvoyées à la ligne, donc nous ne pouvons obtenir la mise en page recherchée.

Heureusement, Flexbox peut nous aider ! En faisant du bloc titre un container flex grâce display: flex; et en appliquant flex-grow sur le titre lui-même flex-grow: 1; ce dernier pousse le sous-titre jusqu’au bout à droite. Les containers flex peuvent retourner à la ligne, ce dont nous nous assurons en faisant flex-wrap: wrap;.

Voici une vidéo montrant les premières méthodes (pas terribles) et le gagnant du jour, flexbox :

Et une démo live sur CodePen (comme d’habitude, vous pouvez cliquer sur les onglets HTML, SCSS et Result pour voir le code et sur Edit on CodePen si vous voulez jouer avec) :


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

Tous les articles sur Flexbox parus dans la Cascade.


Ressources complémentaires en anglais

Sur Flexbox

W3C, recommandation Flexbox
Flexbox, in Codrops CSS reference, long article détaillé de Sara Soueidan
Using Flexbox today, par Chris Wright
A designer’s guide to Flexbox, de Philip Walton
Solved by Flexbox, de Philip Walton, une démonstration par l’exemple de tout les problèmes que Flexbox peut résoudre.
Flexbox cheatsheet, l’antisèche de flexbox, un excellent complément à cet article, beaucoup d’exemples pratiques de positionnement.
Flexbox Cheatsheet Cheatsheet, par Joni Trythall, une superbe antisèche à télécharger, super pratique !
Flexbox, The next generation of CSS layout has arrived, par Nick Pettit (Treehouse)

Outils pour expérimenter Flexbox en ligne

Flexplorer
Flexbox adventures, par Chris Wright
CSS Flexbox Please!
Flexy Boxes
Un terrain de jeu pour comprendre Flexbox.

Ressources complémentaires en français

CSS3 Flexbox Layout module, par Raphael Goetter
Utiliser Flexbox, par Sean Fioritto (ici-même) : Sean répond ici à la question “quand pourrai-je utiliser Flexbox dans le monde réel ?”



original paru le dans CSS-Tricks.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.

Traduit avec l’aimable autorisation de CSS-Tricks et de l’auteur.
Copyright CSS-Tricks © 2015.