<style>
.container{
display: flex;
gap: 5px;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
overflow:auto;
}
.container .one{
background-color: blue;
align-items: stretch;
flex-basis: 300px;
}
.container .two{
background-color: blue;
flex-shrink: 30px;
}
.container .three{
background-color: blue;
flex-basis: 950px;
}
.four{
background-color: blue;
float: left; }
</style>
<body>
</body>How to make this all using Flexbox
I have done using everything but have been unable to achieve exact results. Can someone help me achieve this using Flexbox without using float also without using bootstrap.
>Solution :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
margin:0;
padding:0;
}
.container {
display:flex;
flex-direction: column;
gap:20px;
margin:10px;
}
.row {
display:flex;
gap:6px;
}
.row:last-child {
gap:0;
}
.top-boxes {
background-color:rgb(6, 85, 124);
border:4px solid black;
text-align: center;
height:400px;
padding-top:20px;
}
.bottom-boxes {
background-color:aqua;
border:4px solid black;
text-align: center;
padding:14px;
color:blue;
}
.top-boxes:nth-child(1) {
flex-grow:2;
}
.top-boxes:nth-child(2) {
flex-grow: 0.5;
}
.top-boxes:nth-child(3) {
flex-grow: 5;
}
.bottom-boxes:nth-child(1) {
flex-grow:5.5;
}
.bottom-boxes:nth-child(2) {
flex-grow: 3;
}
.bottom-boxes:nth-child(3) {
flex-grow: 1;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row top">
<div class="top-boxes">
<h3>
Confused
</h3>
</div>
<div class="top-boxes">
<h3>
Happy
</h3>
</div>
<div class="top-boxes">
<h3>
Sad
</h3>
</div>
</div>
<div class="row bottom">
<div class="bottom-boxes">
<h3>
Warm
</h3>
</div>
<div class="bottom-boxes">
<h3>
Cool
</h3>
</div>
<div class="bottom-boxes">
<h3>
Hot
</h3>
</div>
</div>
</div>
</body>
</html>