Bonjour, j'apprends en ce moment le HTML5 et le CSS. Je me trouve actuellement dans le TP ou je dois faire de moi même le site web qui parle d'un voyage à San Francisco.

Mais j'ai un soucis, je pense avoir mal assimilé Flexbox, et j'ai l'impression de ramer même en retournant sur le cours Flexbox. Par exemple, sur le site que je dois coder, j'en arrive a <section> qui devient un bloc, mais après avoir mis display:flex, mes élements sont bien <aside><article> et <nav> ou je suis complètement à l'Ouest ?

Merci d'avance et j'espère être clair. :-/

Bonjour,

Il est très difficile de répondre sans voir ton code ni ce que tu souhaites obtenir, nous ne sommes malheureusement pas devins. Tu dois nous aider à t'aider. 

   <section>
                <article>
                    
                        <h1>Je suis un grand voyageur</h1>

                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec sagittis massa. Nulla facilisi. Cras id arcu lorem, et semper purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis vel enim mi, in lobortis sem. Vestibulum luctus elit eu libero ultrices id fermentum sem sagittis. Nulla imperdiet mauris sed sapien dignissim id aliquam est aliquam. Maecenas non odio ipsum, a elementum nisi. Mauris non erat eu erat placerat convallis. Mauris in pretium urna. Cras laoreet molestie odio, consequat consequat velit commodo eu. Integer vitae lectus ac nunc posuere pellentesque non at eros. Suspendisse non lectus lorem.</p>

                            <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem. Quisque mollis ullamcorper diam vel faucibus. Vestibulum sollicitudin facilisis feugiat. Nulla euismod sodales hendrerit. Donec quis orci arcu. Vivamus fermentum magna a erat ullamcorper dignissim pretium nunc aliquam. Aenean pulvinar condimentum enim a dignissim. Vivamus sit amet lectus at ante adipiscing adipiscing eget vitae felis. In at fringilla est. Cras id velit ut magna rutrum commodo. Etiam ut scelerisque purus. Duis risus elit, venenatis vel rutrum in, imperdiet in quam. Sed vestibulum, libero ut bibendum consectetur, eros ipsum ultrices nisl, in rutrum diam augue non tortor. Fusce nec massa et risus dapibus aliquam vitae nec diam.</p>

                            <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue. Sed auctor fringilla quam quis porttitor. Praesent vitae dignissim magna. Pellentesque quis sem purus, vel elementum mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas consectetur euismod urna. In hac habitasse platea dictumst. Quisque tincidunt porttitor vestibulum. Ut iaculis, lacus at molestie lacinia, ipsum mi adipiscing ligula, vel mollis sem risus eu lectus. Nunc elit quam, rutrum ut dignissim sit amet, egestas at sem.</p>
                </article>

                <aside>
                    <h1>A propos de l'auteur</h1>
                        <img src="images/zozor_classe.png" alt="Zozor2"/>
                            <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p>

                            <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>
                    <nav>
                        <ul>
                            <li><a href="#"><img src="images/facebook.png" alt="facebook"></a></li>
                            <li><a href="#"><img src="images/twitter.png" alt="twitter"></a></li>
                            <li><a href="#"><img src="images/vimeo.png" alt="vimeo"></a></li>
                            <li><a href="#"><img src="images/flickr.png" alt="flickr"></a></li>
                            <li><a href="#"><img src="images/RSS.png" alt="RSS"></a></li>
                        </ul>
                    </nav>
                </aside>
</section>

Désolé, si maintenant j'applique :

section

{
display: flex;
}

Mes éléments sont automatiquement aside, article, et nav ?

Ou je créer juste un bloc sans élément ? je comprend pas trop :/.

-
Edité par 24Avl 13 février 2018 à 17:46:25

Hello,

une flexbox ( = un élément en display:flex, <section> dans ton cas) va aligner et dimensionner ses enfants de premier niveau et uniquement eux, en fonction des propriétés flex de la flexbox (flex-direction; justify-content, order, etc.)

 Dans le code que tu montres, la section a deux enfants, <article> et <aside> auxquels seront appliquées les propriétés flex définies pour le parent <section>

C'est plus clair ainsi ?

Oui c est un peu plus clair, par contre<nav> ne s applique pas car il est dans aside c est bien ca ? Donc si je met la propriete display:flex sur la balise <aside> nav devient un element? Merci de vos reponses en tout cas

oui, on peut passer <aside> lui-même en flexbox, ses enfants de premier niveau seront concernés par les propriétés flex de <aside>, mais dans ton cas il s'agit de <h1>, <img>, 2 fois <p> et <nav>, le résultat risque d'être étrange... et pas du tout ce que tu veux;
d'ailleurs que veux tu afficher ?

Sinon, une flexbox peut être à l'intérieur d'une flexbox, pas de contre-indication

Merci pour tes réponses, je veux afficher à la fin de mon codage, le site web du TP qui est dans le cours. Bonne soirée et encore merci.