Currently delving into the world of HTML and CSS, I am pondering how to display this.
The HTML Markup
<body>
<div class="container">
<div id=“one"> 1</div>
<div id=“two"> 2</div>
<div id="three">3</div>
<div id=“four"> 4</div>
<div id=“five"> 5</div>
</div>
</body>
The CSS Styling
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}
Aiming to utilize flexbox for this layout adjustment, I attempted some modifications in the CSS code. However, the outcome was not as expected. You can view the result here.
.container {
width: 240px;
height: 200px;
border: 1px solid gray;
display: inline-flex;
flex-direction: column-reverse;
flex-wrap: wrap;
align-content: flex-start;
}
.container > div {
width: 80px;
height: 50px;
border: 1px solid red;
}