My goal is to create a layout with 4 blocks, where the first section contains 2 blocks each occupying 50% of the width, followed by 2 other blocks in the next section.
I am utilizing the flex property for this layout. I want the flex-container to take up 100% width and height, and when set on no-wrap, the space should be divided equally among the blocks. Below is my HTML markup and CSS code:
However, the blocks are still wrapping and not occupying as intended.
body {
width: 100%;
height: 100vh;
}
#container {
position: relative;
width: 100%;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.col {}
.red {
height: 50%;
width: 50%;
background-color: red;
}
.blue {
height: 50%;
width: 50%;
background-color: cadetblue;
}
.aqua {
height: 50%;
width: 50%;
background-color: aqua;
}
.yellow {
height: 50%;
width: 50%;
background-color: yellow;
}<!DOCTYPE html>
<html>
<body>
<div id="container">
<div class="red"></div>
<div class="blue"></div>
<div class="aqua"></div>
<div class="yellow"></div>
</div>
</body>
</html>Here's an image showing the desired flex box model: Click here for reference