前言：Flexbox属于一个html的一个布局，其设计初衷为的是便于适应新时期多种屏幕碎片化的趋势，具有良好的拉伸适应性，尤其在横向拉伸上十分方便。其浏览器兼容性也比较好。
本讲把重点放在响应式的例子，而非flexbox的基本概念上，通过几个例子进行演示。
0.flexbox小结
这个小结旨在把容易弄错的内容总结一下：
父容器的属性:display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
子元素的属性：order, flex-grow, flex-basis, flex-shrink, flex, align-self
具体内容不再演示
一个基本布局的小小例子：
<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<style type="text/css">
.container{
display: flex;
background-color: black;
width: 70%;
margin:0 auto;
flex-wrap: wrap;
align-content: flex-start;
}
.flex_item{
flex:1;
height: 70vh;
background-color: chocolate;
margin: 1px;
}
/*header,footer*/
.flex_item:nth-child(1),.flex_item:nth-child(5) {
flex:100%;
height: 15vh;
background-color: cornflowerblue;
}
/*content*/
.flex_item:nth-child(3){
flex:3;
background-color: lightgrey;
}
</style>
</head>
<body>
<div class="container">
<div class="flex_item">Header</div>
<div class="flex_item">Left </div>
<div class="flex_item">Content</div>
<div class="flex_item">Right</div>
<div class="flex_item">Footer</div>
</div>
</body>
</html>
可以看看效果，尤其是拉伸时的效果。其核心只有一句话flex:100%.
1.非响应式的页面
这里给出代码，相应部分还没有完成，可以看看效果：
<!DOCTYPE html>
<html>
<head>
<title>Flex responsive</title>
<style type="text/css">
/*outest main section */
.main{
width: 98%;
margin:0 auto;
display: flex;
flex-direction: column;
}
/*header section */
header,footer{
background-color: cadetblue;
height:15vh;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
width: 200px;
height: 90px;
}
.face{
display: flex;
margin-right: 50px;
align-items: center;
}
.face_image{
flex:1;
}
.face_text{
flex:3;
}
.logo img{
width: 150px;
height: 90px;
}
.face_image img{
width: 40px;
height: 40px;
}
/*container section */
.container{
display: flex;
/*flex-direction: row;*/
}
article{
height: 70vh;
background-color: aliceblue;
flex:4;
display: flex;
}
.main_image{
flex:1;
margin:40px;
}
.main_image img{
width: 300px;
height: 240px;
border:1px solid black;
}
.main_text{
flex:1;
margin:20px 50px 20px 50px;
}
.main{
width: 90%;
margin:0 auto;
display: flex;
flex-direction: column;
}
h4{
text-align: center;
}
nav,aside{
display: flex;
justify-content: center;
height: 70vh;
background-color: darkgrey;
flex:1;
}
ul{
background-color: lightgreen;
list-style-type: none;
padding: 5px;
}
li{
padding: 10px;
}
/*footer section */
footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_left{
margin-left: 60px;
}
.footer_right{
margin-right: 60px;
}
</style>
</head>
<body>
<div class="main">
<header>
<div class="logo" >
<img src="logo.png">
</div>
<div class="face">
<div class="face_image">
<img src="facebook.png" >
</div>
<div class="face_text">
Follow us
</div>
</div>
</header>
<div class="container">
<nav>
<div class="nav_link">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
<article>
<div class="main_image">
<img src="cloud.jpg">
</div>
<div class="main_text">
<h3>Lorem</h3>
<p>Lorem</p>
</div>
</article>
<aside>
<div class="aside_text">
<h4>Latest News</h4>
<a href="#">New Cloud</a>
</div>
</aside>
</div>
<footer>
<div class="footer_left">©me</div>
<div class="footer_right">my site</div>
</footer>
</div>
</body>
</html>
2.添加修改响应部分
这里，flex-direction, order的神奇作用就显现出来了。
<!DOCTYPE html>
<html>
<head>
<title>Flex responsive</title>
<style type="text/css">
/*outest main section */
.main{
width: 98%;
margin:0 auto;
display: flex;
flex-direction: column;
}
/*header section */
header,footer{
background-color: cadetblue;
height:15vh;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
}
.logo{
width: 200px;
height: 90px;
}
.face{
display: flex;
margin-right: 50px;
align-items: center;
}
.face_image{
flex:1;
}
.face_text{
flex:3;
}
.logo img{
width: 150px;
height: 90px;
}
.face_image img{
width: 40px;
height: 40px;
}
/*container section */
.container{
display: flex;
/*flex-direction: row;*/
}
article{
height: 70vh;
background-color: aliceblue;
flex:4;
display: flex;
}
.main_image{
flex:1;
margin:40px;
}
.main_image img{
width: 300px;
height: 240px;
border:1px solid black;
}
.main_text{
flex:1;
margin:20px 50px 20px 50px;
}
.main{
width: 90%;
margin:0 auto;
display: flex;
flex-direction: column;
}
h4{
text-align: center;
}
nav,aside{
display: flex;
justify-content: center;
height: 70vh;
background-color: darkgrey;
flex:1;
}
ul{
background-color: lightgreen;
list-style-type: none;
padding: 5px;
}
li{
padding: 10px;
}
/*footer section */
footer{
display: flex;
justify-content: space-between;
align-items: center;
}
.footer_left{
margin-left: 60px;
}
.footer_right{
margin-right: 60px;
}
/*responsive part */
@media(max-width: 1200px){
.container{
flex-direction: column;
}
nav, aside{
height: 15vh;
}
nav{
align-items: center;
order:2;
}
li{
display: inline;
}
.main_image{
flex:1;
}
.main_text{
flex:2;
margin:20px 0 20px 0;
}
aside{
order:1;
}
article{
order:3;
}
}
</style>
</head>
<body>
<div class="main">
<header>
<div class="logo" >
<img src="logo.png">
</div>
<div class="face">
<div class="face_image">
<img src="facebook.png" >
</div>
<div class="face_text">
Follow us
</div>
</div>
</header>
<div class="container">
<nav>
<div class="nav_link">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
<article>
<div class="main_image">
<img src="cloud.jpg">
</div>
<div class="main_text">
<h3>Lorem</h3>
<p>Lorem</p>
</div>
</article>
<aside>
<div class="aside_text">
<h4>Latest News</h4>
<a href="#">New Cloud</a>
</div>
</aside>
</div>
<footer>
<div class="footer_left">©me</div>
<div class="footer_right">my site</div>
</footer>
</div>
</body>
</html>
3.Photo Gallery例子
这里通过wrap实现了简单的响应式效果，但是仍然有改进的空间
<!DOCTYPE html>
<html>
<head>
<title>Photo Gallery</title>
<style type="text/css">
body{
background-color: grey;
}
.container{
display: flex;
background-color: lightcyan;
flex-flow: row wrap;
margin:0 70px 0 70px;
padding: 50px 250px 50px 250px;
justify-content: space-between;
}
.main{
width: 175px;
height: 140px;
margin:10px;
padding: 5px;
}
.container .main:nth-child(1),
.container .main:nth-child(8){
flex:100%;
height: 60px;
border-bottom: 2px solid crimson;
}
.container .main:nth-child(8){
margin-top: 50px;
}
img{
width: 175px;
height: 140px;
border:1px solid crimson;
border-radius: 2%;
}
.main img:hover{
transform: scale(1.5,1.5);
box-shadow: 2px 2px 2px #4b4b4b;
}
h2{
color:crimson;
}
</style>
</head>
<body>
<div class="container">
<div class="main"><h2>Safari Gallery</h2></div>
<div class="main"><img src="safari1.jpg"></div>
<div class="main"><img src="safari2.jpg"></div>
<div class="main"><img src="safari3.png"></div>
<div class="main"><img src="safari4.jpg"></div>
<div class="main"><img src="safari5.jpeg"></div>
<div class="main"><img src="safari6.jpg"></div>
<div class="main"><h2>Desert Gallery</h2></div>
<div class="main"><img src="desert1.jpg"></div>
<div class="main"><img src="desert2.jpg"></div>
<div class="main"><img src="desert3.jpg"></div>
<div class="main"><img src="desert4.jpg"></div>
<div class="main"><img src="desert5.jpg"></div>
<div class="main"><img src="desert6.jpg"></div>
</div>
</body>
</html>
效果如下：
4.Photo Gallery II
非相应代码
<!DOCTYPE html>
<html>
<head>
<title>Gallery II</title>
<style type="text/css">
body{
background-color: crimson;
}
.container{
width: 100vw;
height: 50vh;
display: flex;
background-color: lightgrey;
align-items: center;
margin-top: 10%;
margin:0 auto;
}
.odd_div{
width: 25%;
height: 100%;
background-color: blue;
}
.even_div{
width: 25%;
height: 80%;
background-color: blue;
}
.container .odd_div:nth-child(1){
background-image: url(php0.jpg);
background-size: 100% 100%;
}
.container .odd_div:nth-child(3){
background-image: url(javascript0.jpg);
background-size: 100% 100%;
}
.container .even_div:nth-child(2){
background-image: url(java0.jpg);
background-size: 100% 100%;
}
.container .even_div:nth-child(4){
background-image: url(mysql0.png);
background-size: 100% 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="odd_div"></div>
<div class="even_div"></div>
<div class="odd_div"></div>
<div class="even_div"></div>
</div>
</body>
</html>
添加相应代码：
<!DOCTYPE html>
<html>
<head>
<title>Gallery II</title>
<style type="text/css">
body{
background-color: crimson;
}
.container{
width: 100vw;
height: 50vh;
display: flex;
background-color: lightgrey;
align-items: center;
margin-top: 10%;
margin:0 auto;
}
.odd_div{
width: 25%;
height: 100%;
background-color: blue;
}
.even_div{
width: 25%;
height: 80%;
background-color: blue;
}
.container .odd_div:nth-child(1){
background-image: url(php0.jpg);
background-size: 100% 100%;
}
.container .odd_div:nth-child(3){
background-image: url(javascript0.jpg);
background-size: 100% 100%;
}
.container .even_div:nth-child(2){
background-image: url(java0.jpg);
background-size: 100% 100%;
}
.container .even_div:nth-child(4){
background-image: url(mysql0.png);
background-size: 100% 100%;
}
@media screen and (max-width: 700px){
.odd_div, .even_div{
width: 49vw;
height:100%;
margin:1px;
}
.container{
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<div class="container">
<div class="odd_div"></div>
<div class="even_div"></div>
<div class="odd_div"></div>
<div class="even_div"></div>
</div>
</body>
</html>
效果如下
5. Form
内容不多
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<style type="text/css">
*{
box-sizing: border-box;
}
.main_form{
display: flex;
background-color: lightgreen;
width: 70%;
height: 300px;
margin:0 auto;
padding: 20px;
}
.contact{
flex:1;
order:2;
margin-left: 60px;
}
.contact input{
width: 100%;
padding: 10px;
margin-bottom: 30px;
}
.contact button{
background-color: darkgray;
color: white;
padding: 15px;
}
.text_message{
display: flex;
flex-direction: column;
flex:2;
margin-bottom: 50px;
order:1;
}
.text_message textarea{
flex:1;
}
</style>
</head>
<body>
<form class="main_form">
<div class="contact">
<label for="name">Name</label>
<input type="text" name="" id="name">
<label for="email">Email</label>
<input type="email" name="" id="email">
<button type="submit">Submit</button>
</div>
<div class="text_message">
<label for="msg">Message：</label>
<textarea id="msg">Write your comment here</textarea>
</div>
</form>
</body>
</html>
6.菜单项目
一个类手风琴的纵向排列的小项目。
<!DOCTYPE html>
<html>
<head>
<title>Menu project</title>
<style type="text/css">
.container{
display: flex;
}
.main{
width: 25vw;
height:100vh;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: .5s;
}
.main:nth-child(1){
background-image: url(paris.jpg);
}
.main:nth-child(2){
background-image: url(london.jpg);
}
.main:nth-child(3){
background-image: url(newyork.jpg);
}
.main:nth-child(4){
background-image: url(tokyo.jpg);
}
h3{
line-height: 100vh;
margin:0;
background:rgba(215,145,46,.3);
color: white;
font-family: papyrus;
font-size: 15px;
transition: .5s;
}
h3:hover{
background: rgba(0,0,0,0.1);
letter-spacing: 4px;
transition: .5s;
}
.main:hover{
width: 50vw;
transition: 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="main"><h3>Paris</h3></div>
<div class="main"><h3>London</h3></div>
<div class="main"><h3>New York</h3></div>
<div class="main"><h3>Tokyo</h3></div>
</div>
</body>
</html>
效果如下
7.FAQ小页面例子
<!DOCTYPE html>
<html>
<head>
<title>FAQ page</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.text').hide();
$('.expand').click(function(){
$(this).parent().next().slideToggle(600);
});
});
</script>
<style type="text/css">
.container{
display: flex;
flex-direction: column;
}
.main{
margin-bottom: 10px;
widows: 70vw;
}
.expand{
font-family: verdana;
font-size: 14px;
font-weight: bold;
color: darkslategray;
}
.text{
font-family: verdana;
font-size: 12px;
}
a{
text-decoration: none;
}
h2{
color: brown;
}
.expand:hover{
background-color: lightgray;
border-radius: 3px;
}
</style>
</head>
<body>
<h2>Frequently Asked Questions</h2>
<div class="container">
<div class="main">
<a href="#">
<div class="expand">
Question 1
</div>
</a>
<p>
Lorem Lorm
</p>
</div>
<div class="main">
<a href="#">
<div class="expand">
Question 1
</div>
</a>
<p>
Lorem Lorm
</p>
</div>
<div class="main">
<a href="#">
<div class="expand">
Question 1
</div>
</a>
<p>
Lorem Lorm
</p>
</div>
<div class="main">
<a href="#">
<div class="expand">
Question 1
</div>
</a>
<p>
Lorem Lorm
</p>
</div>
</div>
</body>
</html>
8.Tab选项卡例子
关键在于jquery-ui库，也没有别的什么。这个例子不涉及响应式。
<!DOCTYPE html>
<html>
<head>
<title>Tab Project</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.container').tabs();
});
</script>
<style type="text/css">
.container{
display: flex;
flex-direction: column;
width: 70vw;
height: 100vh;
margin:0 auto;
}
ul{
display: flex;
background-color: white;
justify-content: flex-start;
padding-left: 0px;
border-bottom: 1px solid lightgray;
}
li{
list-style: none;
background-color: lightgray;
margin-right: 10px;
margin-top: 5px;
padding:3px;
border:1px solid black;
border-bottom: 0px;
}
li a{
text-decoration: none;
}
p, h3, a{
font-family: verdana;
font-size: 13px;
}
</style>
</head>
<body>
<div class="container">
<ul class="list">
<li><a href="#tab1">First</a></li>
<li><a href="#tab2">Second</a></li>
<li><a href="#tab3">Third</a></li>
</ul>
<div id="tab1"><h3>Section 1</h3><p>Text 1</p></div>
<div id="tab2"><h3>Section 2</h3><p>Text 2</p></div>
<div id="tab3"><h3>Section 3</h3><p>Text 3</p></div>
</div>
</body>
</html>
看看结果就可以。
总结：一套操作弄下来，感觉flex布局的好处就是换行以及纵向和横向的布局方便