Skip to content

Instantly share code, notes, and snippets.

@zhangzihaoDT

zhangzihaoDT/.block

Last active February 11, 2020 01:21
Show Gist options
  • Save zhangzihaoDT/4c7bca742cb686afbe256d256e021ce7 to your computer and use it in GitHub Desktop.
Save zhangzihaoDT/4c7bca742cb686afbe256d256e021ce7 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox Template
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width">
<head>
<style>
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 300vh;
display: flex;
justify-content: center
}
.container {
display: flex;
flex-direction: column;
width: 80%;
}
.box {
box-sizing: border-box;
border: 10px solid #fff;
}
.group-1 {
width: 100%;
height: 20%;
}
.box-1 {
background-color: orangered;
height: 100%;
}
.group-2 {
display: flex;
flex-direction: row;
width: 100%;
height: 30%;
}
.group-2-nest-2 {
display: flex;
flex-direction: column;
width: 30%;
height: 100%;
}
.box-2 {
background-color: tomato;
width: 70%;
height: 100%;
}
.box-3 {
background-color: coral;
flex-basis: 100%;
height: 50%;
}
.box-4 {
background-color: darkorange;
flex-basis: 100%;
height: 50%;
}
.group-3 {
display: flex;
flex-direction: row;
width: 100%;
height: 25%;
}
.box-5 {
background-color: gold;
width: 40%;
height: 100%;
}
.box-6 {
background-color: teal;
width: 60%;
height: 100%;
}
.group-4 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 25%;
}
.box-7 {
background-color: mediumaquamarine;
flex-basis: 50%;
height: 50%;
}
.box-8 {
background-color: mediumturquoise;
flex-basis: 50%;
height: 50%;
}
.box-9 {
background-color: mediumblue;
flex-basis: 50%;
height: 50%;
}
.box-10 {
background-color: mediumorchid;
flex-basis: 50%;
height: 50%;
}
@media screen and (max-width: 420px){
.container {
width: 100vw;
}
.group-1, .group-2, .group-2-nest-2, .group-3, .group-4 {
flex-direction: column;
width: 100%;
}
.group-4 {
flex-wrap: nowrap;
}
.box-1, .box-2, .box-3, .box-4, .box-5, .box-6, .box-7, .box-8, .box-9, .box-10 {
width: 100%;
flex: 1;
}
}
</style>
</head>
<body>
<div class='wrapper'>
<div class='container'>
<div class='group-1'>
<div class='box box-1'></div>
</div>
<div class='group-2'>
<div class='box box-2'></div>
<div class='group-2-nest-2'>
<div class='box box-3'></div>
<div class='box box-4'></div>
</div>
</div>
<div class='group-3'>
<div class='box box-5'></div>
<div class='box box-6'></div>
</div>
<div class='group-4'>
<div class='box box-7'></div>
<div class='box box-8'></div>
<div class='box box-9'></div>
<div class='box box-10'></div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment