Je voudrais centrer la flexblox "visuElements" dans la flexbox "visuContainer" qui a une largeur de 100%.
.VisuElements a une flex-direction=flex-start de façon a ce que lorsqu'une ligne n'est pas complète, les éléments sont alignés sur la gauche plutôt que centrés.
https://jsfiddle.net/fredericmarcel/6e7eepur/7/
Merci de votre aide.
Frédéric
.VisuElements a une flex-direction=flex-start de façon a ce que lorsqu'une ligne n'est pas complète, les éléments sont alignés sur la gauche plutôt que centrés.
<div id="visuContainer">
<div id="visuElements">
<div id="element1" class="element">
<p id="nomElement1" class="nomElement">Elément 1</p>
</div>
<div id="element2" class="element">
<p id="nomElement2" class="nomElement">Elément 2</p>
</div>
<div id="element3" class="element">
<p id="nomElement3" class="nomElement">Elément 3</p>
</div>
<div id="element4" class="element">
<p id="nomElement4" class="nomElement">Objectif 4</p>
</div>
<div id="element5" class="element">
<p id="nomElement5" class="nomElement">Elément 5</p>
</div>
</div>
</div>
#visuContainer {
position: fixed;
width: 100%;
top: 10%;
height: 55%;
display: flex;
justify-content:center;
// background-color: yellow;
// align-items: flex-start;
left: 0;
//overflow: auto;
}
#visuElements {
display: flex;
justify-content:flex-start;
flex-direction: row;
flex-wrap: wrap;
overflow: auto;
}
.element {
display: flex;
flex-direction: column;
justify-content:center;
align-items: center;
background-color: white;
border: 2px solid black;
border-radius: 8px;
width: 25%;
height: 20vh;
margin: 1vh 15px;
//margin-top:2vh;
}
.nomElement {
font-family:"Arial";
padding:5px;
padding-left:10px;
padding-right:10px;
color:black;
line-height:110%;
text-align:center;
font-size:2em;
}
https://jsfiddle.net/fredericmarcel/6e7eepur/7/
Merci de votre aide.
Frédéric