Tutoriel CSS : Flexbox

[@ZephB]

WoW! Je suis une formartion open-classroom et je comprenais rien aux utilisations de flexbox. Maintenant grâce à ta vidéo je comprend le raisonnement derrière merci!

[@darshank8748]

Abuse pas

[@Riptor_WL]

@@darshank8748 ??

[@ZenarK77]

t'es un dingue avec les flexbox on voit que t'es vraiment CHAUD CHAUD CHAUD :) bien joué , super tuto rapide efficace :)

[@seiyseiy76000]

Tellement plus simple et ludique que tous les organismes de formation que j'ai pu voir jusqu'à présent. Ils devraient avoir honte ces cons. Tu es trop !

[@CharismaTell]

Wow calm down bro 😂

[@leog7277]

t'es un boss, tu augmente ma progression pendant ma formation (o'clock) d'un bon 75% c'est fou

[@saralouazo8928]

Leo G hey 🖥👀

[@leog7277]

@@saralouazo8928 ?

[@antoinegodin4229]

salut leo suis entrain d'apprendre le html/ css et jai debuté le php en solo depuis le confinement ...je me tate a prendre une formation o clock. me la conseille tu ? ou alors est ce que d'apres toi je peux continuer en autodidacte via youtube et les site web?

[@leog7277]

@@antoinegodin4229 bonne question, tout depend de ce que tu appelle avoir des notions en php, est-ce que tu sais gerer une session, des appelles BDD, du dynamisme de données, non pas que ce soit grave de pas connaître ça selon le temps que tu y as passé, et c'est surtout selon tes objectifs, si tu veux devenir développeur "rapidement" ou si tu as le temps, la formation oclock je la recommande à 100% car super pro tres pedagogique, l'entraide est presente et les profs sont là pour t'aider et te faire progresser, si tu es sur d'avoir une bonne base en html css php et js, tu peux passer direct à l'étape de la spécialisation chez eux, en ne faisant donc pas le socle, mais encore une fois c'est selon ce que tu sais faire à l'heure actuelle et tes impératifs

[@antoinegodin4229]

@@leog7277 merci de ta réponse leo je pense que je vais commencer la formation en juillet :)

[@soulofkaze]

Merci Grafikart pour tout ce que tu fais , je serais le enieme à te remercier mais plus je progresse grace à tes vidéos et conseils , plus je me sens obliger de ne pas me contenter de mettre un simple pouce bleu, meme si malgré tout ce commentaire me semble bien dérisoire comparé au travail et temps que tu consacres à ces vidéos pour nous aider

[@mouradqqch1767]

Je kiffe la chemise en accord avec la miniature, du CSS de haut niveau ça :p

[@kenchap9474]

Merci ! Un tutoriel super bien expliqué sur un système d'affichage tellement puissant! wow !

[@antoinegodin4229]

je bug sur flexbox depuis quelque jours ( avec aussi les absolute relativ float etc...), jai maté plein de tuto ( de openclassrooms ainsi que plusieurs chaines youtube) , je peux te dire que tu as la meilleure explication :) super tutoriel merci a toi je vais te suivre et m'abonné :)

[@taniax8944]

Graphikart, je tiens à te dire que FlexBox et ton tuto, vous venez de me debugger mon code ou j'étais bloquer depuis + d'une heure ! Merci beaucoup pour tout tes tutos !

[@vjvl5205]

j'ai du mettre la vidéo en lecture 0,75 tellement t'es speed x)

[@codingkidsrobotiquebizerte869]

moi aussi mails tellement il explique bien que j ai tenu bon de terminer ma lecture ;)

[@saralouazo8928]

Le mec qui parle couramment le CSS.

[@MrZokiMan]

Ca donne un peu le mal de mer ces remonté et descente de page mais le tuto est très instructif ! Bravo et merci !

[@totsoze]

Je connaissais pas du tout Flex, mais c'est génial ! Je suis fan.

[@totsoze]

***** Oh non je touche plus au développement web depuis un moment, mais j'essaie de suivre ce qu'il y a de nouveau, ça facilite pas mal la vie.

[@baldeousmanedade4462]

Super!!! bien expliqué comme toujours Merci

[@FostPhore]

Franchement, il est trop fort

[@ChildericHD]

Salut tuto intéressant surtout que je suis en formation mais le souci c'est que tu est trop speed quand tu fait un tuto va doucement pour qu'on voit ou tu clique et aussi parle lentement on comprends mieux faut penser que les personnes qui regarde débute mais merci pour ta vidéo.

