Mise en page compliquée à réaliser

Invité · 29/08/2016, 13h44

Bon.

Moi, j'ai fini : http://codepen.io/jreaux62/pen/zBgyyx

Code html :

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
<header>banner</header>
 
<main>
  <section class="table clearfix" id="main">
    <div class="table-cell" id="left1">left1</div>
    <div class="table-cell" id="right1">right1</div>
  </section>
 
  <hr class="clearfix" />
 
  <section class="table clearfix" id="content_top">
    <aside class="table-cell" id="sidebar1">sidebar1
      <ul>
        <li>Nec piget dicere avide magis hanc insulam populum</li>
        <li>Inter has ruinarum varietates a Nisibi quam</li>
        <li>Circa hos dies Lollianus primae lanuginis</li>
        <li>Quid enim tam absurdum quam delectari multis</li>
        <li>Ciliciam vero, quae Cydno amni exultat, Tarsus</li>
      </ul>
    </aside>
    <div class="table-cell">
      <div class="table">
        <div class="table clearfix">
          <div class="table-cell" id="left2">left2 
            <p>Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
          </div>
          <div class="table-cell" id="right2">right2</div>
        </div>
        <div class="clearfix full-width" id="toutelargeur1">toutelargeur1</div>
        <div class="table clearfix">
          <div class="table-cell" id="left3">left3</div>
          <div class="table-cell" id="right3">right3
          <p>Rei quindecim cum Mario in causa hominis et tot quindecim Rei quid antea Supplicationem dierum causa quindecim admirentur.</p>
          </div>
        </div>
      </div>
    </div>
  </section>
 
  <hr class="clearfix" />
 
  <section class="table clearfix" id="content_bottom">
    <aside class="table-cell" id="sidebar2">sidebar2
            <ul>
              <li>Sed quid est quod in hac causa maxime homines</li>
              <li>Hac ita persuasione reducti intra moenia</li>
              <li>Emensis itaque difficultatibus multis et nive</li>
            </ul>
    </aside>
    <div class="table-cell" id="left4">left4 
      <p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis</p>
    </div>
    <div class="table-cell" id="right4">right4 
      <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis</p>
          <p>Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.</p>
    </div>
  </section>
 
  <hr class="clearfix" />
</main>
 
<footer>footer</footer>

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
69
70
* { margin:0; padding:0; border:0; font-size:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
html,body { width:100%; height:100%; min-height:100%; font-size:100%; }
header, footer, main, section, aside, article { display:block; }
/* -------------------------------------- */
/* permet de remettre dans le flux les blocs flottants */
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
/* -------------------------------------- */
.full-width {
  width: 100%;
}
/* -------------------------------------- */
/* TABLE */
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align:top;
}
/* -------------------------------------- */
/* positionnement / dimensionnement */
/* HEADER, FOOTER */
body > header,
body > footer {
  text-align: center;
  width:100%;
  height:10%;
}
body > header,
body > main,
body > footer {
  max-width:1200px;
  margin:0 auto;
}
 
#sidebar1, #sidebar2 {
  width:20%;
}
 
#left1, #left2, #left3, 
#right1, #right2, #right3 {
  width: 50%;
}
#left4, #right4 {
  width:40%;
}
 
/* -------------------------------------- */
/* déco (facultatif) */
main > hr {
  height:2px; color:#ccc; background:#ccc; 
  width:98%; margin:1% 1%; padding:0;
}
#sidebar1, #sidebar2,
#toutelargeur1,
#left1, #left2, #left3, #left4,
#right1, #right2, #right3, #right4 {
  padding:2%;
  border: 1px dashed #ccc;
  background: #f6f6f6;
}
body > header,
body > footer {
  background: lightblue;
}

**laurentSc** · 29/08/2016, 16h52

