Les alignements avec Flexbox sur Bootstrap 4

Flexbox est un formidable outil de customisation. Comme vous le savez déjà, Bootstrap 4 en version alpha 6 intègre Flexbox à 100% à fin de permettre une adaptation de contenu plus simple et plus rapide.

L’une des angoisse de l’intégrateur ou plus généralement de l’initié au CSS intégrant son projet est la disposition verticale des éléments. En effet, de mon côté cela a toujours été un frein lorsque je veux aligner verticalement des éléments en fonction d’un conteneur. Avec flexbox et la propriété align-items, cette difficulté s’évapore en un coup de baguette magique.

Pour rappel, nous avons abordé flexbox dans l’article Auto-layout, une des nouveautés Bootstrap 4 alpha 6.0

La propriété align-items

La propriété align-items permet d’aligner les éléments flexibles d’une ligne ou d’une colonne flexible. Elle fonctionne de la même façon que justify-content mais dans la direction orthogonale. Cette propriété définit l’alignement des objets à l’intérieure de la ligne ou de la ligne flexible courante alors que align-content définit l’alignement des lignes/colonnes entre elles.

source MDN

Parmis les attributs proposés par la propriété CSS align-items on en trouve trois clairement définit : flex-start;, flex-end; et center;.

Bootstrap intègre ces propriétés de la manière suivante :

/* On aligne sur la ligne cross-start */
<div class="row align-items-start">
<div class="col">One of three columns</div>
</div>
/* On aligne sur la ligne cross-start */
<div class="row align-items-center">
<div class="col">One of three columns</div>
</div>
/* On aligne sur la ligne cross-end */
<div class="row align-items-end">
<div class="col">One of three columns</div>
</div>

L’alignement auto avec align-self

Dans sa documentation, Bootstrap propose un exemple de positionnement vertical avec la propriété CSS align-self. Cette dernière permet d’aligner les éléments flexibles sur une même rangée. Dans la représentation ci-dessous, nous pouvons nous rendre compte que les éléments s’alignent horizontalement et verticalement en fonction des uns et des autres et de la classe employée sur chacun :

<div class="container">
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>

Le rendu est tout aussi parlant :

Acheter et vendre des cryptomonnaies

Coinbase est l’endroit idéal pour acheter, vendre et gérer votre portefeuille de cryptomonnaies. Coinbase est la plateforme numéro 1 dans le monde avec plus de 20 millions d’utilisateurs.

Acheter sur Coinbase

L’alignement horizontal

Bon vous vous attendiez à voir apparaître ce titre. Bien entendu, si Bootstrap propose un alignement à tendance vertical, on pouvait facilement imaginer qu’ils allaient proposer le complément horizontal avec flexbox. C’est la propriété CSS justify-content qui s’y colle.

Toujours selon MDN, « La propriété justify-content définit la façon dont le navigateur distribue l’espace entre les objets flexibles selon l’axe principal de leur conteneur.. ».

Un autre intérêt d’utiliser flexbox est que le système est très bien organisé. En effet, la propriété justify-content utilise les même attributs que align-items avec flex-start;, flex-end; et center;. De son côté, Bootstrap embarque toujours des classes distinctes à intégrer directement dans vos balises html.

<div class="container">
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Rendu :