flex布局零基础入门教程（强烈建议把教程中的代码自己敲一遍）
在使用HTML开发页面时布局都是非常重要的一环，那么使用什么方式布局呢？我个人比较推荐使用flex布局，因为在开发同一页面时，使用flex布局模式开发效率更高；float布局中的绝对定位可能是其布局的精华，二者搭配使用可以弥补各自的不足之处（以上都是废话，重点在下面）。
重点：
1、当我们学习时看到一个陌生的知识点，我们首先要问自己两个问题：1.怎么用？2.有什么效果？
2、实验：对于第一个问题我们通常可以从官网的手册中找到答案，实在不行可以尝试看源码，但是有一些知识点就会显得很特别，找不到；解答第二个问题就需要在第一个问题的基础上进行探究和实验了，在实验前首先通过官方对该属性的定位，联想一下该属性可能会应用到那些场景，然后开始验证，遇到bug先自行解决，当实在没有头绪时上网搜索；毫无疑问你多多少少都会找到解决问题的线索；如果第一个问题没有解决，直接开始第二个可能会有一些曲折，但经过实验也可以解决问题的。
案例一：
没有对父标签声明的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#week1 {
width: 100%;
height: auto;
display: flex; /*进行声明，不声明无法使用*/
flex-direction: row;
}
.end1 {
width: 20%;
height: 100px;
background-color: bisque;
border: 2px solid black;
}
.end2 {
width: 20%;
height: 100px;
background-color: bisque;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="week1"><!--进行声明使用flex布局后正常效果-->
<div id="week2" class="end1"><!--没有进行声明无法使用flex布局-->
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
</div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
</div>
</body>
</html>
没有对父标签进行声明是否使用flex布局效果图；
对父标签声明后的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#week1 {
width: 100%;
height: auto;
display: flex; /*进行声明，不声明无法使用*/
flex-direction: row;
}
.end1 {
width: 20%;
height: 100px;
background-color: bisque;
border: 2px solid black;
}
#week2 {
display: flex;
}
.end2 {
width: 20%;
height: 100px;
background-color: bisque;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="week1"><!--进行声明使用flex布局后正常效果-->
<div id="week2" class="end1"><!--进行声明正常使用flex布局-->
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
<div class="end2"></div>
</div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
</div>
</body>
</html>
属性
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
简单的网页布局代码；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#week1 {
width: 100%;
height: auto;
display: flex; /*进行声明，不声明无法使用*/
flex-direction: row;
}
.end1 {
width: 10%;
height: 20px;
background-color: bisque;
border: 2px solid black;
}
#week4 {
display: flex;
flex-direction: row;
}
#wee1 {
width: 30%;
height: 500px;
background-color: aqua;
}
#wee2 {
width: 70%;
height: 500px;
background-color: aquamarine;
display: flex;
flex-direction: column;
}
.en1 {
width: 25%;
height: 250px;
background-color: bisque;
border: 1px solid black;
}
.u1{
width: 100%;
height: 50px;
margin: 5px 0px 5px 0px;
background-color: #bee7ff;
}
</style>
</head>
<body>
<div style="width: 100%;height: 50px">log和搜索框区域</div>
<div id="week1">
<div class="end1">导航栏区域</div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
<div class="end1"></div>
</div>
<div style="width: 100%;height: 400px;background-color: #bee7ff">
<h1>轮播图区域</h1>
</div>
<div id="week4">
<div id="wee1">正文区域</div>
<div id="wee2">
<div style="width: 100%;height: auto;display: flex;">
<div class="en1">正文区域</div>
<div class="en1"></div>
<div class="en1"></div>
<div class="en1"></div>
</div>
<div style="width: 100%;height: auto;display: flex;p">
<div class="en1">正文区域</div>
<div class="en1"></div>
<div class="en1"></div>
<div class="en1"></div>
</div>
</div>
</div>
<div id="week5" class="u1">
页脚导航区域
</div>
<div id="week6" class="u1">
版权声明区域
</div>
</body>
</html>
效果图
补充：能看到这里说明你已经入门了我的任务也就完成了，万事开头难，接下来就靠你自己去看官方教程了，研究flex布局的六种属性。
1293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
