Discussion :

[imothep85]

Salut a tous dans mon site en cours j'ai besoin que mes images soient disposées en horizontal sur 2 lignes de bord a bord sans marges
j'ai 6 images, je voudrais que les 6 images soient disposées en longeur par 3
mes images font toutes 650x350px

image-image-image
image-image-image

j'ai ceci dans mon html:

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="gallery">
<a class="portfolio_thumb">
<img src="img/portfolio_thumb/1_animation.jpg" alt="animation_thumb">
<img src="img/portfolio_thumb/2_application.jpg" alt="application_thumb">
<img src="img/portfolio_thumb/3_architecture.jpg" alt="architecture_thumb">
<img src="img/portfolio_thumb/4_audiovisuel.jpg" alt="audiovisuel_thumb">
<img src="img/portfolio_thumb/5_produit.jpg" alt="produit_thumb">
<img src="img/portfolio_thumb/6_web.jpg" alt="web_thumb">
</div>

et dans mon css:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.portfolio_thumb {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: flex-start;
}

mais je n'arrive pas a les positionner comme il faut :s

[Invité]

Bonjour,

Code :

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

<a class="portfolio_thumb">

Kezako ??

Code html :

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

1
2
3
4
5
6
7
8
<div class="gallery">
  <img src="img/portfolio_thumb/1_animation.jpg" alt="animation_thumb">
  <img src="img/portfolio_thumb/2_application.jpg" alt="application_thumb">
  <img src="img/portfolio_thumb/3_architecture.jpg" alt="architecture_thumb">
  <img src="img/portfolio_thumb/4_audiovisuel.jpg" alt="audiovisuel_thumb">
  <img src="img/portfolio_thumb/5_produit.jpg" alt="produit_thumb">
  <img src="img/portfolio_thumb/6_web.jpg" alt="web_thumb">
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.gallery {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap; 
  -webkit-justify-content: space-between; justify-content: space-between; 
  -webkit-align-items:center; align-items:center; 
}
.gallery img {
  display: block;
  border: 0;
  -webkit-flex: 1 1 33.33%; flex: 1 1 33.33%; 
  width::100%;
  max-width:650px;
}

• A Complete Guide to Flexbox

[imothep85]

Bonjour jreaux62

Pour l'instant j'ai ceci:

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
<center>
<div class="gallery">
<a class="portfolio_thumb">
<img src="img/portfolio_thumb/1_animation.jpg" alt="animation_thumb" class="div1">
<img src="img/portfolio_thumb/2_application.jpg" alt="application_thumb" class="div2">
<img src="img/portfolio_thumb/3_architecture.jpg" alt="architecture_thumb" class="div3">
</a>
</div>
<div class="gallery">
<a class="portfolio_thumb2">
<img src="img/portfolio_thumb/4_audiovisuel.jpg" alt="audiovisuel_thumb" class="div4">
<img src="img/portfolio_thumb/5_produit.jpg" alt="produit_thumb" class="div5">
<img src="img/portfolio_thumb/6_web.jpg" alt="web_thumb" class="div6"></a>
</div>
</center>

et:

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
.portfolio_thumb {
 
  display: inline-block;
  margin-left: -50;
  display: flex;
  flex-direction: row-column;
  justify-content: left;
 
 
}
 
.portfolio_thumb2 {
 
  display: inline-block;
  margin-left: -50;
  display: flex;
  flex-direction: row-column;
  justify-content: left;
 
 
}

le résultat est les 6 images s’alignent sur toute la largeur de la page a bord perdu,
donc, on a 3 images horizontales et 3 autres horizontalement en dessous comme ceci:




Mon problème est que mes images quand je réduis la fenêtre, le contenu ne s'adapte pas verticalement au lieu de horizontal, pour mobiles les images doivent s'afficher verticalement l'une a la suite de l'autre.

[imothep85]

Je viens de changer mon code par:

Code HTML :

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

1
2
3
4
5
6
7
8
<div class="gallery">
<img src="img/portfolio_thumb/1_animation.jpg" alt="animation_thumb" class="div1">
<img src="img/portfolio_thumb/2_application.jpg" alt="application_thumb" class="div2">
<img src="img/portfolio_thumb/3_architecture.jpg" alt="architecture_thumb" class="div3">
<img src="img/portfolio_thumb/4_audiovisuel.jpg" alt="audiovisuel_thumb" class="div4">
<img src="img/portfolio_thumb/5_produit.jpg" alt="produit_thumb" class="div5">
<img src="img/portfolio_thumb/6_web.jpg" alt="web_thumb" class="div6">
</div>

et le css par:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.gallery {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: auto;
  align-content: center;
  align-items: center;
  flex-grow: 1;
}

j'ai ceci:



Maintenant mes images s'adaptent verticalement et se centrent mais j'ai des espaces a gauche et a droite car les images apparaissent par 2 horizontalement 3 verticalement

ce que je voudrais c'est que j'ai 3 images horizontalement de bord a bord et 3 autres en dessous comme sur l'image précédente.

encore merci de m'aider jreaux62

[imothep85]

Si j'aligne 3 images de 650px j'ai 1950px en horizontal ça remplit l’écran de bord a bord

si je change mon css width: 100%; par width: 1950px; les images vont de bord a bord, mais alors, quand je rétrécis la fenêtre elles ne s'adaptent plus en colonne verticalement :s

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.gallery {
  width: 1950px;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  flex-basis: auto;
  align-content: center;
  align-items: center;
  flex-grow: 1;
 
 
}

[Invité]

Je t'ai écrit un code. Utilise-le.

Et pour passer à une image par ligne sur phone :
media queries + flex:1 1 100%;

[imothep85]

j'ai un petit problème c'est très très étrange, mes iconnes font awesomme ne sont pas visibles !!!!

Code HTML :

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

1
2
3
4
5
6
7
8
<div id="social_icons">
        <a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-square fa-2x"></i>
        <i class="fab fa-twitter-square fa-2x"></i>
        <i class="fab fa-linkedin fa-2x"></i>
        <i class="fab fa-google-plus-square fa-2x"></i>
		<i class="fab fa-youtube-square fa-2x"></i>
		<i class="fab fa-flickr fa-2x"></i>
</div>

et mon 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
 
#social_icons{
	overflow:auto;
	justify-content: flex-start;
	padding-bottom:20px;
	font-size: 16px;
	text-align:center;
	clear:both;
}
 
.fa-facebook, .fa-facebook-square {
    color: #3b5998;
}
 
.fa-twitter, .fa-twitter-square {
    color: #00aced;
}
 
.fa-linkedin, .fa-linkedin-square {
    color: #007bb6;
}
 
.fa-google-plus, .fa-google-plus-square {
    color: #dd4b39;
}
 
.fa-youtube, .fa-youtube-play, .fa-youtube-square {
    color: #bb0000;
}
 
.fa-flickr {
    color: #ff0084;
}