Aller au contenu principal

Sass

Gabarit de page en Flexbox

Publié en 2 extraits de code par

Fiche écrite en 2017 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Un squelette de page complet en Flexbox : en-tête, barre de navigation, colonne latérale, contenu principal qui occupe tout l’espace disponible et pied de page collé en bas. La feuille de style est écrite en SCSS, avec les règles imbriquées.

HTML 
<header>
  <div class="logo">logo</div>
  <div class="accroche">accroche</div>
  <div class="lien">lien</div>
</header>
<nav>
  <div class="flex-item-1 flex-item">Menu A</div>
  <div class="flex-item-2 flex-item">Menu B</div>
  <div class="flex-item-3 flex-item">Menu C</div>
  <div class="flex-item-4 flex-item">Menu D</div>
  <div class="flex-item-5 flex-item">Menu E</div>
</nav>
<div class="main">
  <aside>
    aside
  </aside>
  <section>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
    <div class="flex-item-1 flex-item">item A</div>
    <div class="flex-item-2 flex-item">item B</div>
    <div class="flex-item-3 flex-item">item C</div>
    <div class="flex-item-4 flex-item">item D</div>
    <div class="flex-item-5 flex-item">item E</div>
  </section>
</div>

<footer>
  <div class="flex-item-1 flex-item">Footer A</div>
  <div class="flex-item-2 flex-item">Footer B</div>
  <div class="flex-item-3 flex-item">Footer C</div>
</footer>
SCSS 
*, *:before, *:after { box-sizing: border-box; }

html,
body {
  width:100%;
  height:100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

header{
  display: flex;

  .logo{flex-grow:1;}
  .accroche{flex-grow:4;}
  .lien{flex-grow:1;}
}

nav{
  display: flex;
  justify-content: space-around;
  .flex-item{
    padding:10px;
    background:#CCC;

  }
}


.main{
  display: flex;
  flex-grow: 1;
  align-items:stretch;

  aside{
    background:#EEE;
    flex-grow:1;
  // width:200px;
  }
  section{
    flex-grow:4;
    display: flex;
    flex-wrap:wrap;

    .flex-item{
      width:20%;
    }
  }
}

footer{
  height:100px;
  background:#333;
  color:#FFF;
  display: flex;
  align-items:center;
  justify-content:space-between;

  .flex-item-1{
    order:3;
  }
}

Autres fiches Sass

Toutes les fiches Sass