Positionner des éléments HTML avec les flexbox CSS

Il y a peu, nous avons publié un article pour centrer verticalement ou horizontalement un élément html. Ici, nous invitons à découvrir les flexbox. Peu utilisées jusqu’à présent, aujourd’hui tous les navigateurs modernes les interprètent correctement. Alors, faut pas se priver !

Postionner des éléments HTML avec les flexbox CSS

Positionner des éléments html avec les flexbox

Pour savoir comment mettre en page des éléments HTML dans une page html, nous vous inviterons à suivre un tutoriel relativement succinct mais néanmoins très accessible pour ceux qui ont la chance de comprendre le langage html et les styles CSS.

Le principe reste relativement simple puisqu’il s’agit d’un conteneur et de ses éléments. Ces mêmes éléments pourront à l’aide des propriétés CSS  :

  • Disposés en ligne
  • Disposés en colonnes
  • Distribués en largeur
  • Distribués en hauteur
  • Alignés horizontalement ou verticalement voire les deux
  • Intervertis dans modifier le flux
  • Redimensionner pour occuper la place disponible
  • Renvoyer à la ligne

Pour le peu que l’on prend le contrôle des flexbox avec du Javascript, les possibilités deviennent énormes. A vous de voir, si vous souhaitez à présent apprendre à coder en javascript pour améliorer l’expérience utilisateur avec toujours plus d’interactivité.

Apprendre à centrer un élément HTML verticalement et horizontalement

Cela devient bête comme chou avec les flexbox ! Pour preuve avec le code ci-dessous. Un conteneur et un élément à centrer.

Pour la partie CSS

#conteneur
{
 display: flex;
}

.element
{
 margin: auto;
}

Pour la partie HTML

<div id="conteneur">
 <div class="element">Elément 1</div>
 <div class="element">Elément 2</div>
 <div class="element">Elément 3</div>
</div>

Un exemple d’élément centré avec une mise en forme un peu plus étoffée. Attention, n’oubliez pas que pour être centrés verticalement, vos éléments doivent être dans un conteneur dont la hauteur a été au préalable définie.

Positionner des éléments HTML avec les flexbox CSS
Votez pour ce billet !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *