<head>
<style>
.conteneur-flexible{
display: flex;
flex-wrap: wrap;
align-items: center;
background-color: #0AD; /*Bleu*/
width: 100%;
height: 200px;
border: 2px solid blue;
margin: 20px 0px;
}
.ligne{
flex-direction: row; /*Axe principal = axe horizontal*/
}
.colonne{
flex-direction: column; /*Axe principal = axe vertical*/
}
.element-flexible{
flex: 1 1 50px;
width: 40%;
height: 40%;
background-color: #0DA; /*Vert*/
border: 2px solid green;
margin: 10px;
}
</style>
</head>
<body>
<div class="conteneur-flexible ligne">
<div class="element-flexible">1</div>
<div class="element-flexible">2</div>
<div class="element-flexible">3</div>
</div>
<div class="conteneur-flexible colonne">
<div class="element-flexible">1</div>
<div class="element-flexible">2</div>
<div class="element-flexible">3</div>
</div>
</body>