Aller au contenu principal

9-1 Layout Flexbox

Le visuel de l'application n'est pas optimal pour le moment. En effet, la zone de contenu devrait prendre un maximum de place, ayant comme effet de pousser complètement vers le bas le footer.

Imgur

Cela est un cas d'utilisation typique pour un layout de type flex. C'est-à-dire que les différents blocs sont répartis équitablement dans l'espace. Il est possible même de préciser qu'un certain élément devrait prendre un maximum d'espace (la zone de contenu, par exemple.)

Ainsi, pour appliquer un layout de type flexbox à la structure de l'application, on découpera en trois sections l'app:

  • Barre de navigation
  • Contenu
  • Footer

On appliquera au composant app-root une class d-flex flex-column pour que les sous-éléments soient disposés l'un à la suite de l'autre.

En effet, les composantes navbar, la zone de contenu (router outlet) et footer sont tous des endants de app-root. Ce sont des ces éléments qui seront soumis à la disposition flex.

flex-column assurera une disposition de haut en bas (column), plutôt que de gauche à droite comme la valeur par défaut le veut.

S'assurer que html, body et app-root prennent 100% de l'espace vertical​

La première étape est de s'assurer que les blocs html, body et app-root prennent 100% de l'espace vertical qui leur est alloué.

En effet, ce n'est pas dutout le cas actuellement:

Imgur

Modifiez index.html afin d'ajouter les classes CSS h-100 (height: 100%) à ces éléments (html, body et app-root)

src/index.html
<!doctype html>
<html lang="en" data-bs-theme="dark" class="h-100">
<head>
  <meta charset="utf-8">
  <title>Houdini</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="h-100">
  <app-root class="h-100"></app-root>
</body>
</html>

Le body de la page devrait maintenant prendre 100% de l'espace.

Imgur

Mettre app-root en conteneur flex​

Comme c'est app-root qui contient directement sous ce dernier les éléments de barre de navigation, zone de contenu et footer, on lui asignera la classe Bootstrap d-flex flex-column, soit display: flex; flex-direction: column.

<!doctype html>
<html lang="en" data-bs-theme="dark" class="h-100">
<head>
  <meta charset="utf-8">
  <title>Houdini</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="h-100">
  <app-root class="h-100 d-flex flex-column"></app-root>
</body>
</html>
info

flex-column dispose les éléments un à la suite de l'autre, verticalement, contrairement à flex-row qui les dispose de gauche à droite.

Pour l'instant rien ne change cepandant!

Faire en sorte que la zone de contenu prenne tout l'espace vertical​

Pour que la zone de contenu prenne tout l'espace, on doit lui assigner une classe flex-grow-1. En effet, cela a pour effet de faire prendre à l'élément l'espace restant, s'il en reste.

Comme la zone de contenu est le router-outlet, enveloppons ce dernier dans un bloc main qui aura la classe flex-grow-1.

Vous pouvez modifier le fichier app.ts de cette façon:

src/app/app.ts
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, Navbar, Footer],
  template: `
    <app-navbar></app-navbar>
    <main class="flex-grow-1">
      <router-outlet />
    </main>
    <app-footer></app-footer>
  `,
  styles: [],
})

Beaucoup mieux!

http://localhost:4200

img