28172 sujets

CSS et mise en forme, CSS3

[Résolu] Mise en page Flex

Bonjour à tous,
Je cherche une solution "flex" à un problème de mise en page, mais je ne suis pas certain que ce soit possible.
Code HTML:


<article>
	<figure>
		<img src="image01.jpg" height="200">
		<img src="image02.jpg" height="200">
		<figcaption>Légende des photos</figcaption>
	</figure>
	<div class="block">
		<h2>Lorem ipsum dolor</h2>
		<p>
		Lorem ipsum dolor sit amet, etc.
		</p>
	</div>
</article>


CSS : 

	img {vertical-align:bottom;}
	article {display:flex;}
	.block {padding:0 10px;}
	figure {
		margin:0;
		display:flex;
		align-items:flex-end;
	}


J'aimerais que figcaption passe sous les images, comme sur cette maquette :

http://www.hostingpics.net/viewer.php?id=603384womencrop.png

On pourrait mettre les images dans une div (nommée par exemple "galerie", elle même display:flex, mais j'aimerais garder la structure actuelle de <figure>,
sans ajouter une <div> à l'intérieur.
Possible d'après vous ?
Merci de votre aide
connecté
Bonjour,

C'est tout à fait possible bien sûr, mais ça va demander quelques aménagements un peu plus complexes que si vous aviez utilisé une div parente.

Exemple en ligne : CodePen.

Je mets donc un 'flex-wrap:wrap' sur l'élément parent figure et un 'height:0%' sur les images pour fixer un bug de ratio lié à l'utilisation de flexbox (cf. article, notons que je n'utilise pas ici la même solution que celles proposées dans l'article).

Le code CSS compilé :
figure {
  display: flex;
  flex-wrap: wrap;
  max-width: 40rem;
  margin: 0;
}
figure img {
  width: 50%;
  height: 0%; /* @bugfix @affected All browsers @note Correction du ratio */
}
figure figcaption {
  width: 100%;
  text-align: center;
}


Attention : l'utilisation du préfixe webkit pour display box, conduirait à l'utilisation obligatoire des correctifs suivants pour Safari :
figure {
  display: -webkit-box; /* @note Introduction du préfixe -webkit qui ouvre la boite de Pandore... */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row; /* @bugfix @affected Safari */
  display: -webkit-flex; /* @bugfix @affected Safari */
  -webkit-flex-wrap: wrap; /* @bugfix @affected Safari */
  max-width: 40rem;
  margin: 0;
}

Je déconseille donc son utilisation.
Modifié par Olivier C (27 Dec 2016 - 05:31)
Grand merci à Olivier,
la solution sur le code pen est élégante et concise, j'aime !
malheureusement le nombre d'images est variable, une des deux dimensions est variable et donnée par un script PHP (height ou width dans la balise <img>), donc le problème devient vraiment ardu, voire insoluble, ou alors il faut générer en PHP du css selon la configuration du bloc, le nombre d'images, etc.

Je vais me rabattre sur du standard que je maîtrise, comme le suggère gcyrillus que je remercie aussi !

Question accessoire au sujet de flex : est-il raisonnable de multiplier les imbrications de div display;flex ? Y a t il une limite ? les imbrications posent-elles un problème de compatibilité ?
Par exemple comme dans mon problème, article en flex, figure en flex, et pourquoi pas dans figure, une div galerie en flex aussi pour contenir les images, donc 3 niveaux de div flex ?

Sinon je ne sais pas comment ajouter [résolu] dans le titre du post, c'est la première fois que j'en crée un...
Modérateur
Il n'y a à priori pas de soucis a imbriqué des flex tant que ceux ci sont justifiés/nécessaire, si il y a trop de niveau, il est peut-être alors plus sage de repenser à la structure des contenus.

Je n'ai pas encore entendu parler de flexite Smiley smile
OK gcyrillus,
effectivement, repenser la structure si trop complexe, très souvent la clef...
"La simplicité est la sophistication suprême" (Léonard de Vinci)
Bonne soirée
Sujet clos
Aller à