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>
flexbox
pour plus de clarté. Attention tout de même à ne pas vous emmêler les pinceaux.
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.
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 :

justify-content-around
et justify-content-between
peut être mal interprété. La classe justify-content-between
dispose le premier objet au début de l’axe et le dernier à la fin de l’axe. La classe justify-content-around
distribue l’espace de façon équitable. Tous les objets ont le même espace de chaque côté.
7 commentaires
froeliger
Merci beaucoup je suis en apprentissage web master et ton article est très bien écrit
Benoît Philibert
Merci beaucoup !
Cindy
Merci beaucoup pour ton site et les explications Bootstrap 4. Je commence un nouvel emploi et ils utilisent que celui-ci, hors je n’utilisais que la version 3. J’avais du mal à me mettre dans le bain, mais grace à toi tout va mieux !
Benoît Philibert
Merci, je vais essayer de fournir beaucoup plus de contenus sous formes vidéo our texte dans les prochaines semaines/mois et ce genre de feedbacks me prouvent qu’il est temps de s’y remettre 😉
yves Accard
Bonjour et merci pour ce tuto concernant l’alignement horizontal.
Je ne vois pas comment je pourrais l’utiliser pour faire de l’indentation.
Par exemple, ma première ligne commence par :
1) ceci est ma première ligne………………………………
Et je voudrais que ma deuxième ligne et les suivantes, soient décalées de la gauche de quelque pixels.
Encore merci
Yves
Benoît Philibert
Bonjour Yves, pour faire de l’indentation rien de mieux qu’une ul li dans une autre ul li.
Regardez par là => https://getbootstrap.com/docs/4.0/content/reboot/#lists
zo
merci bien pour ton tuto j’espere aprendre vite