9 juin 2024
Le placement en CSS
1# FlexBox c'est quoi ?
Le module des boîtes flexibles, aussi appelé « flexbox », a été conçu comme un modèle de disposition unidimensionnel et comme une méthode permettant de distribuer l'espace entre des objets d'une interface ainsi que de les aligner. Dans cet article, nous verrons les fonctionnalités principales des flexbox que nous approfondirons ensuite dans d'autres articles.
Lorsqu'on décrit les boîtes flexibles comme une méthode de disposition unidimensionnelle, on indique en fait que les flexbox gèrent une seule dimension à la fois : une ligne ou une colonne. Ce modèle est à comparer au modèle bidimensionnel de la disposition en grille (CSS Grid) qui contrôle à la fois les colonnes et les lignes.
2# Mise en application
Avant de commencer, il faut comprendre son fonctionnement, flexbox utilise un système de “boite” pour placer nos différentes balises HTML. La plus grande boite pourra déplacer celles sous lui, et ainsi de suite.
— index.html —
<body>
<main> <!-- main est notre grande boite, il peut contrôler les balises section -→
<section>
<article>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam obcaecati cumque quidem cum inventore voluptates consequatur rerum sint necessitatibus. Totam saepe mollitia debitis, dicta reprehenderit
officiis commodi sunt cumque temporibus!</p>
</article>
</ section>
<section>
<article>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Totam obcaecati cumque quidem cum inventore voluptates consequatur rerum sint necessitatibus. Totam saepe mollitia debitis, dicta reprehenderit
officiis commodi sunt cumque temporibus!</p>
</article>
</ section>
</ main>
</body>
—
Avec l'exemple du dessus, main prend en compte les balises <section></ section> et pourra les placer selon nos envies. Essayons de mettre nos deux sections l'une à coter de l'autre (ajouter votre CSS dans un fichier à part que vous lierez avec la balise <link/>) :
— style.css —
main{
display: flex;
}
—
On doit définir le mode de placement avec “display: flex;” sur notre sélecteur de la balise “main”, car je le rappelle c'est <main></ main> qui interagi avec nos sections.
Nous aurons donc nos deux sections, l'une à côté de l'autre alors que nous avons entré seulement un argument à notre feuille CSS. Avec le CSS, il y a un principe qu'il faut comprendre rapidement pour avoir un site qui s'adapte à tout type de résolution d'écran, le “responsive”.
Un site dit “responsive” est un site qui s'adapte automatiquement à la résolution d'écran (mobile, tablette ou ordinateur), flexbox fait partie des acteurs qui impacterons le responsive. Comme on a pu le voir, avec juste une ligne, on peut déplacer un conteneur n'importe où sur notre page web.
Nous verrons à la fin de cette formation comment spécifier une résolution pour une exécution particulière de code CSS.
Revenons sur nos flexbox, il existe tout un tas de paramètres qui impacterons le placement sur votre page web. Regardons un autre exemple :
— style.css —
main{
display: flex;
flex-direction: column;
}
—
Si on ajoute, la ligne “flex-direction”, on peut définir si nos conteneurs seront sur la même ligne ou l'une en dessous de l'autre.
flex-direction : row; = Mise des conteneurs en ligne
flex-direction : column; = Mise des conteneurs l'un sur l'autre.
Tous les types de direction : main{ flex-direction: row | row-reverse | column | column-reverse;}
Nous pouvons également placer nos contenus à différent endroit de notre conteneur, toujours avec notre “main” :
— style.css —
main{
display: flex;
flex-direction: row;
justify-content: center;
}
section{
width: 10%;
}
—
justify-content: center; permet à notre contenu d'être au centre de notre conteneur. Il est possible de le mettre au début avec “start” ou à la fin avec “end”. Le “justify-content” est pour un placement en “row”, pour le placement en "column", il existe align-items: center; qui reviens presque au même, mais qui agit sur la verticalité.
Voici une liste non-exhaustive des paramètres que l'on peut utiliser avec “justify-content” ou "align-items" :
- center
- start
- end
- space-around
- space-between
- space-evently
Pour mettre en application tout ça, je vous invite à faire un tour sur un petit jeu CSS dédié au flexbox :
3# Les média queries
Pour spécifier une résolution à un projet HTML / CSS, il faut utiliser les média queries. Voici la structure de celle-ci :
@media screen and (max-width:1024px) { }
@media screen and (min-width:768px) { }
On spécifie la taille selon le type d'écran ci-dessus. Dans les média queries, il faudra réécrire le code CSS qui devra changer pour la résolution choisie.
// … Code CSS … //
main{
width: 70%;
}
@media screen and (max-width:1024px) {
main{
width: 80%;
}
@media screen and (max-width:768px) {
main{
width: 100%;
}
}
Une chose importante pour les média queries, il faut absolument les spécifier tout en bas de votre fichier CSS. Si vous les mettez en premier, il peut y avoir des conflits entre votre code CSS basique et vos média queries.
Merci de votre lecture, j'espère que vous aurez appris des choses !
Mots clés:
html css
Cours Du Dev
Recevez les dernières formations disponibles en vous inscrivant à la newsletter
Créé par arkunis