Detaillierte Erklärung der Lösung zur Bildverformung unter Flex-Layout

<div Klasse="Personen">
	<img class="avatar" src="./avatar.jpg" alt="avatar">
	<div Klasse="des">
		<p>Tony</p>
		<p>Richtig, ich bin dein Lehrer, Tony. Komm und lass dir von mir die Haare schneiden! </p>
	</div>
</div>

/* Übergeordnetes Element */
.Menschen {
	Anzeige: Flex;
}
/* Avatar*/
.avatar {
	Breite: 64px;
	Höhe: 64px;
	Rahmenradius: 32px;
}
/* Charaktereinführung*/
.des {
	Rand links: 24px;
}

<div Klasse="Personen">
	<div><img class="avatar" src="./avatar.jpg" alt="avatar"></div>
	<div Klasse="des">
		<p>Tony</p>
		<p>Richtig, ich bin dein Lehrer, Tony. Komm und lass dir von mir die Haare schneiden! </p>
	</div>
</div>

/* Avatar*/
/* Die Eigenschaft „Flex-Shrink“ definiert das Schrumpfverhältnis des Elements. Der Standardwert ist 1, was bedeutet, dass das Element verkleinert wird, wenn nicht genügend Platz vorhanden ist. */
/* Wenn die Flex-Shrink-Eigenschaft eines Elements 0 und die anderen Elemente 1 sind, wird das Element mit dem Wert 0 nicht verkleinert, wenn nicht genügend Platz vorhanden ist. */
.avatar {
	Flex-Schrumpfen: 0;
	Breite: 64px;
	Höhe: 64px;
	Rahmenradius: 32px;
}