Css flexfox positionnement

Version imprimable

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:

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:

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

Bonjour,

Code:

<a class="portfolio_thumb">

Kezako ?? :koi:

Code:

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:

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

1 pièce(s) jointe(s)

Bonjour jreaux62

Pour l'instant j'ai ceci:
Code:

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:

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:

Pièce jointe 354223

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.

1 pièce(s) jointe(s)

Je viens de changer mon code par:
Code:

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:

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:

Pièce jointe 354249

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

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:

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; }

24/02/2018, 13h37
Invité

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

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

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

Code:

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:

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;
}

24/02/2018, 13h57
imothep85

ok problème icônes résolu :p