Génial, j'ai mis du temps à répondre, même si j'ai vu ta réponse presqu'aussitôt car il a fallu que je la comprenne suffisamment pour la modifier un peu (il manquait un petit truc, et le fait de remplacer le mot banner par une image un peu plus grosse a nécessité un dimensionnement (et pour arriver à mes fins, il a fallu que je transforme le 1er aside en div de classe table-cell)(et dans ton html, même s'il marchait, y avait rien de classe table-row).

http://codepen.io/laurentsc/pen/KrOYQG

Code html :

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
69
70
71
72
73
 
<header>
image 900x282
</header>
 
<main>
<section class="table clearfix" id="content_header">
 
      <div class="table-row">
        <div id="div1" class="table clearfix">
           <div class="table-cell" id="left1">left1
		   </div> <!-- end left1 -->
           <div class="table-cell" id="right1">right1
		   </div><!-- end right1 -->
        </div><!-- end div1 -->      
	  </div><!-- end div1tablerow -->
 
</section>
 
  <hr class="clearfix" />
  <section class="table clearfix" id="content_top1">
  <div id="div2" class="table-row clearfix">
    <div class="table-cell" id="sidebar1">sidebar1
      <ul>
        <li>Nec piget dicere avide magis hanc insulam populum</li>
        <li>Inter has ruinarum varietates a Nisibi quam</li>
        <li>Circa hos dies Lollianus primae lanuginis</li>
        <li>Quid enim tam absurdum quam delectari multis</li>
        <li>Ciliciam vero, quae Cydno amni exultat, Tarsus</li>
      </ul>
    </div><!-- end sidebar1 -->
 
 
    <div class="table-cell" id="left2">left2 
            <p>Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
    </div> <!-- end left2 -->
    <div class="table-cell" id="right2">right2</div>
	</section>
	<section class="table clearfix" id="content_top2">
    <div  class="clearfix full-width" id="toutelargeur1">toutelargeur1</div>
	</section>
	<section class="table clearfix" id="content_top3">	
    <div class="table-cell" id="left3">left3</div>
    <div class="table-cell" id="right3">right3
          <p>Rei quindecim cum Mario in causa hominis et tot quindecim Rei quid antea Supplicationem dierum causa quindecim admirentur.</p>
    </div><!-- end right3 -->
    </div><!--end div2tablerow  -->
 
  </section>
 
  <hr class="clearfix" />
 
  <section class="table clearfix" id="content_bottom">
    <aside class="table-cell" id="sidebar2">sidebar2
            <ul>
              <li>Sed quid est quod in hac causa maxime homines</li>
              <li>Hac ita persuasione reducti intra moenia</li>
              <li>Emensis itaque difficultatibus multis et nive</li>
            </ul>
    </aside>
    <div class="table-cell" id="left4">left4 
      <p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis</p>
    </div>
    <div class="table-cell" id="right4">right4 
      <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis</p>
          <p>Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.</p>
    </div>
  </section>
 
  <hr class="clearfix" />
</main>
 
<footer>footer</footer>

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
69
70
71
72
* { margin:0; padding:0; border:0; font-size:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
html,body { width:100%; height:100%; min-height:100%; font-size:100%; }
header, footer, main, section, aside, article { display:block; }
/* -------------------------------------- */
/* permet de remettre dans le flux les blocs flottants */
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
/* -------------------------------------- */
.full-width {
  width: 100%;
}
/* -------------------------------------- */
/* TABLE */
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  vertical-align:top;
}
/* -------------------------------------- */
/* positionnement / dimensionnement */
/* HEADER, FOOTER */
body > header,
body > footer {
  text-align: center;
  width:100%;
  height:10%;
}
body > header,
body > main,
body > footer {
  max-width:1200px;
  margin:0 auto;
}
 
body > header {width:900px;height:290px;}
 
#sidebar1, #sidebar2 {
  width:20%;
}
 
#left1, #left2, #left3, 
#right1, #right2, #right3 {
  width: 50%;
}
#left4, #right4 {
  width:40%;
}
 
