[Résolu] Flex et images

(reprise du message précédent)

PapyJP a écrit :
Merci beaucoup

Si j'osais
Mon script fait une chose supplémentaire que je ne vois pas comment faire en CSS:
Il regarde si le texte de <figcaption> tient sur une ligne:
- si oui, il laisse le text-align:center
- si non, il met le text-align:justify
Y a-t-il un moyen de faire ça en CSS ?

Vu la structure, flex à nouveau

je tenterais :

figcaption {display:flex;justify-content:center;}
figcaption span {text-align:justify;}/*optionnel*/

le span est centré, jusqu’à ce qu'il occupe toute la largeur, text-align n'aura pas d'incidence avant.

voici une reprise de ton architecture avec juste flex pour le layout : https://codepen.io/gc-nomade/pen/bGdyyWO flex en imbrication sur main et figure/figcaption. un seul figcaption pour les 2 textes et quelques bordures. Si cela t'aide a mieux visualisé les effets de flex.
Modifié par gcyrillus (04 Apr 2020 - 12:59)

Whaou! C'est génial de jouer sut justify-content vs justify.
Je vais reprendre tout ce code pour tirer parti de cette techno
Merci mille fois!!!

J'ai reporté dans mon code sans tout chambouler pour le moment.
1) HTML https://tests.osirisnet.net/monument/chaproug/@@chaproug.html?fr
2) CSS: https://tests.osirisnet.net/slideshow2.css
Le seul point qui ne suit pas les specs, c'est que l'image n'est pas cadrée en haut de son conteneur.
Dans ce cas précis, ce n'est pas gênant, mais il y dans dans ces carrousels des images plus petites qui vont poser problème. Quand on passe d'une image à une autre, en fonction de la hauteur de l'image on aura l'impression de montagnes russes.

Je pense qu'un img{margin-bottom:auto;} devrait pousser ton image vers le haut et suffire à ton besoin.

Cdt
Modifié par gcyrillus (04 Apr 2020 - 18:30)

Merci je vais essayer ça

J'ai mis un cadre sur l'image, elle est centrée dans son support.
Doit y avoir quelque chose qui coince...


J'ai mis le code sur CodePen pour que tu puisses l'inspecter et le modifier à ton aise
https://codepen.io/PapyJP/full/RwPvxOq

Merci, c'est (center) top!!!
Je vois qu'il me reste des tas de domaines du CSS à investiguer. Le problème c'est que c'est tellement vaste que je vais m'y perdre, d'autant qu'il y a des tas de choses dont je n'ai pas et n'aurai sans doute jamais besoin, compte tenu de mon âge et du peu de sites que je gère.
Yapuka reprendre tout mon code pour générer les bonne balises, mettre de l'ordre dans mon CSS, etc...

Pour CodePen, je ne l'utilise qu'exceptionnellement, car mon code sort de générateurs PHP ou JavaScript (ou les deux) et fait appel à mes librairies de JavaScript (mon jQuery perso). Pour mettre du code sur CodePen, il faut faire des captures de code avec les outils de debugging, mettre ça en forme... c'est pas mal de choses à faire et je ne suis jamais sûr que je n'ai pas tellement transformé le code que ça n'a plus grand chose à voir avec le code originel.

Hello,
J'avais écrit ce message fin semaine passée mais je vois que d'autres réponses sont arrivées entre temps. J'ai du interrompre ce message pour partir à l'hopital et voir l'arrivée de notre petite fille Elisabeth
Bref, nous sommes rentré, tout va bien et je te poste quand même le message même si je vois que ça a bien évolué


---


Hello Papy,

Sorry, pas mal de boulot de mon coté, on a la chance de pouvoir faire du télétravail (2 jours par semaine généralement et en ce moment, tous les jours évidement) donc je ne vois pas toujours tout sur le forum…
Voici le code qui est indispensable pour ton besoin, essaye dans un premier temps de nettoyer ton code actuel pour adapté ce code dedans :

main{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header{
  flex-grow: 0 0 auto;
}

figcaption{
  flex-grow: 0 0 auto;
}

figure{
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
}

img{
  flex: 1 0 0;
  min-height: 1px;
  object-fit: contain;
}

Ce que ça fait :
1/ <main> va prendre toute la hauteur
2/ <header> et <figpation> vont prendre le minimum d'espace requis pour eux (flex-grow: 0)
3/ <figure> va prendre l'espace disponible jusqu'en bas (flex-grow: 1)
4/ On applique un display flex sur <figure> pour que son enfant puisse profité des propriété flex
5/ On dit à <img> de remplir l'espace mais en affichant son entièreté même si il doit y avoir du blanc (soit haut/bas, soit gauche/droite ? object-fit: contain)
5/ On dit à l'<img> de prendre tout l'espace aussi (flex-grow: 1) qu'elle s'étire dans son parent
6/ Le trick ici est d'appliquer un min-height à l'image pour qu'elle puisse être plus petite que sa taille normal (étant donné que en flex, les min)