CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container
<!DOCTYPE html>
<html>
<style>
.card{
background-color: rgb(210, 175, 131);
height:40px;
border:2px solid black;
font-size: 25PX;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-family: sans-serif;
color:#fff;
}
.card1{
background-color: rgb(58, 120, 141);
height:200px;
width:25%;
border:2px solid black;
float:right;
font-size: 25px;
font-family: sans-serif;
font-weight: 600;
color: #fff;
display: flex;
justify-content: center;
}
.card2{
background-color:rgb(41, 71, 41);
height:200px;
width:25%;
border:2px solid black;
float: right;
color:#fff;
font-size: 25px;
font-family: sans-serif;
font-weight: 600;
display: flex;
justify-content: center;
}
.card3{
background-color:rgb(227, 60, 152);;
height:200px;
width:25%;
border:2px solid black;
float: right;
display:flex;
justify-content: center;
color:#fff;
font-size: 25px;
font-family: sans-serif;
font-weight: 600;
}
.card4{
background-color: blue;
height:200px;
width:23%;
border:2px solid black;
color:#fff;
padding-left:7px;
display:flex;
justify-content: center;
border:2px solid black;
font-size: 25px;
font-weight: 600;
}
.card5{
background-color:rgb(91, 187, 222) ;
height:30px;
}
</style>
<body>
<div class="card">HTML</div>
<div class="card1">CSS</div>
<div class="card2">JAVA</div>
<div class="card3">NODE</div>
<div class="card4">JQERY</div>
<div class="card5"></div>
</body>
</html>