/* -------------------------------------- */
/* déco (facultatif) */
main > hr {
  height:2px; color:#ccc; background:#ccc; 
  width:98%; margin:1% 1%; padding:0;
}
#sidebar1, #sidebar2,
#toutelargeur1,
#left1, #left2, #left3, #left4,
#right1, #right2, #right3, #right4 {
  padding:2%;
  border: 1px dashed #ccc;
  background: #f6f6f6;
}
body > header,
body > footer {
  background: lightblue;
}

Invité · 30/08/2016, 08h13

@Toufik83
Tu as un train de retard...

@laurentSc
Voici la même mise en page, mais en utilisant display:flex; (plus "souple" + HTML simplifié) : http://codepen.io/jreaux62/pen/bwbEQr

Code html :

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
<header>
  image 900x282
</header>
 
<main>
  <section class="flex clearfix" id="content_header">
    <div id="left1">left1</div>
    <div id="right1">right1</div>
  </section>
 
  <hr class="clearfix" />
  <section class="flex clearfix" id="content_top1">
 
      <div id="sidebar1">sidebar1
        <ul>
          <li>Nec piget dicere avide magis hanc insulam populum</li>
          <li>Inter has ruinarum varietates a Nisibi quam</li>
          <li>Circa hos dies Lollianus primae lanuginis</li>
          <li>Quid enim tam absurdum quam delectari multis</li>
          <li>Ciliciam vero, quae Cydno amni exultat, Tarsus</li>
        </ul>
      </div>
       <div id="left2">left2
        <p>Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
      </div>
 
      <div id="right2">right2</div>
  </section>
  <section class="flex clearfix" id="content_top2">
    <div class="clearfix" id="toutelargeur1">toutelargeur1</div>
  </section>
  <section class="flex clearfix" id="content_top3">
    <div id="left3">left3</div>
    <div id="right3">right3
      <p>Rei quindecim cum Mario in causa hominis et tot quindecim Rei quid antea Supplicationem dierum causa quindecim admirentur.</p>
    </div>
 
  </section>
 
  <hr class="clearfix" />
 
  <section class="flex clearfix" id="content_bottom">
    <aside id="sidebar2">sidebar2
      <ul>
        <li>Sed quid est quod in hac causa maxime homines</li>
        <li>Hac ita persuasione reducti intra moenia</li>
        <li>Emensis itaque difficultatibus multis et nive</li>
      </ul>
    </aside>
    <div id="left4">left4
      <p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis</p>
    </div>
    <div id="right4">right4
      <p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis</p>
      <p>Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.</p>
    </div>
  </section>
 
  <hr class="clearfix" />
</main>
 
<footer>footer</footer>

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
* { margin:0; padding:0; border:0; font-size:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
html,body { width:100%; height:100%; min-height:100%; font-size:100%; }
header, footer, main, section, aside, article { display:block; }
/* -------------------------------------- */
/* permet de remettre dans le flux les blocs flottants */
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }
 
/* -------------------------------------- */
.flex {
  display: flex;
  width: 100%;
}
.flex > div, .flex > aside {
  flex: 1 1 auto;
}
/* -------------------------------------- */
/* positionnement / dimensionnement */
/* HEADER, FOOTER */
body > header,
body > footer {
  text-align: center;
  width:100%;
  height:10%;
}
body > header,
body > main,
body > footer {
  max-width:1200px;
  margin:0 auto;
}
 
body > header {width:900px;height:290px;}
/* -------------------------------------- */
#left1, #right1, 
#left3, #right3 {
  width: 50%;
}
 
#sidebar1, #sidebar2 {
  width:20%;
}
 
#left2, #right2, 
#left4, #right4 {
  width:40%;
}
 
