Positionnement avec Flexbox

**becket** · 16/04/2019, 13h19

Bonjour à tous,

J'ai un code html qui contient

Code HTML :

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

1
2
3
4
5
6
7
8
9
<html>
<head></head>
<nav</nav>
<div id="CorpPage">
  <section id="MenuGauche"></section>
   <section id="Articles"></section>
   <section id="MenuDroit"></section>
</div>
</html>

Qui donne :

Nom : flexbox-dev.png
Affichages : 263
Taille : 5,0 Ko

Pour obtenir les deux menu "A gauche" qui se superposent, je force l'ordre via CSS.

Code :

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
div {
display: flex; 
flex-wrap: wrap; 
}
 
 
#MenuDroit {
order: 1 
}
 
#MenuGauche {
order: 2; 
width: 18%
}
 
#Contenu }
order: 3
width: 79%; 
}

Ce qui donne :

Nom : flexbox-dev-2.png
Affichages : 207
Taille : 5,0 Ko

Le soucis, c'est que je voudrais coller les deux colonnes de gauche comme ceci :

Nom : flexbox-dev-3.png
Affichages : 202
Taille : 5,0 Ko

Quel est la meilleure façon pour repositionner ce block "correctement" et sans ternir compte de la hauteur que le bloc de contenu peut prendre ?

Merci d'avance

Invité · 16/04/2019, 14h03

Bonjour,

1- le CSS ne correspond pas au HTML.
Idem : les couleurs dans les dessins ne correspondent pas aux numéros, d'un dessin à l'autre...

2- Donne au moins le code nécessaire pour reproduire les dessins (avec couleurs de fond,...).

3- A priori, vu ce que tu veux faire, il faudrit plutôt voir du coté de display:grid;.

Invité · 16/04/2019, 14h44

Voici une solution qui semble tenir la route : https://codepen.io/jreaux62/pen/wZpGMj

Code html :

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

1
2
3
4
5
6
7
8
<header>header</header>
<nav>nav</nav>
<div id="CorpPage">
  <section id="Articles">2- Articles</section>
  <section id="MenuGauche">1- MenuGauche</section>
  <section id="MenuDroit">3- MenuDroit</section>
</div>
<footer>footer</footer>

Noter que "Articles" est en premier.

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
* { margin:0; padding:0; border:0; box-sizing:border-box; }
 
  #CorpPage {
    position:relative;
  }
  #CorpPage > section {
    padding:20px;
  }
  #MenuGauche {
    background:#FAAC58;
  }
  #Articles {
    background:#BE81F7;
  }
  #MenuDroit {
    background:#F4FA58;
  }
  header, footer {
    clear:both;
    background:lightgrey;
  }
  nav {
    clear:both;
    background:lightgreen;
  }
/* PHONE */
@media screen and (max-width:640px) {
  #CorpPage {
    display: flex; 
    flex-wrap: no-wrap; 
    flex-direction:column;
  }
  #Articles {
    order:2;
  }
  #MenuDroit {
    order:3;
  }
}
/* TABLET */
@media screen and (min-width:641px) and (max-width:1024px) {
  #MenuGauche, #MenuDroit {
    width:40%;
  }
  #Articles {
    float:right; 
    width:60%;
  }
}
/* DESKTOP */
@media screen and (min-width:1025px) {
  #CorpPage {
    display: flex; 
    flex-wrap: no-wrap; 
    flex-direction:row;
  }
  #Articles {
    float:none; 
    flex:1 1 75%; 
    order:2;
  }
  #MenuDroit {
    order:3;
  }
  #MenuGauche, #MenuDroit {
    flex:1 1 25%;
  }
}

L'astuce est ici (mode "TABLET") :
PAS de display:flex, mais

Code css :

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

1
2
3
  #Articles {
    float:right; 
  }

Positionnement avec Flexbox

Positionnement en CSS avec flexbox

Discussions similaires

Partager

Partager