Flexbox — Mise en pratique

Très bien! Vous devriez maintenant avoir compris les bases de Flexbox. Il est temps de mettre en pratique vos connaissances.

Exercice 1

Dans un nouveau projet HTML et CSS, recréez le layout suivant:

index.html

<header>
  <ul>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Mon compte</a></li>
  </ul>
 
  <div>
    <h1>Logo</h1>
    <nav>
      <a href="#">À propos</a>
      <a href="#">Articles</a>
      <a href="#">Shop</a>
    </nav>
  </div>
</header>

Exercice 2

Cet exercice est plus complexe et nécessite de bien comprendre les différentes propriétés de Flexbox et de les combiner à plusieurs endroits.

Dans un nouveau projet HTML et CSS, recréez le layout suivant:

index.html

<div class="container">
  <article>
    <img src="#" alt="" />
    <div class="article-content">
      <h2>Titre court</h2>
      <div class="article-footer">
        <div>Catégorie</div>
        <div>26.11</div>
      </div>
    </div>
  </article>
 
  <article>
    <img src="#" alt="" />
    <div class="article-content">
      <h2>Titre court</h2>
      <div class="article-footer">
        <div>Catégorie</div>
        <div>26.11</div>
      </div>
    </div>
  </article>
</div>

Voir les soutions

Retour Sommaire