Bonjour à tous, 

Actuellement en train de faire le cour sur le html/css j'arrive à la fameuse page de Zozor, dans l'ensemble pas trop, de difficultés.

Plus une question, voici le header de la page.

<header>
                <div id="titre_principal">
                    <div id="logo">
                        <img src="images/zozor_logo.png" alt="Logo de Zozor" />
                        <h1>Zozor</h1>    
                    </div>
                    <h2>Carnets de voyage</h2>
                </div>
                
                <nav>
                    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">CV</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </header>

Ma question étant, pourquoi en faisant ce code Css, uniquement la "nav" bouge et se met en position horizontale?

Img/h1 et h2 restes dans la position column.

J'imagine une explivcation avec les divs mais je préfére avoir la réponse d'expert.

Merci d'avance.

body
{
    background: url('images/fond_jaune.png');
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page
{
    width: 900px;
    margin: auto;
}

section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Header */

header { background: url('images/separateur.png') repeat-x bottom; display: flex; }

Salut,

Quand tu mets display: flex cela affecte l'affichage des héritiers direct donc nav et #titre_principal.

Ok, donc cela n'affecte pas <div id"logo"> ? J'ai peur d'avoir loupé un chapitre dans le cour

Mais alors pourquoi <h2>carnet de voyage</h2> ne bouge pas non plu? Il est pourtant bien dans <div"titreprincipal">

désolé pour les questions mais je bloque la dessus, j'ai bien compris le fonctionnement de la "flexbox" mais j'ai du mal avec les priorités, et de savoir sur quel élément mon css va s'effectuer.

Ton display flex transforme tes enfants direct en flex item du coup c'est seulement la div titre principal et le nav. Le H2 et la div logo sont des enfants d'enfants donc pas héritier direct.

Merci Mamashi, j'ai beaucoup de mal avec cette histoire de priorité/parent/enfant… Très sincèrement même avec vos explications c'est encore très flou…

Peut-être avez-vous un lien vers une doc, un tuto ou bien même un exemple pour comprendre cette fonctionnalité?

Merci Brice

Euh y a la documentation MDN (Mozilal) en français qui esrvrres complète (html/je/DOM/api). Après parent enfant c'est très simple il suffit d'imaginer que les éléments html sont des boîtes imbriquées les unes dans les autres.

Imaginons <header><div><span></span></div></header>

La span est dans la div qui elle même est dans le header. Header est le parent de div. La div est l'enfant du header. Le div est le parent du span et le span est l'enfant du div. En gros quoi c'est juste l'élément qui est directement au dessus et en dessous voilà.

bonjour !

idem que toi Brice !

Du coup Mamashi, si j'ai bien compris ton explication :

si tu display:flex le header en css, c'est le <span> qui sera affecté et pas la div, c'est bien cela ?

Non c'est le premier niveau dans la hiérarchie qui est affecté.

Prenons :

<header>
 <div>
  <span></span>
 </div>
 <div></div>
</header>

header {
 display: flex;
}

C'est la div qui est affecté. Le header devient le conteneur (flex container). Les deux div deviennent quand à elles les éléments de ce conteneur. Du coup le flex box agit sur le conteneur (header) et les éléments ( les deux div) la span elle reste dans un contexte standard.

ah d'accord !je viens de comprendre !

j'ai des des blocs en image et j'ai compris ce que tu m'écrivais !

le rouge étant  le header

le vert la div1

le violet le span

noir la div2

si on applique un flex, ça donne ceci :

donc on voit que le header la div 1 et la div 2 ont été modifiés mais pas le span car ce n'est pas un enfant direct

merci Mamashi pour ton explication

Voila !

https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox

Merci pour les explications Mamashi, c'est désormais beaucoup plus clair pour moi.