Tutoriel CSS : Flexbox
HTML-код
- Опубликовано: 5 сен 2016
- Article ► grafikart.fr/tutoriels/flexbo...
Abonnez-vous ► bit.ly/GrafikartSubscribe
Flexbox est un nouveau mode de mise en page (display) qui permet de disposer les éléments de manière plus flexible et de gérer de manière prévisible leur alignement quelque soit la taille de l'écran. Ce nouveau mode de disposition vient se positionner comme une amélioration du modèle block reposant sur les floats.
Soutenez Grafikart:
Devenez premium ► grafikart.fr/premium
Donnez via Utip ► utip.io/grafikart
Retrouvez Grafikart sur:
Le site ► grafikart.fr
Twitter ► / grafikart_fr
Discord ► grafikart.fr/tchat 
Наука
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!
Abuse pas
@@darshank8748 ??
t'es un dingue avec les flexbox on voit que t'es vraiment CHAUD CHAUD CHAUD :) bien joué , super tuto rapide efficace :)
Super!!! bien expliqué comme toujours Merci
Le mec qui parle couramment le CSS.
Merci ! Un tutoriel super bien expliqué sur un système d'affichage tellement puissant! wow !
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
Je kiffe la chemise en accord avec la miniature, du CSS de haut niveau ça :p
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 !
Wow calm down bro 😂
Je connaissais pas du tout Flex, mais c'est génial ! Je suis fan.
***** 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.
j'ai du mettre la vidéo en lecture 0,75 tellement t'es speed x)
moi aussi mails tellement il explique bien que j ai tenu bon de terminer ma lecture ;)
Excellente vidéo !
Franchement, il est trop fort
Ca donne un peu le mal de mer ces remonté et descente de page mais le tuto est très instructif ! Bravo et merci !
Merci pour cette vidéo, j'ai enfin compris après des semaines d'essais hasardeux ...
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é :)
super bien expliqué merci beaucoup :p
Super tuto :) Merci
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 !
merci pour ce cours !
cest vraiment incroyable
Super tuto !
Grand grand merci!
"Oh miracle" 22:14
En tout cas, super vidéo !
TRES TRES TRES BON TUTO FLEXBOX
t'es un boss, tu augmente ma progression pendant ma formation (o'clock) d'un bon 75% c'est fou
Leo G hey 🖥👀
@@saralouazo8928 ?
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?
@@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
@@leog7277 merci de ta réponse leo je pense que je vais commencer la formation en juillet :)
You're a Beast... Man!!!
Merci beaucoup pour cette video
Merci beaucoup ! :)
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.
Merci beaucoup !
Merci !
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. ^^
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 !
merci beaucoup meileur tuto
Ca utilise plus Lorempicsum ? :p
j'ai un probleme avec le flex dès que je l'utilise, j'ai ma balise qui apparait dans le navigateur !
Suuuper mn frère !!! :Like:
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
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... :)
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
Grafikart ne fais pas de Java donc je pense pas qu'il fasse de vidéo dessus ^^
Merci.
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...
xD
Tu sait Ad Blocker sa existe x)
mdr
😂
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 !!
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
Merci...super clair. Un peu rapide par moment mais il suffit de revenir en arrière.
Plein d'infos, merci. SI je puis me permettre, sur celui-là c'est super speed...
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
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
T’es à quel niveau ?
merci
*Salut merci vraiment beaucoup j'ai une petite question, comment fais tu pour reload ta page en même temp que tu code !*
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.
c'est cool
salut, pourquoi mettre le ".mosaic" et le ".mosaic img" se sont pas les même ? c'est quoi la différence ?
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 !
super tuto comme toujours mais j'ai du le voir 3 fois en coupant souvent car tu vas trop vite ^^ sinon impec les explications
Tu utilises quoi comme logiciel pour éditer ton code ? il a l'air vachement bien ! merci
Ici il utilise l'IDE IntelliJ. :)
Cool
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 !
Salut, moi aussi je cherche cette extension !!!
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
@@grafikart Un grand merci pour la réponse (et rapide en plus :D)
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 :)
C'est chrome qui l'affiche quand j'utilise l'inspecteur, me semble pas avoir activé qqchose en particulier :(
@@grafikart tu es le best !
@@grafikart
Niquel la réponse rapide ! Merci Grafikart ça fonctionne :)
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 :-)
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..
Non ce n'est pas un plugin, c'est du CSS simple. cf : developer.mozilla.org/en-US/docs/Web/CSS/flex
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.
Voici: flexboxfroggy.com
C'est ça, merci ☺
Open classroom devrait acheter les droits de tes vidéos et les mettre sur leur site parce que tu expliques beaucoup mieux.
Bonne video merci, mais c'est quel IDE que vous utilisez ?
Dans cette vidéo j'utilise IntellijIDEA
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.
Il y a certainement des polyfill pour aider à la comptabilité avec IE. ^^
Avec Modernizr, cela semble possible également de régler son compte à IE ;)
Merci pour l'idée en tout cas.
CIMER
flexbox support for IE ?
IE11 support is a bit broken, you can readd more about it here : caniuse.com/#search=flexbox
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?)
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.
merci
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.
flex-direction:row; est la valeur par défaut. "row=ligne". Donc c'est normalement que cela ne change rien.
@@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
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
Cest du html4 right?
HTML5
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
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.
O o,ok
Qui est là grâce à Aurélie ?
Indispensable!
@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!
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...
trop rapide
Mieux
Complet mais tellement peu pédagogique...
Personne n’oblige à regarder
Bien mais tu parle trop rapidement .
Merci !