Tutoriel CSS : Flexbox

Поділитися
Вставка
  • Опубліковано 9 лис 2024

КОМЕНТАРІ • 121

  • @ZephB
    @ZephB 4 роки тому +25

    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!

  • @ZenarK77
    @ZenarK77 7 років тому +4

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

  • @leog7277
    @leog7277 4 роки тому +2

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

    • @saralouazo8928
      @saralouazo8928 4 роки тому +1

      Leo G hey 🖥👀

    • @leog7277
      @leog7277 4 роки тому

      @@saralouazo8928 ?

    • @antoinegodin4229
      @antoinegodin4229 4 роки тому

      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
      @leog7277 4 роки тому

      @@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
      @antoinegodin4229 4 роки тому +1

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

  • @taniax8944
    @taniax8944 6 років тому +10

    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 !

  • @soulofkaze
    @soulofkaze 2 роки тому

    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

  • @antoinegodin4229
    @antoinegodin4229 4 роки тому +1

    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é :)

  • @vjvl5205
    @vjvl5205 4 роки тому +16

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

  • @mouradqqch1767
    @mouradqqch1767 8 років тому +7

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

  • @saralouazo8928
    @saralouazo8928 4 роки тому +3

    Le mec qui parle couramment le CSS.

  • @kenchap9474
    @kenchap9474 4 роки тому +2

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

  • @MrZokiMan
    @MrZokiMan 8 років тому

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

  • @greg-devfr
    @greg-devfr 8 років тому +86

    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...

  • @ChildericHD
    @ChildericHD 3 роки тому +4

    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.

  • @FostPhore
    @FostPhore 4 роки тому +2

    Franchement, il est trop fort

  • @Saskyia
    @Saskyia 3 роки тому +2

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

  • @kissu_io
    @kissu_io 8 років тому +4

    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. ^^

  • @totsoze
    @totsoze 8 років тому +1

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

    • @totsoze
      @totsoze 8 років тому

      ***** 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.

  • @kanukalombo5555
    @kanukalombo5555 Рік тому

    Merci beaucoup !

  • @jimofmarseille
    @jimofmarseille 3 роки тому

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

  • @lnnnnnnnnnn
    @lnnnnnnnnnn 7 років тому

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

  • @lucpage4367
    @lucpage4367 8 років тому +1

    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... :)

  • @floriangustin5113
    @floriangustin5113 6 років тому

    TRES TRES TRES BON TUTO FLEXBOX

  • @baldeousmanedade4462
    @baldeousmanedade4462 8 років тому +6

    Super!!! bien expliqué comme toujours Merci

  • @viamontes1
    @viamontes1 6 років тому

    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
      @CharismaTell 11 місяців тому

      T’es à quel niveau ?

  • @realhustler3192
    @realhustler3192 7 років тому

    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

  • @jacquespirault8560
    @jacquespirault8560 4 роки тому +1

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

  • @batajoie
    @batajoie 8 років тому

    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
      @quenti7728 8 років тому +1

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

  • @russeltchoga3391
    @russeltchoga3391 4 роки тому

    Merci beaucoup pour cette video

  • @lucmaradan4370
    @lucmaradan4370 4 роки тому

    merci pour ce cours !

  • @juliendesart
    @juliendesart 6 років тому

    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 :-)

  • @ourielperez1646
    @ourielperez1646 3 роки тому

    Merci beaucoup ! :)

  • @olivierhuvelle5253
    @olivierhuvelle5253 5 років тому +2

    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
      @EmilOuuu007 5 років тому +1

      Salut, moi aussi je cherche cette extension !!!

    • @grafikart
      @grafikart  5 років тому +3

      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
      @olivierhuvelle5253 5 років тому +2

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

  • @hassanchaou5268
    @hassanchaou5268 4 роки тому

    merci beaucoup meileur tuto

  • @troupalkropo5414
    @troupalkropo5414 8 років тому

    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.

  • @EzMC2
    @EzMC2 6 років тому

    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
      @bricedenice6911 5 років тому

      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

  • @antoine-louis
    @antoine-louis 5 років тому

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

  • @renaudbrecl1355
    @renaudbrecl1355 5 років тому +1

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

  • @zerefdev
    @zerefdev 7 років тому

    cest vraiment incroyable

  • @grapaingaming4605
    @grapaingaming4605 8 років тому

    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 !

  • @MrShadows
    @MrShadows 8 років тому +2

    Ca utilise plus Lorempicsum ? :p

  • @Pacific241
    @Pacific241 8 років тому +1

    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
      @kissu_io 8 років тому

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

    • @Pacific241
      @Pacific241 8 років тому

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

  • @albi17
    @albi17 3 роки тому

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

    • @grafikart
      @grafikart  3 роки тому +1

      Dans cette vidéo j'utilise IntellijIDEA

  • @Jc-handle-with-care
    @Jc-handle-with-care 4 роки тому

    merci

  • @lucpage4367
    @lucpage4367 8 років тому

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

    • @LouistitiFr
      @LouistitiFr 8 років тому

      Ici il utilise l'IDE IntelliJ. :)

  • @NathanPower83
    @NathanPower83 2 роки тому

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

  • @userl51631
    @userl51631 8 місяців тому

    Cool

  • @adamdeuxieme
    @adamdeuxieme 7 років тому

    Excellente vidéo !

  • @YaoBoy
    @YaoBoy 4 роки тому

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

    • @alfahami5210
      @alfahami5210 4 роки тому +1

      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.

  • @ericdeternes
    @ericdeternes 5 років тому

    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

  • @emilienizic478
    @emilienizic478 4 роки тому

    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
      @grafikart  4 роки тому +1

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

    • @Auxape
      @Auxape 4 роки тому

      @@grafikart tu es le best !

    • @emilienizic478
      @emilienizic478 4 роки тому

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

  • @AlainMazy
    @AlainMazy 6 років тому

    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
      @grafikart  6 років тому +1

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

  • @yannickbaudu9818
    @yannickbaudu9818 7 років тому

    Merci !

  • @lefuturiste27
    @lefuturiste27 8 років тому

    Super tuto !

  • @ilaly6391
    @ilaly6391 4 роки тому

    Grand grand merci!

  • @SVJY15
    @SVJY15 6 років тому

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

  • @mentalresistance174
    @mentalresistance174 7 років тому

    Merci.

  • @gboyz97297
    @gboyz97297 4 роки тому

    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 !

  • @LePollio
    @LePollio 7 років тому

    super bien expliqué merci beaucoup :p

  • @abdechahide1408
    @abdechahide1408 6 років тому

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

  • @aminzuar5767
    @aminzuar5767 6 років тому

    Suuuper mn frère !!! :Like:

  • @mihajaniainarajohnson9229
    @mihajaniainarajohnson9229 7 років тому

    Super tuto :) Merci

  • @ao9779
    @ao9779 6 років тому +2

    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
      @grafikart  6 років тому +2

      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.

  • @knopfler2006
    @knopfler2006 7 років тому

    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
      @tech-info69 7 років тому

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

    • @huguolin2543
      @huguolin2543 5 років тому

      @@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

  • @Dvvuuh
    @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

  • @jasongauvin8309
    @jasongauvin8309 6 років тому

    CIMER

  • @protamez5041
    @protamez5041 6 років тому

    c'est cool

  • @Mrbenthebossofficiel
    @Mrbenthebossofficiel 6 років тому

    Cest du html4 right?

  • @Fichleai
    @Fichleai 6 років тому

    flexbox support for IE ?

    • @grafikart
      @grafikart  6 років тому +2

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

  • @juliensimracer
    @juliensimracer 7 років тому

    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
      @knopfler2006 7 років тому

      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
      @juliensimracer 7 років тому

      merci

  • @anonymousse740
    @anonymousse740 4 роки тому

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

  • @mouhameddiakhate3478
    @mouhameddiakhate3478 3 місяці тому

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

    • @grafikart
      @grafikart  3 місяці тому +1

      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
      @mouhameddiakhate3478 3 місяці тому

      @@grafikart merci

  • @nelsonmandarine3020
    @nelsonmandarine3020 6 років тому +17

    Complet mais tellement peu pédagogique...

    • @tiekkale
      @tiekkale 6 місяців тому

      Personne n’oblige à regarder

  • @sourireanonyme6543
    @sourireanonyme6543 5 років тому

    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...

  • @mariobuttaci6380
    @mariobuttaci6380 4 роки тому

    O o,ok

  • @MatDGVLL
    @MatDGVLL 8 років тому +1

    Indispensable!

  • @tech-info69
    @tech-info69 7 років тому

    @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!

  • @comments1773
    @comments1773 7 років тому +2

    trop rapide

  • @jeremynrvx1216
    @jeremynrvx1216 4 роки тому

    Bien mais tu parle trop rapidement .

  • @drissnach7446
    @drissnach7446 5 років тому

    Mieux

  • @yannickbaudu9818
    @yannickbaudu9818 7 років тому

    Merci !