Gestion des flexbox

Version imprimable

Gestion des flexbox

Bonjour à toutes et tous,

Je me permets d'ouvrir un nouveau sujet concernant la gestion des flexbox. J'ai passé plusieurs jours à chercher parmi les sujets, sur cette plateforme et ailleurs, pour résoudre mon problème.

Mon niveau en HTML et CSS est plutôt novice. Mais dans le cadre des mes fonctions, je suis amené à travailler le site web d'un de nos clients. J'ai pu, à l'aide de tutos, de cours à distance et des nombreux sujets sur la toile, concevoir quelque chose de valable. Du moins je l'espère.

Voici l'adresse du site provisoire. [URL="http://upblinds.toile-libre.org/"]

Le client souhaiterait en faire un site responsive, je dois donc veiller à ce qu'il s'adapte à toutes les plateformes et tous le sens de lecture. Et c'est là que les romains s'empoignent. Pour ce faire, j'ai estimé que les flexbox constituaient un moyen judicieux pour y parvenir.

Mais... je ne parviens pas à fixer quelques contraintes essentielles.

Voici d'abords les codes en question d'une de mes balises contenant des images.
Code:

1 2 3 4 5 <div id="bloc-3photos"> <img id="photos01" src="images/stor-venit-lavabo.jpg" alt="store venitien"/> <img id="photos02" src="images/stor-bat-sdb.jpg" alt="store bateaux"/> <img id="photos03" src="images/pan-jap-tab.jpg" alt="panneaux japonais"/> </div>
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 35 36 37 38 39 40 41 42 43 44 45 #bloc-3photos { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 100px; } #photos01 { flex-grow: 1; flex-shrink: 0; flex-basis: auto; margin-top: 7px; margin-bottom: 7px; margin-right: 7px; margin-left: 7px; } #photos02 { flex-grow: 1; flex-shrink: 0; flex-basis: auto; margin-top: 7px; margin-bottom: 7px; margin-right: 7px; margin-left: 7px; } #photos03 { flex-grow: 1; flex-shrink: 0; flex-basis: auto; margin-top: 7px; margin-bottom: 7px; margin-right: 7px; margin-left: 7px; }
Le souci se manifeste sur des résolutions plus petites ainsi que sur les mobiles. En clair, mes images devraient êtres alignées horizontalement par 3. L'idée est de garder cet alignement de 3 pour tout ce qui est affichage horizontal. Et pour les affichages verticaux, comme sur mobile, on passe sur un alignement vertical en colonne. Et les images devraient occuper toute la largeur de l'écran en conservant les proportions hauteur/largeur.

Pour l'instant, ça ne donne pas exactement ce que je cherche, et les comportements varient selon la résolution et le type de support. Si sur écran pc cela semble réagir selon ce que je cherche, il en va tout autrement des mobiles (tablette et smartphone) Sur mobile par exemple, les images se déforment en largeur alors que sur pc elles conservent leurs proportions.

Pour info, j'ai bien placé la balise <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> dans le head.

Une aide me serait bien précieuse.

Merci d'avance.

Bonjour,

1- On va déjà simplifier le HTML :
inutile d'abuser des id, et on peut mettre une classe sur le conteneur (ce qui permet d'avoir plusieurs blocs similaires dans la page :

Code:

1
2
3
4
5
<div class="bloc-3photos">
  <img src="images/stor-venit-lavabo.jpg" alt="store venitien"/>
  <img src="images/stor-bat-sdb.jpg" alt="store bateaux"/>
  <img src="images/pan-jap-tab.jpg" alt="panneaux japonais"/>						
</div>

2- Idem, le code CSS se simplifie grandement :

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
/* mobile first */
.bloc-3photos
{
  margin-top: 30px;
}
.bloc-3photos > img
{
  display: block;
  margin: 5px;
  width: 100%;
}
/* tablet / desktop */
@media screen and (min-width:687px) {
  .bloc-3photos
  {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 100px;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .bloc-3photos > img
  {
    display: block;
    flex: 1 1 auto;
    margin: 7px;
  }
}

Voir : A Complete Guide to Flexbox

01/10/2019, 16h12
Xaral

Bonjour,

Un tout grand merci pour cette aide précieuse. Grâce à cela, je suis parvenu à m'approcher au plus près du résultat escompté.

Et en effet, je constate la nécessité de simplifier au mieux le codage. J'ai encore beaucoup de chemin à parcourir dans mon apprentissage web.

Il reste cependant quelques petits détails qui m'échappent. Ils n'empêchent pas le site de s'afficher correctement mais je constate, par exemple, que sur tablette, les blocs de 3 photos débordent aux extérieurs de l'écran, et ce, malgré le 100% en width. J'anticipe la question au cas où le client me demande de rectifier ce détail.

J'aurais une autre question si je peux me permettre. Dans ce cas-ci, il ne s'agissait que de photos. Mais qu'en est-il si je veux ajouter un texte court en dessous et le rendre responsive ? Par exemple, chaque image va représenter un produit, et juste en dessous le nom de ce dernier. Pour l'instant, en raison de la présence du texte dans le bloc enfant, l'image s'étire en largeur. Et si j'applique la solution donnée, cela ne réagit pas de la même façon évidemment.

Je remets le lien du site publié.

http://upblinds.toile-libre.org/index.html

Merci d'avance.

Bonjour,

1- ajoute au début du fichier CSS :

Code:

* { margin:0; padding:0; border:0; box-sizing:border-box; }

2- mets chaque couple image/texte dans un <div>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="bloc-3photos">
  <div>
    <img src="images/stor-venit-lavabo.jpg" alt="store venitien">
    <p>Causatus cum relationibus itineribus quem subinde venisset exitium sed dimittebat nec pompa subinde palatii cum.</p>
  </div>
  <div>
    <img src="images/stor-bat-sdb.jpg" alt="store bateaux">
    <p>Sub inopia gravius tunc urgenti vertices efferatus constantia ei elogio tunc vertices intempestivam ideo Antiochensis.</p>
  </div>
  <div>
    <img src="images/pan-jap-tab.jpg" alt="panneaux japonais">
    <p>Ut amare nihil est Nihil tam est ut corporis ut remuneratione vicissitudine cultuque dicam qui. Ad in quia senatusque morte consulta quod nostri et non leges memoriam necessariam quia memoriam.</p>
  </div>
</div>

Il suffit alors de :

remplacer .bloc-3photos > img {...} par .bloc-3photos > div {...}.

et ajouter :

Code:

1
2
3
.bloc-3photos > div img {
    width: 100%;
}

02/10/2019, 11h55
NoSmoking
Bonjour,

Citation:

2- mets chaque couple image/texte dans un <div>.

Il existe également la structure
Code:

1 2 3 4 <figure> <img src="url-image" alt=""> <figcaption>Légende associée à l'image</figcaption> </figure>
02/10/2019, 14h52
Xaral

Encore merci. Résultat impeccable pour les images produits avec le libellé.

Juste les bloc-3photos qui s'obstinent malgré tout à déborder sur les extérieurs en mode tablette horizontale. Sur les autres supports, aucun problème constaté.

Bref, j'ai déjà bien assez profité de vos aides. Pour le reste, je vais chercher à affiner ces petits détails que seuls les clients ont l'art de déceler.

Je clôturerai le sujet d'ici demain en résolu.

Merci et, probablement à bientôt.