Bonjour à tous,

J'ai un petit souci avec l'alignement flexbox des éléments d'un bloc.

J'ai créé une section "premiere_partie" dans laquelle j'ai une image et un texte "Viandes bovines...".

Voici mon code html (on ne peut plus basique):

<section id="premiere_partie">
	<img src="Photos/Ferme_du_Petit_Marais-0161.jpg" alt="photo_verger" class="photo_verger">
	<h1 id="premiere_partie"> Viandes bovines, charcuteries, volailles, oeufs, légumes et produits du terroir...
	</h1>
</section>

Lorsque j'applique "display: flex; justify-content : space-around", les deux éléments sont bien alignés mais ils sont collés l'un à l'autre : 

#premiere_partie
{
	display: flex;
	justify-content: space-around;
	margin-top: 60px;
	align-items: center;
}

.photo_verger
{
height:400px;
width:auto;
border-radius:5px;
}

Je peux bidouiller les marges entre les éléments pour les éloigner mais je ne comprends pas pourquoi la propriété "justify-content" ne fonctionne pas dans ce cas précis. J'ai regardé l'inspecteur, je ne vois rien qui cloche.

Est ce que vous avez une idée ?

Merci d'avance pour votre aide !!

-
Edité par AmelieLeMestre 15 juin 2021 à 15:52:30

Bonjour,

Je te conseille avant toute chose de corriger ton HTML. En effet, un id doit être unique alors que tu ad deux éléments avec l'id "premiere_partie" (ta section et ton h1).

Ensuite, dans ton CSS, tu appliques un display flex à tous les éléments avec l'id "premiere_partie". Il devrait y en avoir un seul mais il y en a deux, tu as donc trop d'éléments en flex...

-
Edité par Mewen_bzh 15 juin 2021 à 16:08:06

Merci pour ta réponse ! Je m'en suis rendue compte après avoir posté mon message... J'ai supprimé l'id "premiere_partie" sur le titre mais ça n'a eu aucun impact sur l'alignement... 

<section id="premiere_partie">
	<img src="Photos/Ferme_du_Petit_Marais-0161.jpg" alt="photo_verger" class="photo_verger">
	<h1> Viandes bovines, charcuteries, volailles, oeufs, légumes et produits du terroir...
	</h1>
</section>

As-tu une autre idée..? Merci

Bonjour,

Effectivement ma remarque d'hier n'avait pas pour vocation de régler le problème mais plutôt de partir sur de bonnes bases. 

En ce qui concerne ton problème, je ne vois pas d'erreur dans ton CSS. Le display flex est bien pris en compte, le align-items également.

Je me demande si cela n'est pas un simple problème de largeur. 

Pourrais-tu nous dire la largeur de ta section ainsi que la largeur de l'image et du titre stp ?

D'après la doc (https://developer.mozilla.org/fr/docs/Web/CSS/justify-content) : 

space-aroundLes éléments ont espacés équitablement selon l'axe principal. L'espace utilisé entre chaque élément est le même. L'espace entre le bord du conteneur et le premier élément et l'espace entre le dernier élément et le bord du conteneur représente la moitié de l'espace entre deux éléments.

Bonjour,

Je crois que tu as vu juste...! La largeur de la section : 1200px, largeur de l'image: 563 et du titre 636.

Dans ce cas, est-ce possible de forcer mon titre à aller à la ligne pour réduire sa largeur et permette un espacement entre les deux éléments ? 

Si j'ajoute une class sur le titre et que j'applique la fonctionnalité width, ça pourrait marcher ?

Merci pour ton aide

Oui tu peux mettre un max-width sur ton h1 

Merciiii !!