Html - Css | FlexBox - Maitriser le positionnement (partie 1)
HTML-код
- Опубликовано: 10 июн 2018
- Page WeFormYou et Exercices : www.weformyou.fr/formations/h...
Pour s'abonner à la chaîne RUclips : / @weformyou
WeFormYou.fr : www.weformyou.fr
_______________________________________
Première partie de la formation sur les FlexBox, on aborde la théorie en listant les différentes propriétés intéressantes pour réaliser une mise en page responsive en HTML et CSS.
En effet le positionnement des éléments dans la page est toujours un véritable casse tête lorsque l'on doit prévoir l’affichage sur plusieurs types d'écrans.
En appliquant Le système du display:flex sur les éléments parents, nous avons la possibilité d'agir sur tous les éléments enfants.
Cette propriété CSS nous offre l'occasion d'agir sur les 2 axes (Horizontal ou Vertical), grâce au justify-content ou au align-items. Ceci afin de répartir les éléments du DOM dans notre mise en page.
#weformyou 
Наука
Vraiment top. Rien à redire. Parfaitement clair, et agréable à suivre. Merci !
Merci infiniment pour l'affichage des extensions ! Tu peux pas savoir combien de temps ça m'a em**rdé ça ! En même temps y avait pas ça avant !
Merci encore 😁
Meilleur tuto que j'ai trouvé, vraiment top👍
Merci ! 😄
Bonjour Weformyou. Très contente de m'essayer au CSS en plein avènement flexbox. Encore plus contente de tomber sur votre vidéo explicative excellemment bien menée un grand bravo à vous et un grand merci.
Merci à vous pour le commentaire !
Encor une fois MERCI vous êtes GENIAL
Yes papa merci pour cette petite vidéo .
J'avais un peu de mal avec flexbox, tu explique super bien merci beaucoup du coup je vais regarder les autres vidéos
Merci pour le commentaire. Il y aura de plus en plus de vidéo de programmation à l'avenir. A bientôt du coup ! 😄
Bravo,excellente explication
tres bien fait, merci !
Merci c'est super bien expliqué et tu es très pédagogue.
Merci Beaucoup 😃
Excellent Tuto
Merci merci merci !!! 🙌🏻
MERCI!!! Vraiment bravo!!!!!
Merci 😀
bonne video bien expliquer bravo
Bravo !!
pire cauchemar pour moi c les position des tables et quand je peux les pose merci pour ce video tu merite un click abonnement sur votre chaine youtube
Merci 🙂. Pensez à cocher la cloche pour les prochaines vidéos. A bientôt !
C vrai 😜😜😜😜merci
vraiment super bien expliqué (rare pour les vidéos en Français) , svp y'aura t-il une formation JS plus approfondie et surtout une pour React ( genre from beginner to expert ) ?
merci beaucoup
Merci
Merci pour cette vidéo ça fait plaisir.
J’ai une question qui peut paraître bête mais comment on positionne ses block sur l’interface ?
Bravo, surtout pour moi qui n'avait pas toucher au html et css depuis quelques mois
Merci. Bon courage pour se remettre dans le bain du codage ! ;)
bonjour et merci énormément pour vos explication je suis vraiment mais vraiment au 0 niveau codage HTML/CSS.
Je reviens sur la propriété "align-items:stretch" en commentant le "width" on comprend que les rectangle s'étire jusqu'au bout de la page ! ou à l'infini ?
ma question est : j'ai commenté le "align-items:stretch" et j'ai décommenté le "width" j'ai la même chose !!! alors qu'elle est la différence ?
et encore merci à vous . bonne année 2021
Mon css ne fonctionne pas avec le html même lorsque j’écris correctement le links
Bonne vidéo. Par contre je ne comprends pas pourquoi votre container n'est pas a 0px de votre body en margin-left et margin top . Ca me le fait tout le temps et je suis obligé de mettre des valeurs négatives pour que le block soit collé en haut à gauche de mon body.
Pareil pour quand j'écris en css "width: 100%;" , il y a quelques pixels sur le coté droit qui sont rempli par mon body et non par mon block. Du coup obligé d'écrire width: 103%;.
Comment résoudre ce problème ?
ps : Je m'abonne à votre chaîne
Bonjour, par défaut les navigateurs web mettent un margin sur l'élément body. A nous de l'enlever en CSS en le remettant à 0.
Mais si c'est pour un site complet, je vous conseille d'utiliser la feuille de style "normalize.css" qui enlève ces comportements par défaut et harmonise les éléments sur tous les navigateurs. Les frameworks CSS de type Bootstrap ou autre, utilisent d'ailleurs cette feuille de style.
;)
WeFormYou merci pour cette réponse complète :)
J'ai pas compris pourquoi le CSS dans le html ?
Bonjour j'ai un petit problème pour les children ca se marche pas dans le body j'ai tout mis le container marche mais pas le children si vous pouvez m'aider merci d'avance.
body{
background-color: #999;
}
.container{
background-color: #fff;
width: 300px;
height: 300px;
display: flex;
}
.children{
width: 50px;
height: 50px;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
.red{
background-color: red;
}
Le problème doit se situer dans le HTML, car le CSS me parait bon. Attention aux espaces à ajouter entre les class dans le HTML par exemple : class="children green"
Bonjour, je suis novice en la matière, j'ai récemment découvert votre page RUclips car j'essaye de créer un logiciel pouvant être transporté sur clé usb. Je regarde un peu toutes vos vidéos sans réellement savoir sur laquelle je dois me concentrer, si vous pouviez m'aider ^^
Cordialement
Bonjour, pour créer un véritable logiciel exécutable il vous faut d'autres langages, tel du Java ou du C. Cette vidéo parle de comment créer un site internet en HTML-CSS. Ce qui n'est pas la même chose (Par définition, le but n'est pas de le transporter par clé USB).
Cordialement
@@WeFormYou Bonsoir, je suis entrain de me renseigner sur le javascript, avez vous fais une vidéo concernant son utilisation ou son utilisation via sublime text? Le logiciel que je cherche à créer n'est pas révolutionnaire il me permettra uniquement de procéder à des calculs automatiques ^^
childreen?
Oui, j'ai eu la même remarque "children"
Bonjour, tout d'abord merci à vous pour vos tutoriels de grande qualité ! J'ai un souci la propriété display: flex; ne fonctionne pas et je n'ai aucune idée du pourquoi ^^
Flexbox
body{
background-color:darkgrey;
}
.container{
background-color: rgb(103, 122, 179);
height:300px;
width: 300px;
display:flex;
}
.children{
height:60px;
width:60px;
}
.green{
background-color: rgb(61, 143, 61);
}
.blue{
background-color:navy;
}
.red{
background-color: rgb(185, 67, 67);
}
Pourriez vous m'aider ? Merci d'avance :) ^^
Bonjour,
Enlever l’élément qui n'a que la class children dans le HTML. Il ne doit y avoir qu'un élément parent et 3 éléments enfants. Le display flex ne se répercute que sur les enfants directs, pas sur les petits enfants ;).
@@WeFormYou Merci à vous d'avoir pris le temps de répondre aussi rapidement ! :)
bjr, est un equivalent de ?
Bonjour.
Tout a fait. Les balises header, main, nav, aside, section, article, footer sont en réalité des div. C'est juste que nous leur donnons un nom afin de mieux définir notre code. Cela aide les moteurs de recherche à comprendre notre code. C'est plus compréhensible que de n'écrire que des div.
Cordialement
Si tu veux que ton site soit référencé, il FAUT utiliser les balises nominatives tel que ... sinon bye bye le référencement, ton site sera aux oubliettes.
tu peux parler plus doucement stp ? :'D
très bonne vidéo sinon
som tres faible