一、手机端通用布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机端通用布局</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: #444444 dashed 1px;*/
}
a {
text-decoration: none;
color: black;
}
body{
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
header, footer{
box-sizing: border-box;
background-color: #b0b0b0;
height: 50px;
display: flex;
/*设置弹性容器自带有默认值*/
/*flex-flow: row nowrap;*/
justify-content: center;
align-items: center;
}
main{
box-sizing: border-box;
/*body设置了垂直方向为主轴，将100vh的剩余空间全部分配给main*/
flex: 1;
}
footer > a{
border-right: white 1px solid;
flex: 1;
/*弹性容器居中*/
display: flex;
justify-content: center;
align-items: center;
/*文本居中*/
/*text-align: center;*/
}
footer > a:last-of-type{
border-right: none;
}
</style>
</head>
<body>
<header>我是头部</header>
<main>我是主体</main>
<footer>
<a href="">首页</a>
<a href="">拼团</a>
<a href="">秒杀</a>
<a href="">我的</a>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、flex实现圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实现圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: #444444 dashed 1px;*/
}
body{
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
header, footer{
box-sizing: border-box;
background-color: #b0b0b0;
height: 50px;
display: flex;
/*设置弹性容器自带有默认值*/
/*flex-flow: row nowrap;*/
justify-content: center;
align-items: center;
}
main{
box-sizing: border-box;
/*body设置了垂直方向为主轴，将100vh的剩余空间全部分配给main*/
flex: 1;
display: flex;
}
article{
flex: 1;
background-color: lightcoral;
}
aside{
width: 200px;
background-color: lightblue;
}
aside:first-of-type{
/*调整弹性元素位置，默认为0*/
order: -1;
}
</style>
</head>
<body>
<header>我是头部</header>
<main>
<article>我是主体区</article>
<aside>左侧栏</aside>
<aside>右侧栏</aside>
</main>
<footer>我是底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、弹性布局实现登录表单
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局实现登录表单</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: #444444 dashed 1px;*/
}
body{
display: flex;
/*flex-flow: column nowrap;*/
height: 100vh;
/*设置弹性元素在主轴居中*/
justify-content: center;
/*设置弹性元素在交叉轴居中*/
align-items: center;
}
.container{
width: 300px;
height: 230px;
box-sizing: border-box;
padding: 20px;
position: relative;
top: -50px;
display: flex;
flex-flow: column nowrap;
background: linear-gradient(to right bottom, lightskyblue, lavender);
border-radius: 10px;
/*外发光效果（前两个数值0 0即可）*/
box-shadow: 0 0 10px #555555;
}
h3{
height: 50px;
text-align: center;
line-height: 50px;
color: #3c3c3c;
letter-spacing: 2px;
}
form > div{
margin: 20px 0;
display: flex;
}
div > input:first-of-type{
flex: 1;
margin-left: 10px;
padding-left: 10px;
border: #ccc 1px solid;
border-radius: 5px;
}
div > button{
flex: 1;
letter-spacing: 20px;
height: 30px;
border: #ccc 1px solid;
border-radius: 5px;
color: #3c3c3c;
}
.container:hover{
background: linear-gradient(to top left, lightskyblue, lavender);
}
div > button:hover{
background-color: lightcoral;
}
label{
position: relative;
top: -2px;
color: #3c3c3c;
}
</style>
</head>
<body>
<div class="container">
<h3>管理员登陆</h3>
<form action="">
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" placeholder="example@email.com">
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="首字母大写">
</div>
<div>
<button>提交</button>
</div>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、flex后台小案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局后台管理</title>
<style>
*{
margin: 0;
padding: 0;
/* outline: black 1px dashed; */
}
body{
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
.demo1{
box-sizing: border-box;
background-color: #555;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.demo2{
box-sizing: border-box;
display: flex;
flex: 1;
}
.demo2 > div:first-of-type{
width: 200px;
box-sizing: border-box;
background-color: lightblue;
}
.demo2 > div:last-of-type{
box-sizing: border-box;
background-color: gray;
flex: 1;
}
.demo3{
height: 50px;
box-sizing: border-box;
background-color: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="demo1">我是顶部导航</div>
<div class="demo2">
<div>我是侧栏</div>
<div>我是功能显示区</div>
</div>
<div class="demo3">我是版权区</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
