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布局的六种属性。