/* -------------------------------------- */
/* déco (facultatif) */
main > hr {
  height:2px; color:#ccc; background:#ccc; 
  width:98%; margin:1% 1%; padding:0;
}
#sidebar1, #sidebar2,
#toutelargeur1,
#left1, #left2, #left3, #left4,
#right1, #right2, #right3, #right4 {
  padding:10px 2%;
  border: 1px dashed #ccc;
  background: #f6f6f6;
}
body > header,
body > footer {
  background: lightblue;
}

**laurentSc** · 30/08/2016, 16h32

Je te remercie pour ta nouvelle proposition ; pas dispo ce matin pour m'y pencher ; j'y suis depuis cet après-midi ; par contre, je voudrais la modifier un peu car elle ne correpond pas tout-à-fait à la mise en page que je souhaite mais n'ayant pas trouvé d'explication claire sur flex, je n'arrive pas à mes fins. Comme je ne compte pas revenir sur ce forum au moindre besoin de changement, je préfèrerais devenir autonome sur ce sujet. Pourrais-tu m'indiquer un tuto ? (DVP ou autre)

Invité · 30/08/2016, 16h52

Bien sûr :

"CSS display flex"
Utilisation des flexbox en CSS

**laurentSc** · 30/08/2016, 17h41

Merci, j'avais bien sûr fait d'abord une recherche Google mais cette page n'arrivait pas en premier. Cela dit, même avec ta page, je n'y arrive pas. Je t'explique donc la modif que je voudrais faire , tu m'indiques ce qu'il faut changer en m'expliquant STP afin que je comprenne quelque chose...

Le code actuel donne cette mise en page :

Nom : miseenpage.GIF
Affichages : 113
Taille : 143,7 Ko

Nom : miseenpage.GIF
Affichages : 113
Taille : 143,7 Ko

Ce que je voudrais, c'est que les blocs toute la largeur1, left3 et right3 soient en-dessous de left2 et right2, mais à droite de sidebar1 et pas en-dessous comme maintenant. Que faut-il changer et pourquoi ?

Invité · 30/08/2016, 17h53

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
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
69
70
71
72
<header>
  image 900x282
</header>
 
<main>
	<section class="flex clearfix" id="content_header">
		<div id="left1">left1</div>
		<div id="right1">right1</div>
	</section>
 
	<hr class="clearfix" />
 
	<section class="flex clearfix" id="content_top1">
 
		<div id="sidebar1">sidebar1
			<ul>
				<li>Nec piget dicere avide magis hanc insulam populum</li>
				<li>Inter has ruinarum varietates a Nisibi quam</li>
				<li>Circa hos dies Lollianus primae lanuginis</li>
				<li>Quid enim tam absurdum quam delectari multis</li>
				<li>Ciliciam vero, quae Cydno amni exultat, Tarsus</li>
			</ul>
		</div>
		<div>
			<div class="flex clearfix">
				<div id="left2">left2
				<p>Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.</p>
				</div>
 
				<div id="right2">right2</div>
			</div>
 
			<div class="clearfix" id="toutelargeur1">toutelargeur1</div>
 
			<div class="flex clearfix">
 
				<div id="left3">left3</div>
				<div id="right3">right3
				<p>Rei quindecim cum Mario in causa hominis et tot quindecim Rei quid antea Supplicationem dierum causa quindecim admirentur.</p>
				</div>
			</div>
		</div>
 
	</section>
 
	<hr class="clearfix" />
 
	<section class="flex clearfix" id="content_bottom">
 
		<aside id="sidebar2">sidebar2
			<ul>
				<li>Sed quid est quod in hac causa maxime homines</li>
				<li>Hac ita persuasione reducti intra moenia</li>
				<li>Emensis itaque difficultatibus multis et nive</li>
			</ul>
		</aside>
 
		<div id="left4">left4
			<p>Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis</p>
		</div>
		<div id="right4">right4
			<p>Isdem diebus Apollinaris Domitiani gener, paulo ante agens palatii Caesaris curam, ad Mesopotamiam missus a socero per militares numeros immodice scrutabatur, an quaedam altiora meditantis iam Galli secreta susceperint scripta, qui conpertis</p>
			<p>Antiochiae gestis per minorem Armeniam lapsus Constantinopolim petit exindeque per protectores retractus artissime tenebatur.</p>
		</div>
 
	</section>
 
	<hr class="clearfix" />
 
