flexbox menu responsive

**marionmc** · 12/04/2019, 07h29

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.

Nom : Capture d’écran 2019-04-11 à 22.13.23.png
Affichages : 328
Taille : 10,4 Ko

Nom : Capture d’écran 2019-04-11 à 22.13.10.png
Affichages : 310
Taille : 10,9 Ko

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:

https://bit.ly/2KqJslc

D'avance merci pour votre aide!

Invité · 12/04/2019, 08h45

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
  }
}

**marionmc** · 12/04/2019, 19h09

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 :

Nom : Capture d’écran 2019-04-12 à 10.07.57.png
Affichages : 285
Taille : 10,1 Ko

Invité · 13/04/2019, 09h11

Pour moi, ça fonctionne.

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4.0, user-scalable=yes">

**marionmc** · 19/04/2019, 21h10

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

Invité · 20/04/2019, 06h32

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.

flexbox menu responsive

Responsive design en CSS

Vue hybride

Discussions similaires

Partager

Partager