Comment faire un espace entre des flexbox en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-09-06 11:53:20

Question

Bonjour, j'ai deux balises <div> qui sont positionnées l'une à coté de l'autre via la propriété CSS flex. Comment faire pour spécifier l'espacement entre les <div> ?

Réponse

Pour spécifier l'espacement entre des flexbox, vous devez utiliser la propriété CSS justify-content qui indique la façon dont l'espace est réparti entre et autour des <div>.

La propriété justify-content peut prendre plusieurs valeurs ; voici un exemple pour faire un espace entre des flexbox avec space-around et space-between.

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Comment faire un espace entre des flexbox en HTML et CSS ?</title>
<style>
.flex_around { 
   display: flex; 
   justify-content: space-around; 
   background-color: black; 
} 
.flex_between { 
   display: flex; 
   justify-content: space-between; 
   background-color: black; 
} 
.flex-div { 
   background-color: grey; 
   width: 100px; 
   height:100px; 
}
</style>
</head>
<body>
<div class="flex_around"> 
   <div class="flex-div">space-around</div> 
   <div class="flex-div">space-around</div> 
</div>
<br>
<div class="flex_between"> 
   <div class="flex-div">space-between</div> 
   <div class="flex-div">space-between</div> 
</div>
</body>
</html>