</main>
 
<footer>footer</footer>

L'indentation te montre la structure.

Le CSS ne change pas : http://codepen.io/jreaux62/pen/bwbEQr

**laurentSc** · 30/08/2016, 19h11

OK, merci, j'ai commenté une partie pour réduire la hauteur mais ce que je voudrais aussi, c'est que la ligne sidebar2+left4+right4 fasse la même largeur que sidebar1+right2+right2. On fait comment ?
http://codepen.io/laurentsc/pen/rrBwjy

Invité · 30/08/2016, 19h36

Flexbox, guide complet

**laurentSc** · 30/08/2016, 22h10

Merci pour le lien ; je l'ai bien étudié et en ai déduit qu'il fallait utiliser la propriété flex-wrap pour mettre le contenu du bloc sur plusieurs lignes si nécessaire ; je l'ai fait, mais ça ne veut pas. Pourquoi ?

http://codepen.io/laurentsc/pen/rrBwjy

Si le contenu est court, la largeur va bien...

Invité · 31/08/2016, 10h44

Bonjour Laurent,

L'inconvénient/avantage avec les boites flexibles, c'est qu'elle s'adaptent.

L'une d'elle n'avait pas de largeur définie. Je te laisse trouver laquelle : http://codepen.io/jreaux62/pen/bwbEQr

Indice : la somme des largeurs doit faire 100%.

N.B. A noter qu'on peut aussi obtenir un résultat similaire en utilisant Bootstrap : http://codepen.io/jreaux62/pen/qaWyEx

**laurentSc** · 31/08/2016, 12h16

Merci de ton aide pour #contentleft2 { width:80%;}. J'ai donc adapté aussi mon codepen : http://codepen.io/laurentsc/pen/WGZyPV. J'ai de plus réduit la largeur de sidebar1 et sidebar2 (20%->10%) et adapté les autres largeurs (contentleft2 (90%), left2,3,4 et right2,3,4 (45%))

NB : j'ai aussi eu l'idée (tout-à-l'heure) de Bootstrap.

Dans ton codepen, es-tu sûr que la partie CSS soit à jour, car les classes col_xm_..., col_sm_..., etc ne sont pas définies et d'autre part, c'est moins bien (les blocs leftx et rightx n'ont pas la même hauteur) ?

Invité · 31/08/2016, 12h24

left2,3,4 et right2,3,4 (45%)

Tu es sûr ?

Vérifie tous les "emboitements".

N.B. col_xm_..., col_sm_... sont des class Bootstrap (donc définies dans le CSS Bootstrap) !

**laurentSc** · 31/08/2016, 13h48

Je ne sais pas de quoi tu parles avec "emboîtements" ; j'ai vu un problème qu'il n'y avait pas dans ton code (un espace vide sous left3+right3) que j'ai comblé en rajoutant une div (de contenu   ).

NB : OK pour les classes Bootstrap, par contre le défaut que je signalais reste...

Invité · 31/08/2016, 13h57

Je ne vais pas tout faire à ta place...

Essaie déjà de mettre du "vrai" CONTENU dans tes "boites"...

Et mets les fonds, bordures,... selon le design que TU auras choisi : http://codepen.io/jreaux62/pen/bwbEQr

**laurentSc** · 31/08/2016, 15h08

C'est ce que j'ai commencé à faire depuis une bonne demi-heure mais en cas de problème, comme c'est de l'intranet, difficile de le montrer...

**laurentSc** · 11/10/2016, 16h41

J'ai appris l'intérêt des flexbox par contre je ne travaille plus sur ce sujet.

Mise en page compliquée à réaliser

CSS

Discussions similaires

Partager

Partager