Module 04 · Mise en page et interactions

IV. CSS avancé

Découvre des outils pour créer des mises en page modernes, adaptées à tous les écrans et agréables à utiliser.

Flexbox

Flexbox organise les éléments le long d’un axe. Elle est pratique pour aligner des éléments en ligne ou en colonne.

.conteneur {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

Élément 1

Élément 2

Élément 3

CSS Grid

Grid crée une mise en page en deux dimensions, composée de lignes et de colonnes.

.grille {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

Responsive design et unités

Une mise en page responsive s’adapte aux écrans de téléphone, de tablette et d’ordinateur. Les requêtes média permettent d’ajuster les styles en fonction de la largeur disponible.

.grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .grille {
        grid-template-columns: 1fr;
    }
}

px

Unité fixe, pratique pour les détails.

%

Proportion de la taille de l’élément parent.

vw

1 % de la largeur de la fenêtre d’affichage.

rem

Unité relative à la taille de texte racine.

Animations et transformations

Les transformations modifient l’apparence d’un élément. Les animations font évoluer progressivement ses styles.

.carte:hover {
    transform: translateY(-4px);
}

@keyframes apparition {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.element {
    animation: apparition 500ms ease-out;
}

Animation CSS

Accessibilité :

Prévois une version sans animation pour les personnes qui activent l’option de réduction des mouvements dans leur système.

Positionnement, pseudo-classes et variables

Les pseudo-classes appliquent un style à un élément selon son état. Les variables CSS permettent de réutiliser facilement des valeurs.

:root {
    --couleur-principale: #2448c7;
}

a:hover {
    color: var(--couleur-principale);
}

input:focus-visible {
    outline: 3px solid var(--couleur-principale);
}

.parent {
    position: relative;
}

.enfant {
    position: absolute;
    top: 1rem;
    left: 1rem;
}