Flexbox
Flexbox est une méthode de mise en page unidimensionnelle permettant de disposer les éléments en colonnes. Les éléments s'adaptent (s'étendent) pour remplir un espace supplémentaire ou rétrécissent pour s'adapter à des espaces plus petits. Cet article explique tous les principes de base.
Exemple simple
Si on a une section avec trois enfants qu'on aimerait afficher sur 3 colonnes, on peut utiliser flexbox.
<section id="intro">
<div>Premiere</div>
<div>Deuxieme</div>
<div>Troisieme</div>
</section>Et dans notre style.css on precise qu'on veut l'afficher en flex avec display .
section#intro {
display: flex;
}Et voila!
Exemple avec 3 colonnes égales
Avant chaque colonne prends la largeur de son contenu, si on veut qui les trois colonnes s'entendent sur l'espace disponible on peut utiliser flex sur chaque colonne.
<section id="intro">
<div class="col">Premiere</div>
<div class="col">Deuxieme</div>
<div class="col">Troisieme</div>
</section>Et dans notre style.css
section#intro {
display: flex;
}
.col {
flex: 1;
}En donnant à flex la valeur 1, nous disons que chaque colonne a le poids/importance de 1.
Exemple avec 3 colonnes inégales
Auparavant, on voulait que nos colonnes aient une largeur égale. Si on veut qu'une colonne prenne plus de place, nous pouvons modifier son flex.
<section id="intro">
<div class="col">Premiere</div>
<div class="col large">Deuxieme</div>
<div class="col">Troisieme</div>
</section>Et dans notre style.css
section#intro {
display: flex;
}
.col {
flex: 1;
}
.col.large {
flex: 3;
}En donnant à la grande colonne la valeur de 3, elle a donc la taille de 3 à 1 par rapport aux autres frères et sœurs.
Si vous voulez que votre colonne s'étend que à son contenu, vous pouvez donner flex la valeur 0.
Si vous voulez savoir plus sur Flexbox vous pouvez consulter ce page ici:
https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Flexbox