Order des item dans les flexbox
Bonjour,
Après moulte tentatives pour comprendre l'ordre des item dans les Flexbox, je demande de l'aide si quelqu'un comprend le fonctionnement.
J'ai pourtant pas mal cherché dans les tutos, mais cela ne fonctionne pas comme c'est apparemment expliqué. Donc c'est moi qui suis à coté de la plaque.
Pourtant simple en pensant mobile first, j'ai tenté de faire un mini exemple d'une page toute bête.
https://codepen.io/JefReb/pen/XVPLJm
J'essaye simplement de mettre la navigation (nav) après <header> et <main> juste avant <footer> pour un mobile.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| #page {
position: relative;
width:600px;
margin:0 auto;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
header, nav, main, footer {
border: 1px solid black;
height: 100px;
}
nav {
order: 2;
} |
Code:
1
2
3
4
5
6
| <div id="page">
<header>header 1</header>
<nav>nav 2</nav>
<main>main 3</main>
<footer>footer 4</footer>
</div> |
Citation:
Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.
Si je mets order:-1, il se place en tête et c'est normal.
order:0 il est à sa place normal dans le flux
A partir de order:1 il se place toujours à la fin après <footer>
quelques soit le nombre supérieur à 1 il sera toujours après footer, alors que dans les tutos les exemples montrent des order:4 ou plus.
mais si je mets order:2 à footer tout de suite après nav, cela fonctionne:
Code:
1
2
3
4
5
6
| nav {
order: 2;
}
footer {
order:2;
} |
Quelqu'un peut-il me dire mon erreur?
