flexbox menu responsive

Version imprimable

12/04/2019, 07h29
marionmc

2 pièce(s) jointe(s)

flexbox menu responsive

Hello à tous,

Je m'excuse par avance si certains trouveront ma question basique mais je tourne en rond.

Voilà j'ai appris les règles du flexbox et pour un exercice, je dois créer un menu responsive. En desktop et en tablette, ce menu composé de 3 éléments s'affichent les uns à côré des autres en rang. Jusque là, pas de souci.

Par contre, en mobile, le premier menu prend tout le rang, tandis que les deux autres prennent 50% de l'espace restant sur le rang du dessous, comme ceci.

Pièce jointe 465951

Pièce jointe 465954

Rien à faire, je n'y arrive pas, malgré le changement de flex-direction en colonne puis en rang en fonction du passage en mobile au desktop. Quelque chose m'échappe clairement mais à force de creuser, je n'arrive plus à y voir clair et j'aurai besoin de votre avis s'il vous plait!

Voici un de mes derniers essais: :oops:
https://bit.ly/2KqJslc

D'avance merci pour votre aide!

Bonjour,

Pas de changement de direction.
Ni modifier le code HTML !

Juste mettre en flex-wrap:wrap;, et le 1er en flex:0 0 100%;

N.B. <div class="nav"> se remplace en HTML5 par <nav>.
Et on utilise généralement une liste <ul><li> pour les menus.

Code:

1
2
3
4
5
6
7
  <nav>
    <ul>
      <li>Bloc menu 1</li>
      <li>Bloc menu 2</li>
      <li>Bloc menu 3</li>
    </ul>
  </nav>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* { margin:0; padding:0; box-sizing:border-box;/* important*/ }
nav > ul {
  list-style:none;
  display: flex;
  flex-direction: row;
  flex-wrap: no-wrap;
}
nav > ul > li {
  flex:1 1 33.33%; /* 3 menus de même largeur */
  padding:10px;
  background-color: orange;
  border: 1px solid black;
  text-align:center;
}
nav > ul > li:first-child {
  background-color: darkorange;
}
@media (max-width: 640px) {
  nav > ul {
    flex-wrap: wrap;
  }
  nav > ul > li {
    flex:1 1 50%;
  }
  nav > ul > li:first-child {
    flex:1 1 100%; /* 1er menu sur toute la largeur */
  }
}

12/04/2019, 19h09
marionmc

1 pièce(s) jointe(s)

Merci beaucoup pour ta réponse!

Par contre j'ai tenté ta solution et cela fonctionne bien pour tablette et desktop mais pas sur mobile -> le bloc 1 ne prend pas tout le rang forcant le bloc 2 et 3 à passer à la ligne suivante comme voulu... :/

Voici ce que j'ai sur mobile :

Pièce jointe 466283
13/04/2019, 09h11
Invité

Pour moi, ça fonctionne.

Évidemment (?), tu sais qu'il faut ajouter dans le <head> :

Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes">
19/04/2019, 21h10
marionmc

Merci pour ta réponse, ça a bien marché!

Par contre, j'ai une autre question par rapport au responsive, si je peux me permettre?

Jai eu des mockups à suivre, où les dimensions étaient spécifiées à certains breakpoints pour le mobile, tablette et desktop. J'ai donc utilisé les médias query à partir des dimensions spécifiées dans les instructions.

Exemple, j'ai des styles pour tablette à partir de 768px et pour desktop à partir de 1440px. Mais si je regarde à 1280px, c'est pas vraiment responsive car les règles CSS pour le desktop démarrent à 1440px (imposés).

Donc ma question est, est-ce que pour m'assurer que mon rendu est responsive même entre breakpoints, je dois convertir toutes mes données en %?

Car là par exemple, on m'a spécifié une marge de 16px en mobile, 24px en tablette et 180px en desktop. Au lieu de les coder telles quelles par breakpoint, dois-je les convertir en %?

Merci d'avance pour ton aide,

Bon weekend!
Marion
20/04/2019, 06h32
Invité

Bonjour,

1- Perso, je mets en % les largeurs et marges des "boites" de mise en page (avec parfois des largeurs maxi en pixels).

Mais rien ne t'empêche d'ajouter aussi d'autres break points (640px, 1024px,...).

2- Dans ton cas (marges imposées en pixels), je remplacerais plutôt par un padding au parent.
20/04/2019, 17h40
marionmc

Merci pour ta réponse!

Pour le 1 -> on n'est censé arriver à le rendre responsive au plus proche, sans déclarer de nouveaux breakpoints. Je suis donc en train de remplacer les marges et paddings en % mais jai aussi des éléments qui ont des widths et heights spécifiés en px, donc faut que je vois comment convertir tout ca. Pour les blocs prenant toute la largeur, je peux utiliser le vw sinon?

Pour le 2 -> tu veux dire que plutot que de déclarer des marges entre éléments enfants, tu mets des padding aux parents?

Merci pour ta patience!