I am exploring the world of flexbox with the goal of creating a responsive layout consisting of 3 items that adjust seamlessly to different devices such as smartphones, tablets, and desktop computers. The layout should stack the items on top of each other and collectively fill the width and height of the browser window. Ideally, there should be no need for scrolling. (In other words, one item at the top, one at the bottom, and the remaining items filling the space in between).
While I have managed to handle the width part for desktop and smartphones, I am still puzzled by how to ensure the layout adapts to the varying heights of different devices, including font size adjustments and box alignment.
As a temporary fix, I resorted to increasing the margin for smartphones...
What are your insights on this issue?
Below is the code snippet of what I have implemented:
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
font-size: 3em;
}
.item {
border: 5px solid red;
margin-bottom: 40px;
}
@media screen and (max-width: 500px) {
.element {
margin-bottom: 70px;
}
}
.one {
flex-basis: 100%;
display: flex;
}
.two {
flex-basis: 80%;
display: flex;
}
@media screen and (max-width: 64em) {
body {
font-size: 80%;
}
}
@media screen and (max-width: 50em) {
body {
font-size: 70%;
}
}
@media screen and (max-width: 30em) {
body {
font-size: 60%;
}
}
.three {
flex-basis: 100%;
}<div class="container">
<div class="item one">1</div>
<div class="item two">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div class="item three">3</div>
</div>