Bonjour tout le monde 

Voici mon problème : Le footer de mon site est composé de deux liens-image et d'une image simple tous trois alignés le long de ma page avec un space-between. Le problème est que les liens associés à mes images prennent la même hauteur que l'image simple placées au milieu du footer. Comment faire pour que mes liens s'adapte à la taille de l'image à laquelle ils sont associés plutôt qu'a l'image centrale ? Je ne pense pas avoir été très clair alors voila mon code : 

<footer>
	<a href="http://www.legrandtarbes.fr/" target="blank">
		<img src="../pictures/buttons/logo_tlp.jpg" alt="Photo du conservatoire" width="200px"/>
	</a>

	<img src="..\pictures\conservatoire.jpg" alt="Photo du conservatoire" width="40%" height="300px"/>

	<a href="mailto:sastourne.quentin@hotmail.fr" title="Envoyer un mail à l'administrateur du site">
		<img src="../pictures/buttons/mail.png" alt="Logo mail" width="200px" height="200px" id="mailButton"/>
	</a>
</footer>

footer
{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;	
}

Voila le problème est que les deux liens <a> prennent la hauteur de l'image centrale.

Merci d'avance ! 

-
Edité par TooKi 16 janvier 2018 à 15:55:31

Bonjour,

il faut que tu joues avec align-items : https://developer.mozilla.org/fr/docs/Web/CSS/align-items. Sa valeur initiale est "stretch", c'est ce qui fait que tes éléments ont tous la même hauteur. À toi de choisir la valeur qui te convient le mieux.

-
Edité par Lamecarlate 16 janvier 2018 à 15:58:41

Merci beaucoup Lamecarlate ! J'étais sur que ce serait très simple genre une seule ligne  surtout que je connaissais déjà la propriété align-items mais je ne pensais pas que le problème venait de la  En tout cas merci beaucoup j'ai réussis à obtenir ce que je voulais avec align-items : start; 

Résolu !

Salut Lamecarlate !

Désolé pour ma réponse tardive mais comme j'avais mis le sujet en résolu je n'étais pas retourner dessus.

Du coup je suis aller voir le tableau dont tu parle mais je ne comprends pas ce que tu veux dire par doubler avec flex-start ?

Ça veut dire que la valeur "start" n'est pas encore comprise par tous les navigateurs.

Tu peux mettre

align-items: flex-start;
align-items: start;

La seconde propriété écrasera la première dans le cas où le navigateur comprend "start". Sinon, c'est la première qui s'exprimera.