# Alignement de blocs avec Flexbox

**URL:** <https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926>\
**Category:** Programmation\
**Created:** [Août 9, 2022, 5:21 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926 "2022-08-09T05:21:38Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 9, 2022, 5:21 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/1 "2022-08-09T05:21:38Z")

</div>

Bonjour

Je dois realiser une page qui doit ressembler a ca:

 ![doft](https://www.debian-fr.org/uploads/default/original/2X/4/451156e4882f8265678654893732392b4c9e7961.jpeg)

mon code HTML:  
[html.txt](https://www.debian-fr.org/uploads/short-url/n1kWPlt6RqjKTb2gv9TZDJBMzk4.txt) (1,6 Ko)

mon code CSS:  
[css.txt](https://www.debian-fr.org/uploads/short-url/wVRZ47XtSCLtmRWDSeTzQTLXmoA.txt) (557 Octets)

j obtiens ceci:

 ![1](https://www.debian-fr.org/uploads/default/original/2X/d/d0960d787fa1cd86caaf56dde7f40e77b28afb79.jpeg)  
 ![2](https://www.debian-fr.org/uploads/default/original/2X/9/97f01e24fe2d229a1786326cb34ee8830ab1697f.jpeg)  
 ![3](https://www.debian-fr.org/uploads/default/original/2X/3/3385773c9ee0a496c8b4b8e0ac20ee990d6dd6f8.jpeg)

mon probleme est que je n arrive pas a aligner les div de gauche et celles de droite .

NB:Je debute sur FLEXBOX

---

<div class="post-metadata">

**Author:** ![anon29980398](https://www.debian-fr.org/letter_avatar_proxy/v4/letter/a/f4b2a3/32.png) [@anon29980398](https://www.debian-fr.org/u/anon29980398)\
**Post date:** [Août 9, 2022, 6:00 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/2 "2022-08-09T06:00:29Z")

</div>

Bonjour

Il te manque clairement les bases.

Prends le temps de suivre les tutoriels que je t’avais recommandé, ils sont bien faits et te permettront d’acquérir facilement ces bases si tu ne sautes pas des étapes.

> [@Problème d'affichage : html+css](https://www.debian-fr.org/t/probleme-daffichage-html-css/86820/18):
>
> Pour gagner du temps, je te recommande les tutoriels suivant : [Tutoriel HTML](http://www.w3big.com/fr/html/default.html#gsc.tab=0)[Tutoriel CSS](http://www.w3big.com/fr/css/default.html#gsc.tab=0) et comme dans toute traduction, il arrive qu’il y ait des erreurs, si tu te débrouilles un peu en anglais ou même simplement en [globish](https://fr.wikipedia.org/wiki/Globish) tu préféreras les mêmes pages web dans leur version originale : [HTML Tutorial](http://www.w3big.com/html/default.html#gsc.tab=0)[CSS Tutorial](http://www.w3big.com/css/default.html#gsc.tab=0) Ne saute pas les étapes, car tout dépends de ce que tu auras appris précédemment, et dans le HTML comme dans le CSS tu verras que c’est très important si on veut pouvoir comp…

C’est un peu comme un château de cartes : tant que la base n’est pas stable la couche supérieure ne peut pas être stable.

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 9, 2022, 8:24 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/3 "2022-08-09T08:24:22Z")

</div>

BOnjour Micp

j ai suivi les tuto et meme en video consecutivement .Peux tu me faire des remarques sur mon code html ?  
je suis curieux savoir ce qui cloche

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 9, 2022, 11:22 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/4 "2022-08-09T11:22:37Z")

</div>

salut, peux-tu donner tes images en même temps?

ton html/css contient plein d’erreurs de base :

- les classes doivent correspondre entre les deux fichiers  
– `<section class="image">` dans html ; `.images{` dans css ( un s de trop )

- tu peux par exemple avoir une div 'day…" sur width=100% avec un padding left/right de10%

- ensuite un div sur width=100% avec un padding left/right de10% qui contient 3 div (menu gauche, image centrale, menu droite ) avec width+padding

- les menus contiennent alors de div

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 9, 2022, 3:23 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/5 "2022-08-09T15:23:04Z")

</div>

![arrow](https://www.debian-fr.org/uploads/default/original/2X/e/ebb5b2e9d1baa2849ee9bafc523fee8ca05c6b25.png)  
 ![book](https://www.debian-fr.org/uploads/default/original/2X/2/29e92ddeb1f7566fe3004745143f5ec28bfc13c6.png)  
 ![brick](https://www.debian-fr.org/uploads/default/original/2X/9/9429d935e20fc208f979347bf108a2765ef6539e.jpeg)  
 ![chat-icon](https://www.debian-fr.org/uploads/default/original/2X/9/96e7988996622d4f5aac5dad21f8c222ba6ba640.png)  
 ![close](https://www.debian-fr.org/uploads/default/original/2X/b/b23f2dcb5e281a8a4650aca801422cc367b4d3c9.gif)  
 ![cluster](https://www.debian-fr.org/uploads/default/original/2X/d/d38fb1a82e24de476b65af410e837f50b8d74619.jpeg)  
 ![day_of_the_42](https://www.debian-fr.org/uploads/default/original/2X/7/735059ccc273b5cb96d66160f2edb6b2b5f4f5ad.png)  
 ![loupe](https://www.debian-fr.org/uploads/default/original/2X/7/7962ecef205dfd008d3b2755d5da30e0b8c0530b.png)  
Pour les images

 ![main](https://www.debian-fr.org/uploads/default/original/2X/5/5050152ab264bdda2a1e864b8214acbed0dd7d11.png)  
 ![oeil](https://www.debian-fr.org/uploads/default/original/2X/b/b19c1af12896d5d5dc58df62b7313376b38e1275.png)  
 ![outil](https://www.debian-fr.org/uploads/default/original/2X/0/04a01bc89d928af4d76558514b64b938be6add24.png)  
 ![reload](https://www.debian-fr.org/uploads/default/original/2X/2/2801388238b0939e2fb4c9e367e2cc7ff422259b.png)  
 ![towel](https://www.debian-fr.org/uploads/default/original/2X/3/3cf18ad39ca3a1dc22478c7707bcf5a77153f332.png)

---

<div class="post-metadata">

**Author:** ![DarkGagan](https://www.debian-fr.org/user_avatar/www.debian-fr.org/darkgagan/32/4093_2.png) [@DarkGagan](https://www.debian-fr.org/u/DarkGagan)\
**Post date:** [Août 12, 2022, 3:20 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/6 "2022-08-12T15:20:31Z")

</div>

@Pat66 , je te conseille ce livre, dispo chez un cultura, fnac ou similaire:

> **[CSS 3 Flexbox - Plongez dans les CSS modernes - Raphaël Goetter - Librairie...](https://www.eyrolles.com/Informatique/Livre/css-3-flexbox-9782212143638/)**
>
> Pour répondre à une problématique de responsive web design : un outil indispensable !

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 12, 2022, 3:59 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/7 "2022-08-12T15:59:24Z")

</div>

index.html

```auto
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>bruno sanchiz</title>
  <link rel="stylesheet" href="index.css" media="all">
  <link rel="icon" type="image/png" href="CSS/favicon.png">
  <link rel="shortcut icon" type="image/x-icon" href="CSS/favicon.ico">
	<script type="text/javascript" src="JS/fonctions.js">
</script>
	<meta name="description" content="dindoun.lautre.net">
<meta name="keywords" content="dindoun">
<meta name="Identifier-URL" content="http://dindoun.lautre.net">
<meta name="Date-Revision-yyyymmdd" content="20220514">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div>
	<div id=L1>

		<div id=L11>
			<img src="images/L11.png">
		</div>
		<div id=L12>
			<div id=L121>
				<img src="images/L121.png">
			</div>
			<div id=L122>
				<div id=L1221>
					<img src="images/L1221.png">
				</div>
				<div id=L1222>
					<img src="images/L1222.png">
				</div>

			</div>
		</div>

	</div>

	<div id=L2>
		<div id=L21>
			<img src="images/L211.png">
			<img src="images/L212.png">
			<img src="images/L213.png">
			<img src="images/L214.png">
			<img src="images/L215.png">
		</div>
		<div id=L22>
			<img src="images/L22.png">
		</div>
		<div id=L23>
			<img src="images/L231.png">
			<img src="images/L232.png">
			<img src="images/L233.png">
		</div>
	</div>

	<div id=L3>
		<p>
			Vous entrez...df
			sd
			f
			sdf
			ds

		</p>
					<form id="form1">
				<input type=text>
			</form>
	</div>

</div>

</body>
</html>

```

index.css

```auto
#L11,#L12,#L121,#L122{position:relative;}
#L1{position:absolute;}
#L1{width:80%;margin-left:10%;
	/*.BordsArrondis{*/
	background-color:#909090;
	border-color:#EEEEEE00;
	border-radius:2em;
	border-width:0em;
	border-style:solid;}
/*text-align:center;vertical-align:middle;display:block;margin:0 px auto;*/
#L11{width:20%;max-width:70%;height:100%;min-height:100%;}
#L11{float:left; top: 50%;left:5%;transform: translate(0%,25%);
    }
#L11 img{width:100%;max-width:100%;height:100%;min-height:100%;
      }

#L12{width:20%;max-width:20%;float:right;}
#L121,#L122{float:left;}
#L121{width:70%;max-width:70%;}
#L121 img{width:100%;max-width:100%;}
#L122{width:20%;max-width:20%;}
#L1221 img{width:100%;max-width:100%;}
#L1222 img{width:100%;max-width:100%;}

#L2{height:80%;width:80%;margin-left:10%;position:absolute;top:20%;}
#L21,#L22,#L23{float:left;	background-color:#909090;
	border-color:#000000;
	border-radius:2em;
	border-width:0em;
	border-style:none;box-shadow: 15px 15px black;}
#L21{width:10%;height:60%;max-height:60%;margin-left:2%;display: block; text-align: center;position:absolute;}
#L22{width:58%;height:60%;max-height:60%;position:absolute;left:22%;margin:auto;padding:2em;}
#L23{width:10%;height:60%;max-height:60%;position:absolute;left:90%;}
#L21 img,#L22 img,#L23 img{display:block;margin:auto;}
#L21 img,#L23 img{height:20%;}
#L22 img{height:100%;z-index:30;}

#L3{position:absolute;background-color:#AAFFAA;width:15%;height:5%;left:25%;top:60%;}
input {background-color:#AAFFAA;}
body{background-color:#222222;}

```

 ![Capture d’écran du 2022-08-12 17-57-52](https://www.debian-fr.org/uploads/default/original/2X/9/9c028ddfb98fabf648b0f11785cb763ade6f6f80.jpeg)

PS  
je n’ai pas bien compris comment avoir des images les unes au dessus des autres avec flex mais l’alignement est parfait

---

<div class="post-metadata">

**Author:** ![linuxpit](https://www.debian-fr.org/user_avatar/www.debian-fr.org/linuxpit/32/12131_2.png) [@linuxpit](https://www.debian-fr.org/u/linuxpit)\
**Post date:** [Août 17, 2022, 12:59 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/8 "2022-08-17T00:59:38Z")

</div>

@dindoun  
Ce code, il fait mal au yeux  
beaucoup de propriétés qui ne servent a rien  
les float c’était avant flexbox et le GRID . pour de quelques rares cas on en a plus besoin pour placer nos éléments.  
Pour le soucis de @Pat66 , au premier regard CSS grid est ce qu’il te faut ensuite pour placer tes éléments dans les asides , avec flex en column  
Pour ton header en css , placement avec deux colonne une avec ton logo l’autre avec tes éléments images placé avec les positions .  
Utilise les unité fractale avec CSS pour ton main principale  
Lis quelques bon tuto sur les flexbox et CSS et si tu as des questions hésites pas.

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 17, 2022, 12:32 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/9 "2022-08-17T12:32:35Z")

</div>

> [@linuxpit](#):
>
> Ce code, il fait mal au yeux

🤬  
alors propose ton code si c’est si facile

---

<div class="post-metadata">

**Author:** ![vbreton](https://www.debian-fr.org/user_avatar/www.debian-fr.org/vbreton/32/11400_2.png) [@vbreton](https://www.debian-fr.org/u/vbreton)\
**Post date:** [Août 17, 2022, 1:58 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/10 "2022-08-17T13:58:10Z")

</div>

> [@linuxpit](#):
>
> Ce code, il fait mal au yeux

Les références des étiquettes ne sont pas parlantes mais peut-être sont elles générées automatiquement ? Avant de transmettre un code, les éventuelles propriétés inutiles doivent être supprimées pour améliorer la lisibilité. C’est un exercice indispensable à faire soit même autant que possible pour progresser rapidement, certes un peu difficile ou laborieux au début mais qui aide aussi tellement les autres en matière de lisibilité. Plus c’est lisible et plus cela attire du monde pour le résoudre.

Qu’entends-tu @linuxpit par «&nbsp;unités fractales&nbsp;» avec CSS pour le main principal ?

Côté Grid et Flex, ces deux liens me semblent assez clairs tout en allant à l’essentiel:

[https://developer.mozilla.org/fr/docs/Web/CSS/CSS\_Grid\_Layout Élément](https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout)  
[https://developer.mozilla.org/fr/docs/Web/CSS/flex](https://developer.mozilla.org/fr/docs/Web/CSS/flex)

Une fois que tout semble fonctionner, on peut envisager de faire des essais en redimensionnant la taille de la fenêtre et éventuellement définir les tailles minimales ou maximales de certains éléments.

---

<div class="post-metadata">

**Author:** ![dindoun](https://www.debian-fr.org/user_avatar/www.debian-fr.org/dindoun/32/4281_2.png) [@dindoun](https://www.debian-fr.org/u/dindoun)\
**Post date:** [Août 17, 2022, 6:09 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/11 "2022-08-17T18:09:47Z")

</div>

Et quant au grid c’est à peu de choses prêt un retour vers les tableaux que les tenants de la modernité avaient voué aux gémonies, pour ensuite y revenir.

Perso je préfère utiliser un truc qui marche., qui dure. Le contraire de l’obsolescence programmée.

Et aussi ne pas utiliser 5 lignes de critiques quand ces 5 lignes pourraient contenir le code demandé. En plus tu aurais pu m’appendre quelquechose alors que là je suis juste plus énervé sans plus de connaissances.

---

<div class="post-metadata">

**Author:** ![linuxpit](https://www.debian-fr.org/user_avatar/www.debian-fr.org/linuxpit/32/12131_2.png) [@linuxpit](https://www.debian-fr.org/u/linuxpit)\
**Post date:** [Août 19, 2022, 9:38 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/12 "2022-08-19T21:38:12Z")

</div>

@dindoun  
Il faudra que tu apprennes à être moins agressif mon garçon.  
Je n’ai aucune obligation à faire ton travail finalement, réécrire un code html avec son CSS peut prendre du temps.  
Si j’en ai je peux le faire si j’en ai pas je ne le fais pas !

> Et quant au grid c’est à peu de choses prêt un retour vers les tableaux que les tenants de la modernité avaient voué aux gémonies, pour ensuite y revenir.

Pour dire ça franchement, il y a un manque de connaissance totale que je te suggère de remédier.  
Il y a sur UDEMY une très bonne formation celle de ENZO je sais plus son nom , frontend complète mais vraiment complète.  
tiens je suis sympa c’est [ICI](https://www.udemy.com/course/formation-complete-developpeur-front-end/)  
Le GRID est ce qui a de plus puissant pour disposer tes éléments, alors s’il te plait ne compare pas GRID au tableau ca n’a strictement rien avoir.

* * *
@vbreton 

j’entend par la que ses cotés(asides) devraient avoir un taille fixe , et le bloc principale prendre la place qui lui reste ce qui donnerais  
grid-template-column: (valeur en PX) 1fr (valeur en px);  
Pour le fractal c’est une unité relative, tu peux comparer cela au flex-grow de flexbox, mais plus précis encore.

* * *
@dindoun 

En fait le souci, c’est qu’il y a beaucoup de chose qui ne vont pas, ça fait beaucoup de chose qu’il faut te reprendre, c’est pourquoi, c’est compliquer de te répondre sans refaire tout le boulot.

En plus, tu affiches un manque de connaissances trop importantes, qui dans les forums ne sont pas bien vu, car beaucoup de tes soucis pourraient être réglé simplement par un peu de formation.

* * *
Tes max-width partout ne servent a rien du tout puisque tu mets deja une valeur relative a \*\*width\*\*. on utilise plutôt cela comme ca 

```auto
width: 100%;
max-width: 500px;

```

ca a plus de sens quand meme tu trouves pas

Ne positionne pas tes images par

```auto
position: relative ;

```

ni absolute dans ton cas ! flexbox est la pour ca , si ton site dois etre responsive c’est mort avec ta config.  
on l’utilise dans des cas précis !  
pour ta colonne de gauche par exemple  
tu me mets toutes ces images dans une div  
et ensuite

```auto
display : flex;
flex-flow: column nowrap;
justify-content: space-around;
align-items: center;

```

* * *
et tes autres proprio comme padding margin etc....

Tu utilises que des ID c’est ridicule , pourquoi faire ?

Tes nommages sont pas assez explicite , dans 1 mois quand tu reliras ton code tu te rappelera de plus rien ca ca veut strictement rien dire. Fais des nommages plus long et plus explicite on doit comprendre le CSS sans aller dans le HTML toute les deux secondes.

… et je peux continuer encore

---

<div class="post-metadata">

**Author:** ![DarkGagan](https://www.debian-fr.org/user_avatar/www.debian-fr.org/darkgagan/32/4093_2.png) [@DarkGagan](https://www.debian-fr.org/u/DarkGagan)\
**Post date:** [Août 20, 2022, 9:40 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/13 "2022-08-20T09:40:47Z")

</div>

@Pat66 , ça va tu suis encore? 😜

Les gars, au lieu de vous engueuler sur «&nbsp;t’as vu je code mieux que toi&nbsp;», je vous conseille de simplifier au max pour notre ami, ça se voit qu’il débute, allez pas lui vriller les neuronnes avec des trucs qu’il n’a pas encore vu 😉

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 26, 2022, 12:45 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/15 "2022-08-26T12:45:55Z")

</div>

Merci d avoir pris la peine d ecrire ce code .le but en postant sur ce forum est d apprendre .

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Août 26, 2022, 12:47 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/16 "2022-08-26T12:47:33Z")

</div>

Merci pour ton message DarkGagan en effet je debute et pour le but en postant sur ce forum est que l on mette mes erreurs en evidence en vue de m ameliorer pas du code tout fait

---

<div class="post-metadata">

**Author:** ![Pat66](https://www.debian-fr.org/user_avatar/www.debian-fr.org/pat66/32/11445_2.png) [@Pat66](https://www.debian-fr.org/u/Pat66)\
**Post date:** [Septembre 25, 2022, 1:01 UTC](https://www.debian-fr.org/t/alignement-de-blocs-avec-flexbox/86926/18 "2022-09-25T13:01:53Z")

</div>

J essaye de comprendre ton code mais rien n y fait les noms des div qui ne sont pas explicites encore moins ceux des images