[@kissu_io]

Super cool comme tuto, même si tu n'as pas parlé de l'impact d'un changement de direction (quand tu le passes en column) sur les autres propriétés flex. ^^

[@lnnnnnnnnnn]

Merci pour cette vidéo, j'ai enfin compris après des semaines d'essais hasardeux ...

[@Saskyia]

Merci...super clair. Un peu rapide par moment mais il suffit de revenir en arrière.

[@viamontes1]

t'es un boss XD je me met au html/css depuis 3 jours j'ai du mal a tout retenir mais tu explique très bien et surtout tu utilise les bons mots, juste une chose peut tu préciser les raccourcis que tu utilise ? avec une image sur le coté ou le nom des touches que tu appuies ? C'est vraiment cool d'avoir accès a ce savoir qui plus est en français :D je m'abonne immédiatement tu fait du bon taff ! :D

[@CharismaTell]

T’es à quel niveau ?

[@antoine-louis]

"Oh miracle" 22:14 En tout cas, super vidéo !

[@greg-devfr]

je regarde tellement de tuto de dev web que parfois j'ai l'impression que la pub pour WIX c'est ton générique...

[@Clement-xy9iv]

xD

[@xdvalensdx2160]

Tu sait Ad Blocker sa existe x)

[@danhabib3441]

mdr

[@abdulkabir_02]

😂

[@floriangustin5113]

TRES TRES TRES BON TUTO FLEXBOX

[@kanukalombo5555]

Merci beaucoup !

[@lucmaradan4370]

merci pour ce cours !

[@batajoie]

Super Tuto comme toujours. (j'ai énormement appris avec toi depuis deux mois) J'ai une requête . Une Serie de tuto sur Java Edition Entreprise JEE serai d'une grande aide pour nous. Merci

[@quenti7728]

Grafikart ne fais pas de Java donc je pense pas qu'il fasse de vidéo dessus ^^

[@lucpage4367]

Hello, super ce tuto. dans la première partie de ton tuto (10 premières minutes), tu parles précisément d'un cas que j'ai mis en pratique la semaine dernière. Je n'ai juste pas réussi à aligner les éléments de la dernière ligne à gauche avec un espace similaire aux lignes du dessus, dans le cas où ils ne seraient pas au nombre prévu sur les premières lignes. Je précise : 2 premières lignes de 4 élements (calé à gauche, calé à droite avec un espace équitable : display: flex; flex-wrap: wrap; justify-content: space-between; ). mais la dernière ligne si il elle n'a que 2 éléments, ils vont se caler à gauche à droite et rien au milieu, donc pas beau, pas logique. Comment calerais-tu les éléments de cette dernières ligne à gauche (avec le même espace qu'au dessus donc) ? En espérant être assez clair... :)

[@olivierhuvelle5253]

Super vidéo :) Pouvez-vous lister les extensions que vous utilisez pour visual studio code ? je suis intéressé en particulier par celle que vous utilisez à 14:45 Merci d'avance !

[@EmilOuuu007]

Salut, moi aussi je cherche cette extension !!!

[@grafikart]

Dans cette vidéo j'utilise un autre éditeur mais vous pouvez faire la même chose dans Visual studio code en maintenant Shift + Alt et en sélectionnant avec le curseur

[@olivierhuvelle5253]

@@grafikart Un grand merci pour la réponse (et rapide en plus :D)

[@adamdeuxieme]

Excellente vidéo !

[@zerefdev]

cest vraiment incroyable

[@russeltchoga3391]

Merci beaucoup pour cette video

[@jimofmarseille]

Plein d'infos, merci. SI je puis me permettre, sur celui-là c'est super speed...

[@LePollio]

super bien expliqué merci beaucoup :p

[@realhustler3192]

Salut! Enfin je tombe sur un tutoriel super intéressant sur la Flexbox ! Désormais, j'ai ce qu'il faut pour affronter le responsive. MERCI Grafikart!!!!!!! J'aurai juste une question: quand tu fais le menu horizontal tu lui mets juste une heigth: 60px et tu centres les éléments. Jusque là je comprends. Mais comment est-ce que le conteneur fait-il pour occuper toute la largeur de l'écran? J'ai hâte de lire ta réponse. Merci

[@ourielperez1646]

Merci beaucoup ! :)

[@troupalkropo5414]

