theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

flex 未完成

Browse Source
This commit is contained in:
asd 2021-01-20 18:33:56 +08:00
parent b8df71627e
commit 6dacee749f
17 changed files with 382 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
csspress/4.flex.assets/image-20210120113341512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
csspress/4.flex.assets/image-20210120114325303.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
csspress/4.flex.assets/image-20210120114326831.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
csspress/4.flex.assets/image-20210120114504619.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
csspress/4.flex.assets/image-20210120114721023.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
csspress/4.flex.assets/image-20210120134940595.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 KiB

BIN
csspress/4.flex.assets/image-20210120135351730.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 396 KiB

BIN
csspress/4.flex.assets/image-20210120135442183.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
csspress/4.flex.assets/image-20210120135503448.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
csspress/4.flex.assets/image-20210120143705542.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

141
csspress/4.flex.md
View File

@ -29,6 +29,14 @@ display:inline-flex
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row）
当 flex-direction 的值为column时 主轴为竖直 侧轴为水平
![image-20210120143705542](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120143705542.png)
### 容器的属性
- flex-direction 声明容器使用的轴是水平的还是垂直的
@ -44,3 +52,136 @@ display:inline-flex
- flex-end 交叉轴终点对齐
- baseline 第一行文字的基线对齐
- stretch 默认占满整个容器的高度
![image-20210120113341512](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120113341512.png)
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 1000px;
height: 500px;
background: pink;
display:flex; //声明容器为弹性盒子
flex-direction: row; //声明排列的方向为水平和竖直
align-items: center;//垂直排列方式
justify-content: center； //水平排列方式
}
.left{
width: 200px;
height: 200px;
background: red;
}
.right{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
```
#### justify-content
##### center: 水平居中
![image-20210120114326831](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114326831.png)
```
.box{
width: 1000px;
height: 500px;
background: pink;
display:flex;
flex-direction: row;
justify-content: center;
}
```
##### space-around 每个项目两侧的间隔相等 项目到边框有间距
![image-20210120114504619](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114504619.png)
```
.box{
width: 1000px;
height: 500px;
background: pink;
display:flex;
flex-direction: row;
justify-content: space-around;
}
```
##### space-between 两端对齐 项目之间的间隔都相等
![image-20210120114721023](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120114721023.png)
```
.box{
width: 1000px;
height: 500px;
background: pink;
display:flex;
flex-direction: row;
justify-content: space-between;
}
```
#### align-items
定义侧轴的项目对齐方式
作业1：
![image-20210120134940595](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120134940595.png)
作业2：
实现flex-内容宽度等分
作业3：
左右布局，一侧定宽一侧自适应填满
作业4：
未知高度上下左右居中
作业6：
![image-20210120135351730](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135351730.png)
作业7：
![image-20210120135442183](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135442183.png)
作业8
![image-20210120135503448](E:\web\lessons\课件\csspress\4.flex.assets\image-20210120135503448.png)

57
csspress/demo/flex.html Normal file
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width: 1000px;
height: 500px;
background: pink;
display:flex;
flex-direction: row;
/* align-items: center; */
justify-content: space-between;
}
.box1{
width: 1000px;
height: 500px;
background: gold;
display:flex;
flex-direction: row;
align-items: center;
/*
justify-content: space-between;
justify-content: space-around;
justify-content: space-center;
*/
}
.left,.left1{
width: 200px;
height: 200px;
background: red;
}
.right,.right1{
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box1">
<div class="left1"></div>
<div class="right1"></div>
</div>
</body>
</html>

55
csspress/demo2/flex.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
height: 500px;
background:gold ;
display: flex;
/* flex-direction: column; */
/* align-items: flex-start; */
align-items: baseline;
/* align-items: center; */
/* align-items: flex-end; */
/* flex-direction: row; */
/* justify-content:center; */
/* justify-content:space-around; */
/* justify-content: space-between; */
/* flex-wrap: wrap; */
}
.left{
width: 120px;
height: 120px;
background: pink;
}
.right{
width: 120px;
height: 120px;
background: gray;
}
</style>
</head>
<body>
<div class="box">
<div class="left">萤草</div>
<!-- <div class="left"></div>
<div class="left"></div> -->
<div class="right">青行灯</div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
<div class="right"></div>
</div>
</body>
</html>

103
csspress/demo2/flex2.html Normal file
View File

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.box{
display:flex
}
.one{
height: 200px;
border: 1px solid red;
flex:1;
}
.two{
height: 200px;
border: 1px solid blue;
flex:1;
}
.box1{
width: 800px;
height: 400px;
background: skyblue;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.left{
width:20%;
height: 200px;
background: pink;
}
.right{
width:70%;
height: 200px;
background: silver;
}
.left1{
width:200px;
height: 200px;
background: pink;
}
.right1{
width:200px;
height: 200px;
background: silver;
}
.box2{
justify-content: center;
align-items: center;
}
html,
body {
height: 100%
}
.main {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
border: 1px solid gray;
}
.box4 {
width: 300px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div></div>
</div>
<div class="box1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box1 box2">
<div class="left1"></div>
<div class="right1"></div>
</div>
<div class="main">
<div class="box4">未知高度上下左右居中</div>
</div>
</body>
</html>

BIN
csspress/float.assets/image-20210120160447090.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
csspress/float.assets/image-20210120160552069.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

38
csspress/float.md
View File

@ -30,31 +30,43 @@
2. 浮动的破坏性
浮动会破坏正常的inline boxes
flex破坏性指的是，父元素高度塌陷 。
什么是inline boxes?
把一张图片放在div里显示：
![image-20210120102415347](E:\web\lessons\课件\csspress\float.assets\image-20210120102415347.png)
```
<div class="outer">
<img src="./images/2.jpg" width="150px" height="100px">x
</div>
inline boxes不会让内容成块显示，而是排成一行，如果外部含inline属性的标签(span,a,cite等)，则属于inline boxes，如果是个光秃秃的文字，则属于匿名inline boxes。
```
Linebox
```
.outer{
width: 400px;
background-color: lightblue;
}
```
![image-20210120102812428](E:\web\lessons\课件\csspress\float.assets\image-20210120102812428.png)
![image-20210120160447090](E:\web\lessons\课件\csspress\float.assets\image-20210120160447090.png)
正常的图文混排：
这时候如果给图片加上float:left ,父元素蓝色框就只有x占据的宽度
不加float:
```
.outer{
width: 400px;
background-color: lightblue;
float:left;
}
```
![image-20210120103521672](E:\web\lessons\课件\csspress\float.assets\image-20210120103521672.png)
![image-20210120160552069](E:\web\lessons\课件\csspress\float.assets\image-20210120160552069.png)
（加入float之后）：
这时候如果把x去掉 那么父元素（蓝色框） 就直接没了
![image-20210120103339657](E:\web\lessons\课件\csspress\float.assets\image-20210120103339657.png)
正常情况下，图片自身就是个inline boxes，与两侧的文字inline boxes共同组成了line boxes，但是，一旦图片加入了浮动，情况就完全变了。我认为是浮动彻底破坏了img图片的inline boxes特性，至少有一点我可以肯定，图片的inline boxes不存在了。被恶魔附体，变身了，而这个恶魔就是浮动。一旦图片失去了inline boxes特性就无法与inline boxes的文字排在一行了，其会从line boxes上脱离出来，跟随自身的方位属性，靠边排列
## float 使用
@ -64,7 +76,7 @@ float:left 左浮动
float:right 右浮动
```
float:left 实现块级元素水平排列：
float:left 实现块级元素水平排列
![image-20210120103840173](E:\web\lessons\课件\csspress\float.assets\image-20210120103840173.png)