H5学习笔记13 弹性盒 容器属性 项目属性 flex：1；属性简写代表的意思 元素垂直水平居中几种方法
弹性盒
容器： 可以理解为父元素 一定是给容器设置弹性盒属性display:flex;
项目：可以理解为子元素 就是被容器承装的元素
主轴：可以理解为X轴 就是项目在容器中排列的方向，默认是X轴 （可以设置Y轴为主轴的）
垂直交叉轴： 可以理解为Y轴 就是项目垂直的位置 默认是Y轴 (可以更改的 )
弹性盒的容器属性
1 <style>
2 main{
3 width: 1000px;
4 height: 600px;
5 background: pink;
6 /* 设置弹性盒属性 */
7 display: flex;
8 /* 项目超出 折行 */
9 flex-wrap: wrap;
10 /* 3、多行项目(折行) 在容器父元素中垂直排列方向 */
11 /* align-content: stretch; 默认值 项目(子元素)不设置高度 则高度和父元素一致 */
12 /* align-content: flex-start; 项目们靠上排列 */
13 /* align-content: flex-end; 项目们靠下排列 */
14 /* align-content: center; 项目们居中排列 */
15 /* align-content: space-around; 两端环绕对齐 */
16 /* align-content: space-between; 两端顶格对齐 */
17 /* align-content:space-evenly; 等距对齐 */
18 }
19 section{
20 width: 300px;
21 height: 100px;
22 border:1px solid #000;
23 box-sizing: border-box;
24 background: cyan;
25 }
26 </style>
27 </head>
28 <body>
29 <main>
30 <section style="line-height: 40px;">1</section>
31 <section style="line-height: 30px;">2</section>
32 <section style="line-height: 60px;">3</section>
33 <section style="line-height: 80px;">4</section>
34 <section style="line-height: 90px;">5</section>
35 <section style="line-height: 100px;">6</section>
36 </main>
37 </body>
弹性盒的容器属性（2）
1 <style>
2 main{
3 width: 1000px;
4 height: 800px;
5 background:linear-gradient(pink,deeppink);
6 /* 给容器设置弹性盒 */
7 display: flex;
8
9 /* 1、更改主轴的方向 */
10 /* flex-direction: row; 默认值 横向 也就是X轴 */
11 /* flex-direction: row-reverse; 横向反向 */
12 /* flex-direction: column; 纵向 也就是Y轴 */
13 /* flex-direction: column-reverse; */
14
15 /* 2、项目是否折行 默认比较卑微 挤一挤 不折行 */
16 /* flex-wrap: nowrap; 默认值 不折行 */
17 /* flex-wrap: wrap; 折行 */
18 /* flex-wrap: wrap-reverse; 反向折行 */
19
20 /* 3、上述两个属性的简写 更改主轴方向 项目是否折行 */
21 flex-flow: column wrap;
22 }
23 section{
24 /* 父元素设置弹性盒 子元素可以设置宽高(啥元素都可以) */
25 width: 300px;
26 height: 300px;
27 border:1px solid #000;
28 background: cyan;
29 }
30 </style>
31 </head>
32 <body>
33 <main>
34 <section>1</section>
35 <section>2</section>
36 <section>3</section>
37 <section>4</section>
38 <section>5</section>
39 <section>6</section>
40 </main>
41 </body>
弹性盒的容器属性（3）
1 <style>
2 main{
3 width: 1000px;
4 height: 600px;
5 background: pink;
6 /* 设置弹性盒属性 */
7 display: flex;
8 /* 1、！！！！！！！设置子元素在主轴(默认水平方向)上排列方式 */
9 /* justify-content: flex-start;项目们靠左 */
10 /* justify-content: flex-end;项目们整体靠右 */
11 /* justify-content: center; 项目们整体居中 */
12 /* justify-content: space-between;两端顶格对齐 */
13 /* justify-content: space-around; 两端环绕对齐 */
14 /* justify-content: space-evenly; 等距对齐 */
15
16 /* 2、单行项目(不折行) 在容器父元素中垂直排列方向 */
17 /* align-items: stretch;默认值 当子元素没有设置高度的时候 高度和父元素一致 */
18 /* align-items: flex-start;项目们靠上 */
19 /* align-items: flex-end; 项目们靠下 */
20 /* align-items: center; 项目们居中 */
21 /* align-items: baseline;基线对齐 也就是文字对齐 */
22
23 }
24 section{
25 width: 100px;
26 height: 100px;
27 border:1px solid #000;
28 box-sizing: border-box;
29 background: cyan;
30 }
31 </style>
32 </head>
33 <body>
34 <main>
35 <section style="line-height: 40px;">1</section>
36 <section style="line-height: 30px;">2</section>
37 <section style="line-height: 60px;">3</section>
38 <section style="line-height: 80px;">4</section>
39 <section style="line-height: 90px;">5</section>
40 <section style="line-height: 100px;">6</section>
41 </main>
42 </body>
弹性盒的项目属性
1 <style>
2 main{
3 width: 1000px;
4 height: 600px;
5 background: pink;
6 /* 设置弹性盒 */
7 display: flex;
8 }
9 section{
10 width: 100px;
11 height: 100px;
12 background: cyan;
13 border:1px solid #000;
14 }
15 /* (子元素)项目的属性 */
16 /* 1、排列顺序 */
17 section:nth-of-type(3){
18 order:-1;
19 }
20
21 section:nth-of-type(4){
22 /* align-self: flex-start;靠上 */
23 /* align-self: center; 垂直居中 */
24 /* align-self: flex-end;靠下 */
25
26 /* height: auto; */
27 /* align-self: stretch; 不设置高度时 高度和父元素高度一致 */
28 }
29 </style>
30 </head>
31 <body>
32 <main>
33 <section>1</section>
34 <section>2</section>
35 <section>3</section>
36 <section>4</section>
37 <section>5</section>
38 <section>6</section>
39 </main>
40 </body>
重要的项目属性
1 <style>
2 main{
3 width: 1000px;
4 height: 600px;
5 background: pink;
6 /* 设置弹性盒 */
7 display: flex;
8 }
9 section{
10 /* 项目的属性 均分整个父元素区域 */
11 flex:1;
12 height: 100px;
13 background: cyan;
14 border:1px solid #000;
15 }
16 </style>
17 </head>
18 <body>
19 <main>
20 <section>1</section>
21 <section>2</section>
22 <section>3</section>
23 <section>4</section>
24 <section>5</section>
25 <section>6</section>
26 </main>
27 </body>
flex：1；属性简写代表的意思
<style>
main{
width: 1000px;
height: 600px;
background: pink;
/* 设置弹性盒 */
display: flex;
}
section{
width: 200px;
height: 100px;
background: cyan;
border:1px solid #000;
/* 项目缩小 每个默认都等比例缩小 */
flex-shrink: 1;
}
/* 项目flex:1 代表三个属性的简写 第一个属性 大小超出容器父元素时会自动缩小 */
section:nth-of-type(1){
/* 不缩小 */
flex-shrink: 0;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</main>
</body>
<style>
main{
width: 1000px;
height: 600px;
background: pink;
/* 设置弹性盒 */
display: flex;
}
section{
width: 100px;
height: 100px;
background: cyan;
border:1px solid #000;
flex-grow: 1;
}
/* 项目flex:1 代表三个属性的简写 第二个属性 项目大小合计 小于 容器父元素时 可以设置等比例放大 */
section:nth-of-type(1){
flex-grow: 2;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
</main>
</body>
1 <style>
2 main{
3 width: 1000px;
4 height: 600px;
5 background: pink;
6 /* 设置弹性盒 */
7 display: flex;
8 }
9 section{
10 width: 100px;
11 height: 100px;
12 background: cyan;
13 border:1px solid #000;
14 }
15 section:nth-of-type(1){
16 /* 剩余空间分配 */
17 flex-basis: 40%;
18 }
19 </style>
20 </head>
21 <body>
22 <main>
23 <section>1</section>
24 <section>2</section>
25 <section>3</section>
26 <section>4</section>
27 <section>5</section>
28 <section>6</section>
29 </main>
30 </body>
元素垂直水平居中几种方法
1 <style>
2 div{
3 width: 500px;
4 height: 500px;
5 background: red;
6 position: absolute;
7 left:50%;
8 top:50%;
9 /* margin-left: 负元素宽度一半; */
10 /* margin-top: 负元素高度一半; */
11
12
13
14 margin-left: -250px;
15 margin-top: -250px;
16 }
17 </style>
18 </head>
19 <body>
20 <div></div>
21 </body>
1 <style>
2 div{
3 width: 500px;
4 height: 500px;
5 background: red;
6 position: absolute;
7 left:50%;
8 top:50%;
9 transform: translate(-50%,-50%);
10 }
11 </style>
12 </head>
13 <body>
14 <div></div>
15 </body>
1 <style>
2 div{
3 width: 500px;
4 height: 500px;
5 background: red;
6 position: absolute;
7 left:0;
8 top:0;
9 right:0;
10 bottom: 0;
11 margin:auto;
12 }
13 </style>
14 </head>
15 <body>
16 <div></div>
17 </body>
1 <style>
2 div{
3 width: 600px;
4 height: 400px;
5 background: pink;
6 /* 给父元素设置三行话 */
7 display: flex;
8 justify-content: center;
9 align-items: center;
10 }
11 section{
12 width: 200px;
13 height: 200px;
14 background: #000;
15 }
16 </style>
17 </head>
18 <body>
19 <div>
20 <section></section>
21 </div>
22 </body>
1 <style>
2 div{
3 width: 600px;
4 height: 400px;
5 background: pink;
6 /* 给父元素设置两行话 */
7 display: flex;
8 justify-content: center;
9 }
10 section{
11 /* 给子元素设置 */
12 align-self: center;
13 width: 200px;
14 height: 200px;
15 background: #000;
16 }
17 </style>
18 </head>
19 <body>
20 <div>
21 <section></section>
22 </div>
23 </body>
浙公网安备 33010602011771号