Name: Flexbox et Grid Créer des sites modernes et responsives
Rating: 5 (3 reviews)

Créer des barres de navigation

1. Création d’une barre de menu simple

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C05-A-1.html.

Pour ce premier exemple de réalisation avec Flexbox, nous allons concevoir une barre de menu simple, mais efficace. Voici le résultat final que nous allons obtenir :

Voici la structure HTML initiale :

<nav id="nav-bar">  
    <a href="#">Accueil</a>  
    <a href="#">Projets</a>  
    <a href="#">Réalisations</a>  
    <a href="#">Equipe</a>  
    <a href="#">Espace personnel</a>  
</nav>

Nous utilisons l’élément HTML5 <nav> pour accueillir la barre de navigation. Cet élément possède l’identifiant nav-bar.

Voici la règle CSS pour cet élément :

#nav-bar {  
    display: flex;  
    flex-flow: row nowrap;  
    justify-content: flex-start;  
    width: 600px;  
    background-color: #ccc;  
}

Analysons les propriétés CSS utilisées :

display: flex : nous appliquons un affichage flexible.
flex-flow: row nowrap : nous utilisons les valeurs par défaut pour le flux du conteneur. Nous aurions parfaitement pu ne pas les indiquer. L’axe principal est horizontal (flex-direction: row) et nous interdisons le passage à la ligne (flex-wrap: nowrap).
justify-content: flex-start : à nouveau, nous indiquons la valeur par défaut (donc nous aurions pu aussi l’omettre) pour l’alignement sur l’axe principal. Les enfants sont alignés au début de l’axe horizontal, donc à partir du bord gauche de cet élément parent.
width: 600px : la barre de menu à une largeur fixe de 600 pixels dans cet exemple. Vous pouvez bien sûr indiquer la valeur que vous souhaitez.
background-color: #ccc : indique que l’arrière-plan de la barre de navigateur est gris clair.

Dans cet élément <nav>, nous imbriquons des éléments...

Exploiter les alignements des blocs

1. Centrer un élément enfant dans un parent

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C05-B-1.html.

Devoir centrer horizontalement et verticalement un élément enfant dans son élément parent est un objectif très classique dans la mise en page des sites web. Le module Flexbox nous offre une solution aussi rapide qu’élégante.

Voici la structure HTML très simple de cet exemple :

<div id="conteneur">  
    <p class="centre">Lorem ipsum dolor...</p>  
</div>

La boîte <div id="conteneur"> est le parent conteneur.
Le paragraphe <p class="centre"> est l’élément enfant devant être centré horizontalement et verticalement.

Voici la règle CSS utilisée par le conteneur parent :

#conteneur {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 300px;  
    height: 300px;  
    border: 1px solid #000;  
    background-color: #eee;  
}

Analysons les propriétés CSS utilisées :

display: flex : nous appliquons un affichage flexible au conteneur.
justify-content: center : indique que l’alignement sur l’axe principal horizontal est centré.
align-items: center : spécifie que l’alignement sur l’axe secondaire vertical est centré.

Et c’est tout ! Le reste des propriétés est sans difficulté et est fait pour la mise en forme.

Les propriétés CSS du paragraphe ne présentent aucune difficulté non plus et elles sont aussi créées pour effectuer de la mise en forme :

p.centre {  
    width: 200px;  
    margin: 0;  
    padding: 10px;  
    border: 1px solid #000;  
    background-color: #fff;  
}

Voici l’affichage obtenu :

Voici le code complet de cet exemple :

<!doctype html>  
<html lang="fr">  
    <head>...

Créer des formulaires

1. Créer un champ de recherche de taille adaptée

Le fichier d’exemple à télécharger se nomme : 01-Exemples Flexbox/C05-C-1.html.

Dans de nombreux sites web, vous avez la possibilité d’effectuer une recherche textuelle sur l’ensemble du contenu rédactionnel. Vous avez à votre disposition, un champ de recherche avec un bouton pour lancer celle-ci. Bien sûr, ce champ doit avoir une taille qui s’adapte à la place disponible par rapport à son conteneur parent. Le module Flexbox nous permet une solution simple et efficace.

Voici la structure HTML de cet exemple :

<div class="conteneur">  
    <form>  
        <div class="champs">  
            <label id="texte" for="le-texte">Texte&nbsp;:&nbsp;</label> 
            <input type="text" id="le-texte">  
            <input type="submit" id="chercher" value="Chercher">  
        </div>  
    </form>  
</div>

Dans l’élément de formulaire <form>, nous avons une boîte <div class="champs"> qui sert de conteneur parent. Ce conteneur contient :

Un champ de type texte, <input type="text" id="le-texte">.
L’étiquette du champ, <label id="texte" for="le-texte">Texte  : </label>.
Puis, le bouton d’envoi, <input type="submit" id="chercher" value="Chercher">.

Voici les règles CSS de cet exemple :

.champs {  
    display: flex;  
    width: 400px;  
    border: 1px solid #aaa;  
    padding: 10px;  
    background-color: #eee;  
}  
#le-texte {  
    flex: 1 1 auto;  
    border: none;  
}  
#texte, #chercher...