Dans le cours : CSS : Maîtriser les Flexbox

Réaliser l'en-tête d'un site web - Tutoriel CSS

Dans le cours : CSS : Maîtriser les Flexbox

Démarrer mon mois d’essai gratuit Acheter pour mon équipe

Réaliser l'en-tête d'un site web

“

Commençons tout de suite par l'en-tête de cette page. J'ai cette zone bleue qui s'appelle "topHeader" et dans laquelle je trouve le logo et ses quelques icônes. J'aimerais que le logo et les icônes apparaissent côte à côte. Je suis de retour dans mon code. Je travaille dans cet élément qui s'appelle "topHeader" et j'y retrouve un élément </a> qui contient l'image du logo (le logo est cliquable) et un élément </nav> qui s'appelle "socials". Et dans cet élément </nav>, je trouve les différentes icônes pour les réseaux sociaux. Je vais considérer "topHeader" comme étant un conteneur flex. Résultat des courses, ses enfants directs, le </a> et le </nav>, deviennent des éléments flex qui vont se placer naturellement côte à côte. C'est parti ! Je crée un nouveau style CSS pour #topHeader, j'en fais un conteneur flex, je reviens dans mon document, et quand je rafraîchis ma page, ces deux éléments sont maintenant côte à côte. Maintenant, j'aimerais que le logo soit tout à fait à gauche et les icônes tout à fait à droite. Il faut placer l'espace restant entre ces deux éléments. Rien de plus simple avec les flexbox, c'est justify-content : space-between. Je reviens dans mon document, je rafraîchis ma page, et j'ai mon logo tout à fait à gauche et mes icônes tout à fait à droite. Maintenant, j'aimerais placer les icônes les unes à côté des autres. Je vais aller voir ce qui se passe à l'intérieur de cet élément "socials". Là, je trouve un élément <ul>, et dans cet élément <ul>, j'ai une série d'éléments <li>, de list items, un élément <li> pour chacune des icônes. C'est cet <ul> que je vais transformer en conteneur flex. Du coup, les éléments <li> deviennent des éléments flex et ils vont se placer côte à côte. C'est parti ! J'ai besoin d'un style CSS, #socials ul display : flex. Cet élément est maintenant un conteneur flex, et dans ma page, quand je rafraîchis, les icônes sont maintenant côte à côte. Dernière petite chose, j'aimerais que mes icônes apparaissent exactement au milieu de mon logo, c'est-à-dire que ces deux éléments doivent être alignés sur l'axe vertical. Dans cet exemple, l'axe vertical, c'est l'axe secondaire de ce conteneur flex, et j'ai donc besoin de align-items : center. Je rafraîchis ma page, et la première zone de mon site, la zone topHeader, est maintenant terminée. Dans mon en-tête, j'ai également le <div> "banner" qui contient ce titre de niveau 1. Au niveau de mon code, je travaille maintenant avec le <div> "banner", qui se trouve ici à la suite du <div> topHeader, et dans ce <div> "banner", j'ai un élément, c'est l'élément </h1>, le titre de cette page. Ce <div> qui s'appelle "banner", je vais le considérer comme un conteneur flex, et donc l'élément </h1> deviendra l'unique flex item de ce conteneur. C'est parti ! Dans ma feuille de style, j'ai besoin de #banner, j'en fais un conteneur flex, donc display : flex, et j'ai envie de placer l'élément </h1> dans le fond de ce conteneur flex, donc align-items : end. Je place cet élément à la fin de l'axe secondaire. Et quand je recharge ma page, nous avons le titre qui apparaît dans le fond de l'image, image qui est ici injectée dans la page grâce à la propriété background-image du CSS. Voilà mon en-tête maintenant correctement mis en page.

Table des matières