1.第一个案列
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手机端通用布局</title>
<style>
/*初始化*/
* {
margin: 0;
padding: 0;
}
/*链接初始化*/
a {
text-decoration: none;
color: #555555;
}
body {
height: 100vh;
/*转为弹性容器*/
display: flex;
/*主轴垂直且不换行*/
flex-flow: column nowrap;
}
header, footer {
box-sizing: border-box;
height: 50px;
background-color: #ededed;
/*转为弹性容器*/
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
main {
box-sizing: border-box;
background-color: #ffffff;
/*主体充满整个剩余空间*/
flex: 1;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
footer > a {
border-right: 1px solid white;
/*将剩余空间平均分配链接*/
flex: 1;
/*处理a标签文字水平垂直居中,将a标签转为弹性容器*/
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
footer > a:last-of-type{
border-right: none;
}
</style>
</head>
<body>
<header>PHP中文网</header>
<main>主体</main>
<footer>
<a href="">官网首页</a>
<a href="">教学视频</a>
<a href="">工具手册</a>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.第二个案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex实现圣杯布局</title>
<style>
/*初始化*/
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
/*转为弹性容器*/
display: flex;
/*主轴垂直且不换行*/
flex-flow: column nowrap;
}
header, footer {
box-sizing: border-box;
height: 50px;
background-color: #ededed;
}
main {
box-sizing: border-box;
background-color: #ffffff;
/*主体充满整个剩余空间*/
flex: 1;
display: flex;
}
main > aside {
box-sizing: border-box;
width: 200px;
background-color: wheat;
}
main > article {
box-sizing: border-box;
flex: 1;
background-color: lightblue;
}
main > aside:first-of-type {
order: -1;
}
</style>
</head>
<body>
<header>头部</header>
<main>
<article>内容区</article>
<aside>左侧栏</aside>
<aside>右侧栏</aside>
</main>
<footer>底部</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.第三个案例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局实现登录表单</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: 1px dashed;*/
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
color: #444;
font-weight: lighter;
background: linear-gradient(to top, lightcyan, white, lightcyan);
}
.container {
box-sizing: border-box;
width: 300px;
position: relative;
top: -60px;
}
.container > h3 {
text-align: center;
margin-bottom: 15px;
font-weight: lighter;
}
.container > form {
display: flex;
flex-flow: column nowrap;
border: 1px solid gray;
padding: 15px;
border-radius: 10px;
background: linear-gradient(to right bottom, lightblue, white);
}
.container > form:hover {
background: linear-gradient(to left top, lightcyan, white);
box-shadow: 0 0 5px #888;
}
.container > form > div {
display: flex;
margin: 10px 0;
}
.container > form > div > input {
flex: 1;
margin-left: 10px;
padding-left: 10px;
border: 1px solid #888;
border-radius: 8px;
}
.container > form > div > button {
flex: 1;
background-color: lightseagreen;
color: white;
height: 24px;
letter-spacing: 15px;
border: none;
border-radius: 8px;
}
.container > form > div > button:hover {
background-color: lightcoral;
box-shadow: 0 0 5px #888;
}
</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="不少于6位">
</div>
<div>
<button>提交</button>
</div>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.自己根据自己情况, 自定义一个小案例, 使用flex实现, 例如网站后台首页...
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站后台</title>
<style>
*{
margin: 0;
padding: 0;
/*outline: 1px dashed;*/
}
body{
height: 100vh;
display: flex;
flex-flow: column nowrap;
}
main{
flex: 1;
}
header {
height: 50px;
background-color: #444;
display: flex;
justify-content: space-between;
color: white;
}
header > p {
display: flex;
justify-content: center;
align-items: center;
padding-left: 15px;
}
header > nav{
display: flex;
justify-content: center;
align-items: center;
}
header > nav > *{
padding: 0 15px;
}
main{
display: flex;
}
main > aside {
width: 200px;
background-color: #eaeaea;
order: -1;
}
main > article {
flex: 1;
}
main > aside > div {
padding: 10px 0;
border-bottom: 1px solid white;
}
footer{
height: 50px;
background-color: #aaa;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<header>
<p>网站后台</p>
<nav>
<div>超级管理员</div>
<span>admin</span>
</nav>
</header>
<main>
<article>欢迎admin进入网站后台系统</article>
<aside>
<div>产品管理</div>
<div>会员管理</div>
<div>管理员管理</div>
<div>系统管理</div>
</aside>
</main>
<footer>
<p>
Copyright © 2018 - 2021 php中文网
</p>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码和总结中涉及知识点注释总结：
通过3个小案例的学习巩固了这两个星期的全部知识，不知不觉中自己就会布局了。有些属性的单词还是记不得，这方面还需要努力一下。感谢老师的辛勤付出和无私的奉献。