一、使用弹性布局实现手机端界面：
①、设计界面时通常第一步是把标签的原有样式全部清空，最简单粗暴的就是使用* { margin: 0; padding: 0;}
②、vh：view-height的缩写，视口高度
③、元素水平垂直居中，justify-content: center; align-items: center;
④、flex：1，把剩余空间全部分配
* { margin: 0; padding: 0;}
a { text-decoration: none; color: black;}
body { height: 100vh; display: flex; flex-flow: column nowrap;}
header,footer { box-sizing: border-box; height: 50px; background-color: lightgreen; display: flex; justify-content: center; align-items: center;}
main { box-sizing: border-box; flex: 1;}
footer > a { border-right: 1px solid white; flex: 1; display: flex; justify-content: center; align-items: center; font-weight: bold;}
footer > a:last-of-type { border-right: none;}
二、使用弹性布局实现圣杯布局：
①、使用order属性可以改变弹性元素在主轴上的排列顺序
* { margin:0; padding:0;}
body { height: 100vh; display: flex; flex-flow: column nowrap;}
header,footer { box-sizing: border-box; height: 50px; background-color: lightblue;}
main { box-sizing: border-box; flex: 1; display: flex;}
main > aside { box-sizing: border-box; width: 150px; background-color: lightseagreen;}
main > article { box-sizing: border-box; flex: 1; background-color: skyblue;}
main > aside:first-of-type { order: -1;}
三、弹性布局实现登录界面：
* { margin:0; padding:0; /* outline: 1px solid lightgray; */}
body { box-sizing: border-box; height: 100vh; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; font-weight: lighter;
color: #444; background: linear-gradient(to top,lightcyan,white);}
.container { box-sizing: border-box; width: 300px; padding: 20px; position: relative; top: -60px;}
.container > h3 { text-align: center; margin-bottom: 15px; font-weight: lighter;}
.container > form { box-sizing: border-box; display: flex; flex-flow: column nowrap; padding: 10px; border: 1px solid gray; 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 { margin: 10px 0; display: flex;}
.container > form > div > input { box-sizing: border-box; flex: 1; margin-left: 8px; padding-left: 5px; border-radius: 8px;}
.container > form > div > button{flex:1;border-radius: 8px; background-color: lightgreen; color: white; border: none; height: 24px; letter-spacing: 15px;}
.container > form > div > button:hover { background-color: lightcoral; box-shadow: 0 0 5px #888;}
四、flex布局实现网站后台界面：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网站后台布局</title> <link rel="stylesheet" href="style4.css"> </head> <body> <header> <h1>图书馆后台管理系统</h1> <div class="head"> <a href="">系统管理员</a> <a href="">修改密码</a> <a href="">退出系统</a> </div> </header> <main> <nav> <a href="">首页</a> <a href="">图书信息</a> <a href="">借阅管理</a> <a href="">读者管理</a> <a href="">类别管理</a> <a href="">系统管理</a> </nav> <div class="container"> <aside> <a href="">新增图书信息</a> <a href="">图书信息管理</a> </aside> <article> <img src="library.png" alt="图书馆" height="690"> </article> </div> </main> <footer>Copyright © 图书馆管理系统 </footer> </body> </html>
* { margin: 0; padding: 0;}
a { text-decoration: none; color: black;}
body { height: 100%; display: flex; flex-flow: column nowrap;}
header,footer { height: 60px; background-color: lightgray; display: flex;}
header > h1 { margin: 10px 0 10px 50px;}
header > .head { flex: 1; display: flex; justify-content: flex-end; align-items: center; margin-right: 30px;}
header > .head > a { box-sizing: border-box; width: 100px;}
main { flex: 1; display: flex; flex-flow: column nowrap;}
main > nav { box-sizing: border-box; height: 60px; display: flex; border-bottom: 1px solid red; justify-content: center;}
main > nav > a { text-align: center; font-weight: bold; width: 100px; background-color: lightgreen; padding: 10px 5px; margin: 10px 10px; border-radius: 10px;}
main > .content { flex: 1; display: flex;}
main > .content > aside { display: flex; flex-flow: column nowrap; background-color: lightblue; width: 200px;}
main > .content > aside > a { box-sizing: border-box; display: flex; justify-content: center; margin-top: 20px;
}
main > .content > article { flex: 1; display: flex; justify-content: center;}
footer { justify-content: center; align-items: center;}