J'étais tombé sur un site du style de code combat mais uniquement pour ces règles. Il me semble que ça s'appelait flex frog ou un truc du genre. C'était vraiment sympa comme truc.

[@kissu_io]

Voici: flexboxfroggy.com

[@troupalkropo5414]

C'est ça, merci ☺

[@Pacific241]

Salut. J'ai failli l'utiliser il y a plusieurs mois pour un client mais le fait qu'il n'est pas ou mal supporté par Internet Explorer 9 et 10 m'a rebuté. C'est vrai qu'en termes de syntaxes, c'est bluffant. Bref, très bonne vidéo bien expliquée comme d'habitude.

[@kissu_io]

Il y a certainement des polyfill pour aider à la comptabilité avec IE. ^^

[@Pacific241]

Avec Modernizr, cela semble possible également de régler son compte à IE ;) Merci pour l'idée en tout cas.

[@lefuturiste27]

Super tuto !

[@mihajaniainarajohnson9229]

Super tuto :) Merci

[@hassanchaou5268]

merci beaucoup meileur tuto

[@renaudbrecl1355]

super tuto comme toujours mais j'ai du le voir 3 fois en coupant souvent car tu vas trop vite ^^ sinon impec les explications

[@aminzuar5767]

Suuuper mn frère !!! :Like:

[@knopfler2006]

02:55 Non, pour moi par défaut les éléments sont alignés en ligne. On voit bien à 03:07 que quand tu tapes flex-direction: row; rien ne bouge.

[@tech-info69]

flex-direction:row; est la valeur par défaut. "row=ligne". Donc c'est normalement que cela ne change rien.

[@huguolin2543]

@@tech-info69 à 02:55 il dit en colonne par défaut, j'ai vite compris que c'était un mot mod "reverse" :-). A moins que je me trompe

[@jacquespirault8560]

Open classroom devrait acheter les droits de tes vidéos et les mettre sur leur site parce que tu expliques beaucoup mieux.

[@ilaly6391]

Grand grand merci!

[@EzMC2]

génialissime ! merci ! juste une question ! quel est l'outil que tu utilises pour afficher la taille des images en pixels juste avec ton curseur ? ça me serais utile !!

[@bricedenice6911]

je crois que avec le menu de développement (F12) tu peut afficher la taille en pixel d'une image en utilisant le raccourci clavier ctrl+shift.+C et en passant le curseur sur ton image

[@abdechahide1408]

You're a Beast... Man!!!

[@juliendesart]

Hello, merci ! J'avais commencer à lire via un site mais à l'utilisation ça donnait vraiment rien. En tout cas, je pense que je vais mieux m'en sortir mais je vais continuer à regarder :-)

[@AlainMazy]

Je ne comprend pas un truc, c'est quoi cette syntaxe?? Pas du Chtemele en tous cas, à peine et un peu CSS .. Mais ça me semble trop simple.. peut on charger réellement des images? et faire un footer qui se déplace en fonction du contenu? C'est un plugin? pour quelque chose ou un stand only..

[@grafikart]

Non ce n'est pas un plugin, c'est du CSS simple. cf : developer.mozilla.org/en-US/docs/Web/CSS/flex

[@emilienizic478]

Salut, merci pour ta vidéo ! Je voulais juste savoir comment tu affiches la taille de ta fenêtre en px en haut a droite de celle-ci ? Je te remercie :)

[@grafikart]

C'est chrome qui l'affiche quand j'utilise l'inspecteur, me semble pas avoir activé qqchose en particulier :(

[@Auxape]

@@grafikart tu es le best !

[@emilienizic478]

@@grafikart Niquel la réponse rapide ! Merci Grafikart ça fonctionne :)

[@MrShadows]

Ca utilise plus Lorempicsum ? :p

[@NathanPower83]

salut, pourquoi mettre le ".mosaic" et le ".mosaic img" se sont pas les même ? c'est quoi la différence ?

[@grapaingaming4605]

Bonjour, Quelle est le live reload que tu utilises pour pouvoir actualiser après la sauvegarde de fichier et voir tout de suite sur chrome ? J'utilise flo.js mais ce qui me dérange c'est de devoir toujours avec la console développeur ouverte ( F12) ! Help please thks !

[@albi17]

Bonne video merci, mais c'est quel IDE que vous utilisez ?

[@grafikart]

Dans cette vidéo j'utilise IntellijIDEA

[@gboyz97297]

