Une structure de boîtes flexibles repose sur plusieurs éléments HTML.

Un élément joue le rôle de conteneur. Cet élément doit avoir sa propriété display avec la valeur flex ou inline-flex.

L'élément conteneur contient d'autres élements HTML, les items, qui vont se positionner à l'intérieur du conteneur suivant des propriétés CSS spécifiques aux flexbox.

Ce positionnement concerne les enfants du conteneur (ie 1er niveau d'imbrication), quelque soit le type d'élément de ces enfants. On peut donc avoir des enfants de même type (par exemple des p, des articles, des div, etc) ou de types différents et mélangés.

La propriété flex-direction appliquée sur le conteneur définit dans quel sens vont s'afficher les items contenus. Les spécifications parlent de l'axe principal et de l'axe transversal, perpendiculaire à l'axe principal.

L'exemple suivant montre un bandeau horizontal comme on pourrait en avoir dans la partie supérieure des pages d'un site.

L'exemple suivant montre un bandeau vertical.

Une des caractéristiques très intéressante des boîtes flexibles tient dans l'alignement que l'on peut gèrer sur l'axe principal.
La propriété justify-content va non seulement permettre les alignements classiques (gauche / droite, haut / bas, centre) mais également des alignements qui tiennent compte des largeurs des items et calculent automatiquement l'espace entre eux.

L'exemple suivant montre l'alignement des items dans un bandeau horizontal.

L'exemple suivant montre l'alignement des items dans un bandeau vertical.

Comme on peut le voir dans les exemples précédents, par défaut les items du conteneur occupent toute la largeur ou la hauteur de l'axe transversal.
La propriété align-items permet de gérer plus finement cet alignement.
La valeur center permet en particulier de centrer verticalement un élément par rapport à son conteneur de façon on ne peut plus simple.

L'exemple suivant montre l'alignement des items dans un bandeau horizontal.

L'exemple suivant montre l'alignement des items dans un bandeau vertical.

A partir du code HTML ci-après, complétez le code CSS pour obtenir une page avec le bandeau de navigation ci-dessous.

Toutes les images utilisées se trouvent dans le répertoire ../exemples/img

La police utilisée est verdana, helvetica ou sans-serif avec une taille de 15 pixels.

L'image de fond de la page occupe automatiquement toute la surface de la page et se redimenssionne en même temps que la page. Elle s'appelle metal_rivets.jpg.

Le bandeau est fait avec une flexbox. Sa hauteur est de 140 pixels. Le fond est fait par un dégradé linéaire avec 3 points d'arrêt : #ccc, #fcfcfc et #dcdcdc. Il est entouré par une ombre sans décalage, avec un adouci de 2 pixels, un renfort de 4 pixels et de couleur #322b25.

L'image de gauche s'appelle pirate.png et mesure 115 pixels de large et 122 pixels de haut.

Les 3 boutons du centre sont des liens faits avec la balise a. La couleur de fond est est un gris léger (232 de rouge, vert et bleu) avec une transparence de 0.2. Le texte a pour couleur 41 de rouge, 34 de vert, 28 et de bleu. Le lien est entouré par une ombre sans décalage, avec un adouci de 3 pixels, un renfort de 1 pixel et de même couleur que le texte. Les images utilisées s'appellent respectivement m1.png, m2.png et m3.png.

Au survol de la souris, le texte des liens est ombré avec une ombre sans décalage, de 3 pixels d'adouci et de couleur 190 rouge, 190 vert et 190 bleu. Une ombre interne supplémentaire est également ajoutée au lien, sans décalage, avec un adouci de 5 pixels, un renfort de 2 pixels et de couleur 190 rouge, 190 vert et 190 bleu.

Les 2 zones de saisie du formulaire ont les dimensions indiquées ci-contre.
Les 2 zones ont une bordure de 1 pixel de couleur ACACAC.
La couleur de fond est de couleur F0F0F0.
Quand les zones obtiennent le focus, le couleur de fond devient blanche.

Le bouton de soumission a les dimensions indiquées ci-contre.
Le fond du bouton est fait par un dégradé linéaire avec 3 points d'arrêt : #ececec, #fcfcfc et #ccc.
La couleur du texte est #777.
Quand la souris survole le bouton, la couleur du texte est faite avec 41 de rouge, 34 de vert et 28 de bleu. Le texte a une ombre sans décalage, avec un adouci de 3 pixels et de couleur 190 de rouge, de vert et de bleu. Le bouton a une ombre sans décalage, avec un adouci de 1 pixel et de couleur 41 de rouge, 34 de vert et 28 de bleu.

Code à compléter

Une solution possible