How To Make a Responsive Flexbox Website Layout
Hello viewer welcome to M-SoftTech Today I Will teach how to make a Responsive Flexbox Layout. As you know about flex. If “regular” layout is based on both block and inline flow directions, the flex layout is based on “flex-flow directions”. flex provide some controls.
flex-start(default): items are packed toward the start of the flex-direction.flex-end: items are packed toward the end of the flex-direction.start: items are packed toward the start of thewriting-modedirection.end: items are packed toward the end of thewriting-modedirection.left: items are packed toward left edge of the container, unless that doesn’t make sense with theflex-direction, then it behaves likestart.right: items are packed toward right edge of the container, unless that doesn’t make sense with theflex-direction, then it behaves likeend.center: items are centered along the linespace-between: items are evenly distributed in the line; first item is on the start line, last item on the end linespace-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.
HTML Source Code
<!DOCTYPE html>
<html>
<head>
<title>CSS Flexible Box Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="wrap">
<div class="container card">
<div class="flex row structure">
<div class="flex row structure-1">
<div class="flex element a">
<div class="content">
A
</div>
</div>
<div class="flex element b">
<div class="content">
B
</div>
</div>
<div class="flex col structure-1-2-1">
<div class="flex element c">
<div class="content">
C
</div>
</div>
<div class="flex element d">
<div class="content">
D
</div>
</div>
</div>
<div class="flex element e">
<div class="content">
E
</div>
</div>
</div>
<div class="flex row structure-2">
<div class="flex element f">
<div class="content">
F
</div>
</div>
<div class="flex col structure-2-2">
<div class="flex element g">
<div class="content">
G
</div>
</div>
<div class="flex element h">
<div class="content">
H
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Source Code
@import 'https://fonts.googleapis.com/css?family=Montserrat';
body{
background: #7dc9f1;
}
.wrap{
max-width: 1100px;
margin: 0 auto;
padding: 140px;
}
.card{
margin:20px 0;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
background: white;
}
.content{
color: #424242;
background-color: #1516160f;
padding: 20px;
font-family: "Montserrat";
font-size: 40px;
}
@media (max-width: 375px){
.content{
padding: 5px;
font-size: 0;
text-indent: -9999999em;
}
}
.container,
.element{padding: 10px;}
.flex{display: flex; box-sizing: border-box;}
.row{flex-flow: row wrap;}
.col{flex-flow: column wrap;}
.element{min-width: 100px;}
.content{flex: 1 100%;}
.structure{min-height: 480px;}
.structure-1{flex: 1 55.55555555556%;}
.a{flex: 1 40%;}
.b{flex: 1 60%;}
.structure-1-2-1{flex: 1 20%}
.c,.d{flex: 1 50%;}
.e{flex:1 80%;}
.structure-2{flex:1 44.4444444444444%;}
.f{flex: 1 50%;}
.structure-2-2{flex:1 50%;}
.g{flex: 1 75%;}
.h{flex:1 25%;}
@media(max-width: 768px){
.structure-1,
.structure-2,
.f,
.structure-2-2{
flex: 1 100%;
min-height: 480px;
}
}You May Also Like This
Create Custom Tooltip Using HTML CSS only
How to Make a Grid System Using HTML & CSS Only
