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 […]

Posté le par Benoît Philibert|8200 vues

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 :

align-self-*
align-self-*
Coinbase
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 :

alignements horizontaux avec flexbox
alignements horizontaux avec flexbox


Ces articles pourraient vous intéresser

Tags

7 commentaires

    • froeliger
    • (1 décembre 2017 at 21 h 10 min)

    Merci beaucoup je suis en apprentissage web master et ton article est très bien écrit

    • Cindy
    • (29 janvier 2018 at 17 h 20 min)

    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 !

    • 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 😉

  • 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

    • zo
    • (18 septembre 2018 at 6 h 26 min)

    merci bien pour ton tuto j’espere aprendre vite

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.