infinite/web-learning
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

merge into: infinite:main
Branches Tags
infinite:main infinite:infinite-css-1
...
pull from: infinite:infinite-css-1
Branches Tags
infinite:infinite-css-1 infinite:main

2 Commits
main ... infinite-c

Author SHA1 Message Date
infinite
5ccc94e1ff 上传文件至 flex布局 2024-03-20 20:55:57 +08:00
infinite
3091c6108e 上传文件至 flex布局 2024-03-20 20:54:41 +08:00
7 changed files with 140 additions and 0 deletions
Expand all files Collapse all files

20
flex布局/contain1.css Normal file
View File

@@ -0,0 +1,20 @@
.container1{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
justify-content: space-around;
/*
等分每个内部盒子的间距
*/
flex-wrap:wrap;
/* 实现多行显示 */
align-content: space-around;
/* 均匀分布项目 */
}
.inter{
width:120px;
height: 120px;
background-color: blue;
}

13
flex布局/container.css Normal file
View File

@@ -0,0 +1,13 @@
.num1{
width:400px;
height: 400px;
background-color: aqua;
display:flex;
justify-content: center;
align-items: center;
}
.inter{
width: 150px;
height: 150px;
background-color: red;
}

17
flex布局/container2.css Normal file
View File

@@ -0,0 +1,17 @@
.container2{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
justify-content: space-between;
/* 均匀分布的布局，第一项与起始点齐平，第二项与终止点齐平 */
}
.inter{
width: 120px;
height: 120px;
background-color: blue;
}
.container2 div:nth-of-type(2){
/* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
align-self: flex-end;
}

21
flex布局/container3.css Normal file
View File

@@ -0,0 +1,21 @@
.container3{
width: 400px;
height: 400px;
background-color: aqua;
display: flex;
justify-content: space-between;
}
.inter{
width: 100px;
height: 100px;
background-color: blue;
}
.container3 div:nth-of-type(2){
/* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
align-self: center;
}
.container3 div:nth-of-type(3){
/* 伪类用于单个参数指定，该参数表示匹配元素的模式 */
align-self: flex-end;
}

22
flex布局/container4.css Normal file
View File

@@ -0,0 +1,22 @@
.container4{
width: 400px;
height: 400px;
background-color: aqua;
display:flex;
justify-content: space-between;
}
.inter{
width: 120px;
height: 120px;
background-color: blue;
}
.first{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.second{
display: flex;
flex-direction: column;
justify-content: space-between;
}

28
flex布局/container5.css Normal file
View File

@@ -0,0 +1,28 @@
.container4{
width: 400px;
height: 400px;
background-color: aqua;
display:flex;
justify-content: space-between;
}
.inter{
width: 120px;
height: 120px;
background-color: blue;
}
.cen{
width:120px;
height: 120px;
align-self: center;
background-color: blue;
}
.first{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.second{
display: flex;
flex-direction: column;
justify-content: space-between;
}

19
flex布局/container6.css Normal file
View File

@@ -0,0 +1,19 @@
.container6{
width: 300px;
height: 300px;
display: flex;
background-color: aqua;
justify-content: space-between;
}
.inter{
height: 80px;
width: 80px;
background-color: blue;
}
.first,.second,.three{
display: flex;
flex-direction: column;
justify-content: space-between;
}