Je suis la formation HTML/CSS du site, et j'ai une question.
Hier j'en étais à l'étape d'intégrer une maquette en html/css. Je l'ai réalisé mais je me suis rendu compte après coup que j'avais utilisé des fonctions {width : 250px (par exemple) au lieu de jouer avec les
xxx {
flex:un nombre
Je décide donc aujourd'hui de refaire la maquette en essayant de respecter les propriétés flex qui sont associés au HTML mais je me retrouve bloqué (pour petit rappel voici la maquette que je dois intégrer dans le cours)
Je suis actuellement sur la section (section verte dans la maquette). Je parle donc d'ajuster la taille de l'article et du aside sa droite.
Voici mon code HTML :
<div class="section_article">
<div class="bloc_article">
<div class="entete_article">
<img src="images/ico_epingle.png">
<h1>JE SUIS UN GRAND VOYAGEUR</h1>
</div>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
[...]
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<aside>
<div class="bloc_auteur">
<h2>A PROPOS DE L'AUTEUR</h2>
<img src="images/zozor_classe.png">
<p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie afin que vous sachiez qui je suis réellement.</p>
<img src="images/rss.png">
<img src="images/twitter.png">
<img src="images/facebook.png">
<img src="images/vimeo.png">
<img src="images/flickr.png">
</div>
</aside>
</div>
Comment je peux cibler l'aside, ou la <div class="bloc_auteur"></div> afin de gérer le flex du contenu, et du coup avoir accès a sa largeur ?
J'ai essayé de disposer flex depuis le css en
aside {
flex:...
}
Ca ne fait rien, y compris avec ma div "bloc_auteur".
De plus, je ne suis pas du tout certain que mon code est bien agencé au départ afin que tout fonctionne ensuite, j'ai débuté il y a une dizaine de jours donc j'ai pas bcp de connaissances pr le moment, je me dépatouille en testant.
J'ai pas encore bien compris le comportement lorsqu'on display:flex une div parent, est ce qu'on peux gérer la largeur d'autres div enfante grâce a la propriété flex ? Il y a t-il des cas particuliers ?
Je serais très reconnaissant de votre aide. J'essaie généralement de m'en sortir tout seul (ca marche souvent) mais la je me trouve bloqué.
Salut, à première vu je ne vois pas de grosse erreur dans ton code, par contre flexbox définit la disposition des enfant dans le parent, ça ne remplace pas width et c'est tout à fait compatible avec ! Tu peux donc garder width dans ton exercice.
Flexbox est très puissant et très intéressant, n'hésite pas à regarder d'autres guides/tutos et tu comprendras très vite ce qu'il fait est comment t'en servir !
Lamecarlate, je cherche à définir la largeur de la div "bloc_auteur". Si tu regardes sur la maquette, c'est le aside à droite de l'article. Mais j'y arrive pas avec la propriété flex.
Pookie, j'avais vu que je pouvais gérer la largeur avec width. Mais vu que je suis en display:flex, c'est pas plus sain pour le site de gérer avec flex pour la largeur ? Histoire que les proportions soient à la même unité. Le truc qui m'embête avec width c'est que ça garde la même largeur pour des tailles d'écrans différentes. Et j'ai cru comprendre qu'avec flex, c'est en proportion par rapport aux autres éléments, donc ça se "resize" automatiquement.
En faite j'ai cru comprendre que le flex:"un nombre" permet à un élément enfant qui est en display:flex d'occuper plus ou moins d'espace dans le bloc parent. Mais je suis encore loin de tout gérer, des fois j'ai des div enfant qui réagissent pas aux propriétés flex, et j'ai tjrs pas compris pourquoi. Mais je continue de creuser.
Alors, non. Tu confonds la largeur de ton élément et sa capacité à grandir en fonction de la largeur de la fenêtre. Comme tu l'as dit, flexbox est responsive, il permet d'adapter facilement ton site en fonction de la taille de la fenêtre. Tu peux utiliser la propriété flex-grow: *chiffre*; sur les enfants pour que lorsque la page est agrandie ou rétrécie un élément prenne plus de place ou non. Regarde ce très bon guide flexbox je pense que ça va t'aider.
En suite tu as width, si tu veux définir une largeur à ton élément c'est LA propriété à utiliser en toutes circonstances. Après tu peux définir width en pixel, en % en vw... Si tu le défini en pixel en effet il ne sera pas responsive, mais si tu le définis en vw par exemple il se redimensionnera en même temps que la fenêtre.
Va vraiment voir le lien que je t'ai mis à la fin du premier paragraphe, c'est un guide très clair et bien illustré qui te permettra de tout bien comprendre. J'ai conscience que ça peut paraître flou au départ :)
Ok je vois, effectivement j'ai plutôt compris les notions de manière individuelle, mais lorsqu'elles se croisent, c'est tout de suite plus compliqué.
Merci pour la documentation, j'étais déjà tombé dessus mais je m'y étais jamais penché. Je vais lire tout ça en espérant que je comprenne ce qui y est dit.
Bonne soirée à tous,
Paul
PS :
J'ai juste besoin d'une précision élémentaire que j'arrive pas à trouver sur internet.
Si je change la width d'un élément enfant, (un de mes flex-items), je suis OBLIGE d'annoncer une width sur les autres flex-items afin que la première soit comptabilisé ?
exemple : j'ai deux articles que je veux mettre cote a cote, l'un a 40vw, l'autre a 60vw.
Je remarque sur mes test que si j'applique juste 40vw a l'un, ca fonctionne pas. Faut que je précise que l'autre soit a 60vw. Il y a pas un moyen pour demander a l'article 2 (mon deuxieme flex-items) de prendre toute la place restante ? j'ai essayé avec flex-grow mais impossible d'y parvenir.
- Edité par PoloDev 6 avril 2021 à 20:31:36
Flexbox comportement flex
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)