I have been attempting to align div elements like in this example: https://i.sstatic.net/FoBPg.png
However, my result is not turning out as expected: https://codepen.io/online123/pen/VwvGoQP
The HTML code I am using is:
<div class="under d-flex flex-wrap justify-content-center">
<div class="box">Flex item 1</div>
<div class="box">Flex item 2<br/><br/><br/>end</div>
<div class="box">Flex item 3</div>
<div class="box">Flex item 4</div>
<div class="box">Flex item 5<br/><br/>end</div>
<div class="box">Flex item 6</div>
<div class="box">Flex item 7</div>
<div class="box">Flex item 8</div>
<div class="box">Flex item 9<br/><br/><br/><br/>end</div>
<div class="box">Flex item 10</div>
<div class="box">Flex item 11</div>
<div class="box">Flex item 12</div>
</div>
And the corresponding CSS code is:
.under {
width:70%;
margin:auto;
padding-top:40px;
padding-bottom:40px;
text-align:center;
border: 1px solid green;
overflow:auto;
justify-content:center;
position:relative;
}
.box {
text-align:center;
width:314px;
padding:10px;
margin:10px;
display:inline-block;
border: 1px solid black;
align-self:flex-start;
}
body {
height:100%;
padding:0px;
margin:0px;
flex-direction:column;
justify-content:center;
background-color:#262626!important;
color:#ddd!important;
font-family: 'Jost', sans-serif;
}
Can anyone provide guidance on how to properly align these divs? Any help would be greatly appreciated. Thank you.