1 00:00:02,230 --> 00:00:08,100 Dans cette conférence, je veux approfondir un peu la flexbox, en particulier en ce qui concerne la façon dont vous l'utilisez dans les applications 2 00:00:08,110 --> 00:00:08,690 React Native. 3 00:00:08,710 --> 00:00:12,310 Si vous savez déjà tout cela, vous pouvez bien sûr ignorer cette conférence. 4 00:00:12,340 --> 00:00:14,920 Donc, pour cela, j'ai préparé une application factice simple et bien sûr, vous 5 00:00:14,920 --> 00:00:20,420 trouvez que ci-joint, c'est une application React Native normale construite avec expo et dans l'application. fichier js ici, ce que j'ai à 6 00:00:20,460 --> 00:00:26,890 la fin est juste une vue avec trois vues là où chaque vue a ensuite un texte avec le 7 00:00:26,890 --> 00:00:29,990 texte un, deux, trois, cela crée simplement des 8 00:00:30,010 --> 00:00:36,310 boîtes avec des couleurs différentes - rouge, bleu et vert et maintenant nous utiliserons flexbox pour déplacer ces 9 00:00:36,310 --> 00:00:41,950 boîtes afin que vous puissiez avoir une idée du fonctionnement de flexbox car c'est si important. 10 00:00:42,240 --> 00:00:43,240 Maintenant, tout 11 00:00:43,660 --> 00:00:49,120 d'abord, par défaut, chaque vue dans React Native, même si vous n'affectez aucun style spécial, 12 00:00:49,120 --> 00:00:55,410 utilise Flexbox et c'est différent du Web par exemple, là si vous avez un div qui serait 13 00:00:55,420 --> 00:01:01,370 votre équivalent à un type de vue, il ne fonctionne pas n'utilisez pas flexbox par défaut. 14 00:01:01,450 --> 00:01:08,260 Dans React Native, c'est le cas, chaque vue organise par défaut ses enfants à l'aide de cette chose 15 00:01:08,350 --> 00:01:15,490 flexbox, flexbox est simplement un terme, est simplement un concept de CSS qui consiste à organiser les éléments enfants 16 00:01:15,520 --> 00:01:17,440 dans un espace unidimensionnel, alors 17 00:01:17,440 --> 00:01:21,990 ici par exemple dans une colonne. C'est aussi un autre défaut, non 18 00:01:21,990 --> 00:01:29,340 seulement chaque vue utilise par défaut flexbox, mais elle organise également par défaut les enfants dans une colonne, donc 19 00:01:29,340 --> 00:01:33,020 de haut en bas. C'est aussi une différence pour le Web 20 00:01:33,020 --> 00:01:37,350 et je ne veux pas trop insister sur ces différences, car bien sûr, vous n'avez pas besoin d'être 21 00:01:37,350 --> 00:01:42,400 un développeur Web pour créer des applications React Native, mais je pense que beaucoup de gens connaissent le développement Web. connaître CSS 22 00:01:42,400 --> 00:01:47,400 flexbox et il est donc logique de parler également des différences. Ainsi, sur le Web, lorsque vous utilisez Flexbox, 23 00:01:47,400 --> 00:01:48,840 non seulement il n'est 24 00:01:48,840 --> 00:01:51,220 pas activé par défaut, mais si vous l'activez 25 00:01:51,240 --> 00:01:56,820 également, la valeur par défaut est d'organiser tous les éléments enfants en ligne et ici, la valeur par défaut 26 00:01:56,820 --> 00:01:59,010 est de les organiser dans un colonne. 27 00:01:59,010 --> 00:02:05,910 Vous pouvez cependant changer cette valeur par défaut, donc dans ce cas sur la vue qui contient mes boîtes, en ajoutant ici 28 00:02:05,910 --> 00:02:12,960 la direction flexible et en la définissant sur la ligne par exemple, vous verrez maintenant que ces trois boîtes sont organisées en 29 00:02:12,960 --> 00:02:16,560 ligne de gauche à droite. Maintenant, en plus de la ligne et de 30 00:02:16,560 --> 00:02:19,250 la colonne, vous avez également l'inverse de la ligne et l'inverse de 31 00:02:19,260 --> 00:02:21,720 la colonne et cela fait aussi ce que le nom implique. 32 00:02:21,720 --> 00:02:29,010 Maintenant, nous avons encore une ligne, mais le premier élément, la boîte rouge est en fait à droite et non plus à gauche, donc 33 00:02:29,010 --> 00:02:30,820 c'est aussi quelque chose que 34 00:02:30,840 --> 00:02:36,210 vous pouvez faire, permettez-moi de revenir à la ligne. C'est donc la première chose que vous puissiez faire. 35 00:02:36,210 --> 00:02:42,750 Une autre chose importante à propos de Flexbox est la taille des éléments enfants, ici j'ai donné à 36 00:02:42,810 --> 00:02:47,040 chaque élément enfant une largeur et une hauteur de 100. 37 00:02:47,070 --> 00:02:54,660 Maintenant, si nous supprimions cette chose de largeur et de hauteur sur chaque élément enfant, alors vous verrez que maintenant nous 38 00:02:54,660 --> 00:03:01,890 avons une très petite ligne ici parce que chaque boîte est maintenant aussi large que son enfant l'exige et seulement 39 00:03:01,890 --> 00:03:05,700 aussi haute que son enfant l'exige, donc chaque case ici 40 00:03:05,700 --> 00:03:11,180 qui contient un nombre est seulement aussi large et haute que le nombre qu'il contient. 41 00:03:11,340 --> 00:03:18,180 Maintenant, vous pouvez également changer cela avec le conteneur Flexbox environnant. Donnons à cela une largeur de disons 300 42 00:03:18,330 --> 00:03:22,740 pixels ou de 80% de la largeur parente, donc dans ce 43 00:03:22,740 --> 00:03:28,950 cas puisque c'est l'élément racine, de la largeur du périphérique et donnons-lui une hauteur de 44 00:03:29,020 --> 00:03:30,230 disons 300. 45 00:03:30,480 --> 00:03:36,720 Si nous faisons cela et maintenant vraiment important, je le fais sur la vue qui contient toutes ces boîtes, je 46 00:03:36,720 --> 00:03:39,380 ne le fais pas sur les boîtes elles-mêmes. 47 00:03:39,480 --> 00:03:45,050 Donc, si nous attribuons cette largeur et cette hauteur à la boîte environnante, vous voyez quelque chose 48 00:03:45,150 --> 00:03:48,250 d'intéressant, la hauteur est supposée pour tous les 49 00:03:48,270 --> 00:03:54,810 éléments, maintenant toutes les vues dans la boîte flexible prennent la hauteur du parent, la largeur n'a aucun impact ici. 50 00:03:54,870 --> 00:03:59,510 C'est aussi un comportement par défaut que vous avez ici, évidemment puisque nous n'avons rien changé. 51 00:03:59,760 --> 00:04:06,840 Le comportement par défaut ici est en effet que les éléments enfants dans une boîte flexible, 52 00:04:06,850 --> 00:04:15,360 donc dans cette vue extérieure ici, sont organisés de telle sorte qu'ils s'alignent le long de l'axe transversal par étirement. 53 00:04:15,490 --> 00:04:20,510 D'accord, c'était beaucoup de termes, qu'est-ce que cela signifie? Maintenant, lorsque vous travaillez 54 00:04:20,530 --> 00:04:29,290 avec flexbox, nous avons deux axes importants. L'axe principal dépend de votre direction de flexion, pour une rangée que nous avons 55 00:04:29,350 --> 00:04:37,690 ici, rangée de direction de flexion, l'axe principal est de gauche à droite. Pour l'inverse de ligne, ce serait de droite à gauche, pour la colonne, ce 56 00:04:37,690 --> 00:04:42,570 serait de haut en bas et pour l'inverse de colonne, ce serait de bas en haut, donc 57 00:04:42,580 --> 00:04:44,270 c'est l'axe principal et ensuite 58 00:04:44,620 --> 00:04:48,630 vous avez également un axe transversal et c'est tout simplement l'opposé de l'axe principal. 59 00:04:48,640 --> 00:04:56,110 Donc, pour une ligne où l'axe principal est de gauche à droite, l'axe transversal serait de haut en bas. Si l'axe principal est de droite à gauche, ce 60 00:04:56,110 --> 00:05:01,900 qui serait le cas pour l'inverse de ligne, alors l'axe transversal serait de bas 61 00:05:01,900 --> 00:05:03,100 en haut. 62 00:05:03,340 --> 00:05:06,940 D'accord, c'est donc le concept d'axe principal et d'axe transversal. 63 00:05:06,940 --> 00:05:13,060 Vous pouvez maintenant organiser vos éléments enfants, donc dans cette vue où nous avons les trois cases comme éléments enfants, 64 00:05:13,360 --> 00:05:20,170 vous pouvez organiser ces éléments enfants le long de cet axe. Vous utilisez justifier le contenu pour organiser les 65 00:05:20,200 --> 00:05:27,760 éléments le long de l'axe principal et vous avez aligner les éléments pour organiser les éléments autour de l'axe transversal. 66 00:05:27,760 --> 00:05:31,040 Maintenant, vous voyez les valeurs que vous avez obtenues pour justifier le contenu ici si vous ajoutez ces 67 00:05:31,090 --> 00:05:37,230 guillemets ou si vous placez votre curseur à l'intérieur et que vous frappez l'espace de contrôle. Vous voyez que vous pouvez centrer les éléments, 68 00:05:37,230 --> 00:05:44,040 vous pouvez les positionner à la fin ou au début de ce conteneur ou vous pouvez ajouter un espace 69 00:05:44,040 --> 00:05:45,270 entre les deux, 70 00:05:45,300 --> 00:05:52,500 par exemple si nous utilisons l'espace entre ici et nous utilisons aligner le centre de l'élément, alors les choses changeront. 71 00:05:52,500 --> 00:05:57,490 Maintenant, vous verrez là prendre la largeur du conteneur environnant, chaque boîte elle-même est encore 72 00:05:57,540 --> 00:06:03,360 assez petite mais elles sont divisées ou elles sont réparties sur la largeur du conteneur parent et 73 00:06:03,360 --> 00:06:09,570 elles ne prennent plus la hauteur car le long de la croix axe, nous les alignons avec les 74 00:06:09,570 --> 00:06:12,960 éléments d'alignement et là, je mets cela au centre. 75 00:06:13,020 --> 00:06:19,620 La valeur par défaut ici est stretch et si je la remets à stretch, alors sans surprise, ils s'étirent sur 76 00:06:19,620 --> 00:06:20,960 toute la hauteur. 77 00:06:20,970 --> 00:06:26,490 Maintenant, si vous voulez vous assurer qu'ils prennent la largeur disponible, vous ne pouvez pas définir l'étirement 78 00:06:26,490 --> 00:06:32,820 ici sur justifier le contenu qui est votre véhicule de positionnement d'axe principal, vous ne pouvez donc pas définir l'étirement ici. 79 00:06:32,980 --> 00:06:35,880 Alors, que pouvez-vous faire à ce sujet? 80 00:06:35,890 --> 00:06:40,780 Eh bien, c'est quelque chose que vous configurez maintenant sur chaque élément enfant lui-même. 81 00:06:40,810 --> 00:06:50,290 Vous pouvez dire à un objet enfant combien d'espace il doit retirer de l'espace qu'il peut potentiellement obtenir. Étirer ici est une sorte de cas spécial, là vous 82 00:06:50,290 --> 00:06:54,220 configurez cela sur l'élément parent, normalement vous configurez 83 00:06:54,220 --> 00:06:56,640 cela sur l'élément enfant. 84 00:06:56,680 --> 00:07:02,200 Donc, par exemple, si je le place au centre maintenant afin que le parent ne dise 85 00:07:02,200 --> 00:07:08,950 pas à l'enfant combien d'espace il doit prendre, alors nous pouvons contrôler complètement l'espace qu'un enfant prend en allant dans le 86 00:07:08,950 --> 00:07:17,410 style enfant et là, vous pouvez ajouter flex , la propriété flex. La propriété flex est appliquée aux éléments qui se trouvent à l'intérieur d'une boîte flexible, 87 00:07:17,410 --> 00:07:19,730 de sorte qu'ils se trouvent à l'intérieur d'une 88 00:07:19,810 --> 00:07:25,660 vue dans ce cas ici et qui peuvent être une vue elle-même mais qui pourraient également être un autre composant comme 89 00:07:25,660 --> 00:07:27,150 un texte par exemple. 90 00:07:27,160 --> 00:07:31,320 Alors maintenant, ici, vous pouvez ajouter flex et vous pouvez le définir sur une valeur de un 91 00:07:31,330 --> 00:07:35,940 par exemple, donc flex doit être un nombre. Si vous définissez cela sur un, ce 92 00:07:35,950 --> 00:07:44,050 que vous verrez, c'est que maintenant le conteneur rouge où j'ai défini flex à 1 prend toute la largeur disponible, il peut obtenir 93 00:07:44,110 --> 00:07:50,440 tellement qu'il laisse suffisamment d'espace pour le conteneur bleu et vert afin qu'ils peut compresser leur contenu dans 94 00:07:50,620 --> 00:07:52,470 la boîte flexible environnante. 95 00:07:52,480 --> 00:07:58,360 Maintenant, nous ne pouvons pas voir les limites du conteneur environnant, mais les limites seraient essentiellement là où l'élément 96 00:07:58,600 --> 00:08:03,060 rouge commence et l'élément vert et ainsi de suite sur l'axe horizontal ici. 97 00:08:04,720 --> 00:08:11,020 Alors maintenant, flex on s'assure que l'élément rouge devient aussi gros que possible, donc 98 00:08:11,170 --> 00:08:17,140 il prend autant d'espace que possible. Par défaut, les vues prennent seulement autant d'espace que leurs éléments 99 00:08:17,140 --> 00:08:17,690 enfants 100 00:08:17,710 --> 00:08:24,040 l'exigent, donc comme ce caractère est requis mais avec flex one, vous changez cela et ils prennent maintenant autant d'espace le long de l'axe 101 00:08:24,040 --> 00:08:25,140 principal, donc le long 102 00:08:25,150 --> 00:08:29,140 de la largeur ici, comme ils peuvent avoir. Pour l'axe transversal, encore une fois, c'est 103 00:08:29,140 --> 00:08:34,310 un cas spécial, vous devez le faire sur le parent. Pour l'axe principal et comme nous avons 104 00:08:34,360 --> 00:08:38,790 une ligne ici, l'axe principal est un axe horizontal de gauche à droite, vous 105 00:08:38,800 --> 00:08:41,520 le faites avec la propriété flex sur un enfant. 106 00:08:42,700 --> 00:08:48,550 Maintenant, bien sûr, vous pouvez également ajouter du flex à d'autres éléments enfants, comme celui du deuxième contenant 107 00:08:48,550 --> 00:08:50,260 bleu contenant les deux, 108 00:08:50,260 --> 00:08:52,420 vous pouvez également y ajouter un flex. 109 00:08:52,420 --> 00:08:56,690 Alors maintenant, j'ai un flex sur le conteneur rouge et un 110 00:08:56,710 --> 00:09:03,790 flex sur le conteneur bleu et ce qui se passe maintenant, c'est que les deux prennent l'espace libre disponible et parmi 111 00:09:03,790 --> 00:09:08,870 ces deux boîtes, l'espace est réparti uniformément et c'est ce que ce nombre indique ici. 112 00:09:08,930 --> 00:09:11,210 Ce nombre est un nombre 113 00:09:11,210 --> 00:09:18,350 relatif, tous les éléments dans la même boîte flexible, avec la propriété flex distribue l'espace disponible en considérant le nombre 114 00:09:18,410 --> 00:09:23,130 que vous attribuez ici et ces nombres sont relatifs les uns aux autres. 115 00:09:23,140 --> 00:09:29,800 Donc, si je donne le conteneur bleu flex deux ici, cela signifie que de l'espace disponible que vous avez 116 00:09:29,950 --> 00:09:36,100 dans ce conteneur environnant, après déduction de l'espace dont chaque élément a besoin pour y insérer son contenu, 117 00:09:36,100 --> 00:09:36,840 le 118 00:09:36,970 --> 00:09:42,480 conteneur bleu prendra deux fois plus d'espace que celui-ci parce qu'ici nous avons flex un, ici 119 00:09:42,490 --> 00:09:43,760 nous avons flex deux, 120 00:09:43,810 --> 00:09:50,560 si nous avions flex trois ici, alors cela prendrait les trois cinquièmes de l'espace libre disponible parce que nous avons 121 00:09:50,560 --> 00:09:52,150 trois plus deux, donc 122 00:09:52,210 --> 00:09:58,300 nous avons 5 segments disponibles pour ainsi dire et ici le conteneur rouge prendrait 3 segments, le 123 00:09:58,300 --> 00:09:59,950 conteneur bleu prendrait 2 segments. 124 00:09:59,950 --> 00:10:05,950 Si nous avons 1 et 2, alors nous avons trois segments disponibles et le conteneur bleu en 125 00:10:06,070 --> 00:10:13,510 prend deux, le rouge en prend un, donc vous additionnez toujours ces nombres flexibles et ensuite vous les distribuez ou c'est fait 126 00:10:13,510 --> 00:10:17,680 automatiquement bien sûr mais l'espace disponible est alors distribué en conséquence. 127 00:10:17,680 --> 00:10:22,660 Alors maintenant, nous allons voir que le conteneur bleu est deux fois plus grand que le rouge ou qu'il 128 00:10:22,660 --> 00:10:25,090 prend deux fois plus d'espace libre que le rouge. 129 00:10:25,090 --> 00:10:27,090 C'est ainsi que vous pouvez travailler 130 00:10:27,130 --> 00:10:33,760 avec flex, vous pouvez organiser la façon dont les éléments sont positionnés avec la direction flex, avec un contenu justifié et 131 00:10:33,790 --> 00:10:39,370 avec des éléments alignés et vous pouvez également faire grandir et rétrécir vos éléments à l'aide de flex. 132 00:10:39,430 --> 00:10:44,490 Alors maintenant, c'est une brève introduction à Flexbox dans React Native, comme je l'ai dit 133 00:10:44,560 --> 00:10:51,070 inspiré par Flexbox pour CSS, donc si vous le saviez, tout ce que j'ai expliqué ici n'est probablement pas 134 00:10:51,070 --> 00:10:52,280 nouveau pour vous. 135 00:10:52,450 --> 00:10:54,610 Nous travaillerons avec flexbox tout au long de 136 00:10:54,610 --> 00:10:58,900 ce cours, donc les choses deviendront plus claires et nous travaillerons beaucoup avec et vous 137 00:10:58,930 --> 00:11:05,170 verrez comment vous pouvez créer de belles interfaces utilisateur avec flexbox, flexbox à la fin est l'outil de React Natif pour structurer votre 138 00:11:05,170 --> 00:11:10,570 contenu sur une page, pour organiser votre contenu et vous travaillerez généralement avec beaucoup de vues que vous imbriquerez également 139 00:11:10,570 --> 00:11:15,190 les unes dans les autres pour que vous puissiez positionner les éléments comme vous le souhaitez, car 140 00:11:15,190 --> 00:11:16,720 bien sûr et c'est 141 00:11:16,840 --> 00:11:21,680 aussi important, vous ne pas juste avoir une vue dans votre application qui utilise flexbox, vous pouvez avoir 142 00:11:21,730 --> 00:11:26,050 une autre vue là-dedans qui utilise également flexbox et en fait comme je l'ai mentionné, chaque 143 00:11:26,050 --> 00:11:31,570 vue utilise par défaut flexbox et vous pouvez ensuite imbriquer ces vues les unes dans les autres afin que vous 144 00:11:31,600 --> 00:11:35,070 positionnez tout comme vous le souhaitez et vous le verrez également dans 145 00:11:35,140 --> 00:11:41,200 ce module déjà et en fait, je le fais déjà ici. Dans mes vues ici qui sont dans la vue environnante, 146 00:11:41,200 --> 00:11:47,710 donc mes cases ici, là j'utilise aussi justifier le contenu et aligner les éléments pour centrer mes numéros dans ces cases, de 147 00:11:47,710 --> 00:11:54,070 sorte que 1, 2 et 3 y soient centrés horizontalement et verticalement et ça marche parce que nous avons flexbox activé 148 00:11:54,070 --> 00:12:00,700 par défaut et nous ne pouvons pas le désactiver d'ailleurs et par conséquent, j'utilise simplement ces deux propriétés ici pour aligner mon 149 00:12:00,700 --> 00:12:08,320 contenu de cette vue le long de l'axe principal et de l'axe transversal et ici puisque je n'ai défini aucun flex spécial pour cette vue, l'axe 150 00:12:08,320 --> 00:12:14,170 principal est de haut en bas car la direction de flexion par défaut est la colonne et l'axe transversal 151 00:12:14,530 --> 00:12:16,420 est de gauche à droite. 152 00:12:16,420 --> 00:12:17,440 Ce n'est qu'une note secondaire.