Bonjour,
J’apprends flexbox et je ne comprends pas un code d’exemple que j’ai trouvé avec align-items: baseline, où j’ai deux div imbriquées avec un affichage baseline pour le texte de la deuxième div. C’est à dire pour un texte qui n’est pas un enfant direct du conteneur parent, mais un petit enfant.
Pourtant la propriété définie dans le CSS conteneur parent fonctionne sur le petit enfant..! Normalement cela ne devrait pas marcher puisqu’il n’y a pas d’héritage pour cette propriété. Pourtant ça marche… Pourquoi?
Voici le code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercices Flexbox</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
background-color: white;
}
body {
border: 2px solid black;
width: 40%;
height: 600px;
margin: 50px auto 0;
padding: 20px ;
background-color: #eeeeee;
}
#conteneur {
width: 80%;
height: 500px;
margin:auto;
border: 1px solid black;
display: flex;
align-items: baseline;
background-color:#cccccc;
font-size: 2em;
}
#conteneur div {
flex: 1;
border: 1px solid black;
display: flex;
align-items:center;
font-weight: 900;
background-color:white;
}
.un{
min-height:30px;"
}
.deux{
min-height:170px;"
}
.trois{
min-height:450px;"
}
.quatre{
min-height:250px;"
}
</style>
</head>
<body>
<header>
<h1>Exercice flexbox..</h1>
<br>
</header>
<div id="conteneur">
<div class="un">Un</div>
<div class="deux">Deux XXXX XXX</div>
<div class="trois">Trois XXX XXXXXXXXX XXXXXXXXX XXXX XXXXXXXX XXXXXXXXXX.</div>
<div class="quatre">Quatre XXX XXXXXXX XXX XX.</div>
</div>
</body>
</html>
@Amaury — Mise en forme du code (modifie ton message pour voir comment on fait).
+0
-0