bonjour, j'aimerais centrer un élement sans que d'autre sois affecté par sa postion, c'est a dire qu'ils peuvent passer par dessous si ils veulent vu qu'ils pensent que l'objet centrer n'existe pas , et l'objet centrer de ma div doit etre vraiment centrer du coup . Du coup surement sortir de l'alignement et changer le z-index mais cela ne marche pas -_-# . le css m'enmerde !

[@ao9779]

au passage, je trouve que les noms des propriétés Flexbox ont vraiment été mal choisis :/ pourquoi flex-start et pas juste "start", pourquoi avoir un préfix flex dans certains cas et pas dans d'autres, pourquoi avoir justify-content et align-content pour respectivement désigner l'alignement vertical puis horizontal ? même s'il me semble que pour être exacte c'est plutôt l'axe primaire puis secondaire en fonction de ce qu'on a choisis pour flex-direction... Bref c'est fouilli quoi

[@grafikart]

Ahah compl!tement d'accord. En fait ces propriétés servent aussi au grilles du coup je pense qu'ils ont voulu des noms génériques pour supporter de futur système de layout.

[@YaoBoy]

*Salut merci vraiment beaucoup j'ai une petite question, comment fais tu pour reload ta page en même temp que tu code !*

[@alfahami]

Normalement, il utiliser un live serveur local lancé depuis son éditeur de texte. Check le lien de sa page: localhost:3003 Beaucoup d'éditeur propose cette option, il suffit d'installer l'extension live server par exemple.

[@lucpage4367]

Tu utilises quoi comme logiciel pour éditer ton code ? il a l'air vachement bien ! merci

[@LouistitiFr]

Ici il utilise l'IDE IntelliJ. :)

[@ericdeternes]

Salut, Pour les menu j'ai essayé avec les sous menu mais les sous menu ne suivent pas, je ne sais pas trop comment faire ? Merci

[@yannickbaudu9818]

Merci !

[@SVJY15]

j'ai un probleme avec le flex dès que je l'utilise, j'ai ma balise qui apparait dans le navigateur !

[@Jc-handle-with-care]

merci

[@juliensimracer]

merci pour toutes ces superbes videos en Fr! je debute et du coup je cherche conseil... vaut il mieux apprendre et adopter bootstrap4 ou CSS flex pour les mises en pages responsive? (ou les2?)

[@knopfler2006]

Les deux, puisque Bootstrap 4 intègre la logique des flexbox. A mon avis, bien maitriser les flexbox permettra d'avoir certaines notions indispensables pour utiliser au mieux Bootstrap 4.

[@juliensimracer]

merci

[@userl51631]

Cool

[@mentalresistance174]

Merci.

[@Dvvuuh]

Bon j'avoue j'ai du te regarder en vitesse 0.75 j'ai trouver que tu aller et que tu parler assez vite avec le ralentissement on dirais juste t'est un peu bourrer sinon sa allez nickel xD

[@mouhameddiakhate3478]

placehold it n'est plus disponible en 2024, c'est pour cela je n'ai pas continuer le cours

[@grafikart]

Ce n'est pas génant pour suivre cette vidéo. Si tu veux des images temporaire tu peux utiliser picsum.photos/ à la place.

[@mouhameddiakhate3478]

@@grafikart merci

[@protamez5041]

c'est cool

[@Mrbenthebossofficiel]

Cest du html4 right?

[@grafikart]

HTML5

[@Fichleai]

flexbox support for IE ?

[@grafikart]

IE11 support is a bit broken, you can readd more about it here : caniuse.com/#search=flexbox

[@jasongauvin8309]

CIMER

[@anonymousse740]

Qui est là grâce à Aurélie ?

[@sourireanonyme6543]

Cette vidéo pour le coup on voit quelle est vielle et que tu la fais à coté des autres... je comprends plus... j'y reviendrai plus tard...

[@tech-info69]

@grafikart Pourquoi séparer le body et le sidebar sur la page vu que sémantiquement ce dernier est contenu par le premier par définition. Je suis pas fan de cette façon de faire même si dans l'ensemble tu expliques bien!

[@nelsonmandarine3020]

Complet mais tellement peu pédagogique...

[@tiekkale]

Personne n’oblige à regarder

[@jeremynrvx1216]

Bien mais tu parle trop rapidement .

[@comments1773]

trop rapide

[@mariobuttaci6380]

O o,ok

[@MatDGVLL]

Indispensable!

[@drissnach7446]

Mieux

[@yannickbaudu9818]

Merci !