CSS n'est pas difficile (il vous manque juste ces bases) - Maîtriser les bases (Partie 2)

Merci à tous pour vos commentaires sur le dernier article, cela signifie vraiment beaucoup. J'espère que vous apprendrez une ou deux choses de cet article.

Dans cet article, nous explorerons deux concepts fondamentaux en CSS : le positionnement et la mise en page. Le positionnement et la mise en page sont au cœur de la création de pages Web visuellement attrayantes et fonctionnelles. La maîtrise de ces concepts vous permet de créer des conceptions réactives qui améliorent l'expérience utilisateur. À la fin, vous saurez comment utiliser ces techniques pour structurer vos pages Web comme un pro.

- Positionnement et mise en page

Le positionnement CSS contrôle la façon dont les éléments sont positionnés ou placés sur une page Web. Le positionnement est influencé par les valeurs de décalage Haut, Bas, Gauche et Droite, le cas échéant. Il existe 5 valeurs CSS Position principales ;

1. Statique : Tous les éléments HTML sont positionnés statiquement par défaut. Cela signifie simplement que l'élément est inchangé, ne bouge pas et n'est pas influencé par les valeurs de décalage Haut, Bas, Gauche et Droite.

2. Relatif : Les éléments sont positionnés par rapport à leur position normale.

3. Absolu : Les éléments sont positionnés par rapport à leur ancêtre (parent) le plus proche ou à la fenêtre.

4. Fixe : Les éléments sont positionnés par rapport à la fenêtre et restent fixes pendant le défilement.

5. Sticky : Le positionnement collant permet à un élément de basculer entre des positions relatives et fixes en fonction de la position de défilement et des valeurs de décalage Haut, Bas, Gauche et Droite.

Vous trouverez ci-dessous une illustration qui explique le positionnement CSS.

Voici le code qui a permis de donner vie à l'illustration. N'hésitez pas à copier et modifier vous-même.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

— Faites une pause, respirez profondément, puis continuez !!—
- Mise en page CSS

1. Flexbox : Il s'agit d'une méthode de disposition unidimensionnelle utilisée pour disposer les éléments sur un seul axe (horizontalement et verticalement).

Caractéristiques d'une flexbox

• display: flex - Cela crée une flexbox pour le conteneur.
• align-items: center - Ceci contrôle l'alignement vertical du conteneur.
• justifier-content : espace-entre-cela contrôle l'alignement horizontal du conteneur.
• gap : ajoute un espacement entre les éléments flexibles sans avoir besoin de marges.

Voici l'avant et l'après d'une simple barre de navigation

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Bar using CSS Flexbox</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
}

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: white;
}
nav {
  background-color: #333;
  color: #fff;
  padding: 10px;
}

ul {
  display: flex;
  align-items: center;
  gap: 2rem;
}

Résultat :

2. Grille : Il s'agit d'une méthode de mise en page en 2 dimensions utilisée pour créer des lignes et des colonnes.

Caractéristiques

• display: grid - Cela crée une grille pour le conteneur.
• grid-template-columns/grid-template-rows - Ceci définit une ligne ou une colonne pour le conteneur.
• répéter(2, 1fr) - Cela crée 2 colonnes de même largeur.
• écart : 10px - Ajoute un espacement entre les éléments de la grille.

Voici un avant et un après de quelques photos de chats que j'ai trouvées sur Unsplash.

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Positioning</title>
    <link rel="stylesheet" href="style.css">


    <div>





<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    display: grid;
    place-content: center;
    min-height: 100vh;
}

.container{
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    border: 1px solid red;
    gap: 20px;
    padding: 20px;
}

.static{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: static;

}

.relative{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: relative;
    top:30px;
    right: 30px;

}

.absolute{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: absolute;
    top: 30px;
    right: 100px;
}

.fixed{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: fixed;
    bottom: 0;
    right: 0;
}

.sticky{
    background-color: #ccc;
    padding: 20px;
    border: 1px solid black;
    width: 300px;
    position: sticky;
    top: 0;
    right: 0;
}

Résultat :

Tableau de comparaison

Feature	Flexbox	Grid
Axis	One-dimensional	Two-dimensional
Alignment	Horizontal/Vertical	Rows and columns
Best for	Navigation Bars	Layouts like dashboards
Flexibility	Better for small components	Better for page layouts

Le positionnement et la mise en page sont le fondement du CSS. Comprendre quand et comment les utiliser rendra non seulement votre expérience de coiffage plus facile, mais également plus agréable et efficace. Pendant que cet article vous permet de démarrer avec Flexbox et Grid, je publierai bientôt un guide plus détaillé explorant leurs fonctionnalités avancées, trucs et astuces. Restez à l’écoute pour ça !

Et c'est la fin de Maîtriser les bases du CSS ! J'espère que vous avez aimé lire ceci autant que j'ai aimé l'écrire. Mais avant de nous séparer, j'aimerais avoir de vos nouvelles :

Quelle méthode de mise en page CSS préférez-vous pour vos projets : Flexbox ou Grid ? Et pourquoi ?

N'hésitez pas à partager vos réflexions dans les commentaires ci-dessous.

Au revoir pour l'instant!!!!