WEBVTT 00:00:01.920 --> 00:00:06.660 Construisons ensemble un nouveau site, qui  cette fois-ci, sera une galerie d’images. 00:00:08.460 --> 00:00:12.720 Le principal problème que nous rencontrons  en CSS est de toujours s’assurer que nos 00:00:12.720 --> 00:00:15.420 éléments soient placés dans notre  site à l’endroit où nous le voulons. 00:00:16.740 --> 00:00:20.580 C’est un problème assez complexe. Cependant il existe de nombreuses solutions pour 00:00:20.580 --> 00:00:26.340 le résoudre. L’une des nouvelles manières et qui  est probablement la plus populaire, est appelée 00:00:26.340 --> 00:00:31.740 flexbox. Et c’est ce que nous allons utiliser  pour construire une magnifique galerie web. 00:00:31.740 --> 00:00:32.460 C’est parti. 00:00:35.880 --> 00:00:41.040 Nous avons un fichier index.html et un  fichier style.css qui se trouvent dans 00:00:41.040 --> 00:00:45.840 le même répertoire dans notre bureau.  Commençons par notre fichier HTML. 00:00:49.920 --> 00:00:53.880 Pour le titre, nous allons mettre  « Flexbox », et dans le body nous 00:00:53.880 --> 00:00:56.980 mettrons comme h1 « Les bébés animaux ». 00:01:04.500 --> 00:01:12.120 On sauvegarde et on rafraichit… parfait. Juste en dessous nous allons placer 00:01:12.120 --> 00:01:15.060 une div avec une classe que nous  allons appeler « . container ». 00:01:21.060 --> 00:01:24.180 Insérons maintenant quelques  images dans notre balise div. 00:01:25.380 --> 00:01:29.340 Si vous vous souvenez, pour ajouter  une image nous pouvons faire “img”, 00:01:29.340 --> 00:01:32.880 et appuyer sur tab pour que sublime  text nous complète notre ligne. 00:01:32.880 --> 00:01:36.540 Copions cette ligne et plaçons  6 balises image au total. 00:01:41.940 --> 00:01:47.340 Commençons par ajouter ces images que nous allons  copier-coller. Nous vous préparerons un fichier 00:01:47.340 --> 00:01:52.200 avec toutes les images attachées à cette vidéo.  Vous pouvez aussi choisir vos propres images. 00:01:52.200 --> 00:01:55.860 Vous trouverez le fichier de liens  joint à cette vidéo pour que vous 00:01:55.860 --> 00:01:58.020 puissiez suivre la vidéo en même temps que nous. 00:01:58.020 --> 00:02:01.440 Nous allons maintenant copier  et coller ces images à la suite. 00:02:13.500 --> 00:02:17.580 On sauvegarde, on rafraichit… Super. 00:02:18.960 --> 00:02:23.160 Nous avons maintenant de très grandes images. Rendons les maintenant un peu plus petites. 00:02:24.480 --> 00:02:28.380 Pour ce faire nous pouvons aller dans notre  fichier CSS et sélectionner les images 00:02:28.380 --> 00:02:36.480 en tapant img. Réglons maintenant  la largeur, « width: 450 pixels » 00:02:39.060 --> 00:02:41.460 et pour la hauteur, « height: 300 pixels ». 00:02:42.480 --> 00:02:45.420 Vous vous demandez peut-être pourquoi  nous ne faisons pas cela directement 00:02:45.420 --> 00:02:49.980 dans le fichier HTML dans nos balises. Eh bien c’est parce que nous aurions 00:02:49.980 --> 00:02:55.980 à ajouter des attributs individuellement dans  chaque balise image. Alors qu’avec le fichier CSS, 00:02:55.980 --> 00:02:58.980 nous n’avons à le faire qu’une seule  fois dans un seul et même endroit. 00:03:00.540 --> 00:03:03.840 Bien évidemment nous avons besoin de  lier le fichier à notre style.css. 00:03:08.160 --> 00:03:17.160 Très bien, voyons la taille de nos images.  On sauvegarde et on rafraichit… Et voilà. 00:03:17.160 --> 00:03:20.400 Nous avons maintenant nos images  disposées les unes sur les autres. 00:03:20.400 --> 00:03:26.880 Voilà de belles images de bébés animaux.  Pour ce qui est des Flexbox nous avons 00:03:26.880 --> 00:03:30.120 une excellente ressource qui  est sans surprise CSS tricks. 00:03:35.640 --> 00:03:39.480 Et c’est à peu près tout ce qu’il vous faut. Le site vous montre toutes les choses que 00:03:39.480 --> 00:03:45.060 flexbox peut faire. Et comme vous pouvez le  voir, il vous présente des lignes de codes 00:03:45.060 --> 00:03:49.920 vous permettant de jouer avec votre contenu, de le  placer et de l’organiser comme bon vous semble. 00:03:51.360 --> 00:03:53.940 Nous attacherons le lien du  site pour vous à cette vidéo 00:03:53.940 --> 00:03:55.800 pour que vous puissiez y jeter un coup d’œil. 00:03:55.800 --> 00:04:01.020 On se retrouve dans la prochaine vidéo où nous  appliquerons les propriétés flexbox à notre site.