1.html代码
1 <div class="box"> 2 <div class="first">1</div> 3 <div class="second">2</div> 4 <div class="third">3</div> 5 <div class="fourth">4</div> 6 <div class="fifth">5</div> 7 </div>
2.justify-content:属性：设置子元素的排列方式
1 <style>
2 .box{
3 width: 1000px;
4 height: 200px;
5 border: 1px solid red;
6 box-sizing: border-box;
7 /*设置为父容器为盒子：会使每一个子元素自动变成伸缩项*/
8 display: flex;
9 /*设置子元素的排列方式*/
10 /*flex-start：让子元素从父容器的起始位置开始排列
11 flex-end：让子元素从父容器的结束位置开始排列
12 center：让子元素从父容器的中间位置开始排列
13 space-between：左右对其父容器的开始和结尾，中间平均分页，产生相同过的间距
14 space-around：将多余的空间平均的分页在给每一个子元素的两边 margin：0 auto ：造成中间合资的间距是左右两边盒子间距的两倍
15 space-evenly：使子元素平均分布在把父容器中，且间距相同
16 */
17 justify-content: space-evenly;
18 }
19 .box > div{
20 width: 200px;
21 height: 100%;
22 }
23 .first{
24 width: 200px;
25 height: 100%;
26 background-color: #65ffdd;
27 }
28 .second{
29 background-color: #5aff61;
30 }
31 .third{
32 background-color: #efffc7;
33 }
34 .fourth{
35 background-color: #47b3ff;
36 }
37 </style>
效果图：
3.flex-flow:属性：可以代替 flex-wrap和flex-direction
1 <style>
2 .box{
3 width: 900px;
4 height: 600px;
5 border: 1px solid red;
6 box-sizing: border-box;
7 margin: 0 auto;
8 /*设置父容器为盒子：会使每个子元素自动变成伸缩项
9 当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
10
11 display: flex;
12 /*设置子元素在主轴上的排列方式*/
13 justify-content: space-evenly;
14 /* flex-wrap：控制子元素是否换行显示，默认不换行
15 noweap：不换行---则收缩
16 wrap：换行显示
17 wrap-reverse：翻转
18 */
19 /*flex-wrap: wrap;*/
20 /*flex-direction:设置子元素的排列方向：就是用来设置主轴方向，默认主轴方向是row
21 row水平
22 column：垂直*/
23 /*flex-direction: column-reverse;*/
24
25 /*flex-flow:可以代替 flex-wrap和flex-direction*/
26 flex-flow: column wrap;
27 }
28 .first{
29 width: 200px;
30 height: 200px;
31 background-color: #65ffdd;
32 }
33 .second{
34 width: 200px;
35 height: 200px;
36 background-color: #5aff61;
37 }
38 .third{
39 width: 200px;
40 height: 200px;
41 background-color: #efffc7;
42 }
43 .fourth{
44 width: 200px;
45 height: 200px;
46 background-color: #47b3ff;
47 }
48 .fifth{
49 width: 200px;
50 height: 200px;
51 background-color: #ff510a;
52 }
53 </style>
效果图：
4.flex-grow:属性：可以来扩张子元素的宽度：设置当前元素应该占据生于空间的比例值，比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和
1 <style>
2 .box {
3 width: 900px;
4 height: 600px;
5 border: 1px solid red;
6 margin: 0 auto;
7 /*设置父容器为盒子：会使每个子元素自动变成伸缩项
8 当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
9
10 display: flex;
11 /*设置子元素在主轴上的排列方式*/
12 justify-content: space-evenly;
13
14
15 }
16 .first{
17 width: 200px;
18 height: 200px;
19 background-color: #65ffdd;
20 /*flex-grow: 可以来扩张子元素的宽度：设置当前元素应该占据生于空间的比例值，
21 比例值计算：当前空间的flex-grow/所有兄弟元素的flex-grow的和
22 flex-grow的默认值是0：说明子元素不会去占据生于的空间
23 */
24 flex-grow: 1;
25 }
26 .second{
27 width: 200px;
28 height: 200px;
29 background-color: #5aff61;
30 flex-grow: 1;
31 }
32 .third{
33 width: 200px;
34 height: 200px;
35 background-color: #efffc7;
36 flex-grow: 1;
37 }
38 </style>
效果图：
5.flex-shrink:属性：定义收缩比例，通过设置的值来计算的收缩空间比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和。默认值为1
1 <style>
2 .box {
3 width: 500px;
4 height: 600px;
5 border: 1px solid red;
6 margin: 0 auto;
7 /*设置父容器为盒子：会使每个子元素自动变成伸缩项
8 当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
9 display: flex;
10 /*设置子元素在主轴上的排列方式*/
11 justify-content: space-evenly;
12 }
13 .first{
14 width: 200px;
15 height: 200px;
16 background-color: #65ffdd;
17 /*flex-shrink:定义收缩比例，通过设置的值来计算的收缩空间
18 比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
19 默认值为1
20 */
21 flex-shrink: 2;
22 }
23 .second{
24 width: 200px;
25 height: 200px;
26 background-color: #5aff61;
27 flex-shrink: 0;
28 }
29 .third{
30 width: 200px;
31 height: 200px;
32 background-color: #efffc7;
33
34 }
35 </style>
效果图：
6.flex:属性：设置当前伸缩子项占据生于空间的比例值
1 <style>
2 .box {
3 width: 100%;
4 height: 500px;
5 background-color: #ccc;
6 margin: 0 auto;
7 /*设置父容器为盒子：会使每个子元素自动变成伸缩项
8 当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
9
10 display: flex;
11 /*设置子元素在主轴上的排列方式*/
12 /*justify-content: space-evenly;*/
13 }
14 .first{
15 /*设置当前伸缩子项占据生于空间的比例值*/
16 flex: 1;
17 height: 100%;
18 background-color: #65ffdd;
19 }
20 .second{
21 flex: 4;
22 height: 100%;
23 background-color: #5aff61;
24 }
25 </style>
效果图：
7.align-items：属性：设置子元素在侧轴方向上的对其方式
1 <style>
2 .box{
3 width: 900px;
4 height: 600px;
5 border: 1px solid red;
6 margin: 0 auto;
7 /*设置父容器为盒子：会使每个子元素自动变成伸缩项
8 当子元素的宽高和大于父容器宽度的时候，子元素就自动平均收缩*/
9
10 display: flex;
11 /*align-items：设置子元素在侧轴方向上的对其方式
12 center：设置在侧轴方向上居中对齐
13 flex-start：设置在侧轴方向上顶对其
14 flex-end：设置在侧轴方向上低对齐
15 stretch：拉伸 ：让我的子元素在侧轴方向上尽享拉伸，填充满整个侧轴方向
16 baseline：文本基线对齐
17 */
18 align-items: center;
19 }
20 .first{
21 width: 200px;
22 height: 200px;
23 background-color: #65ffdd;
24 }
25 .second{
26 width: 200px;
27 height: 200px;
28 background-color: #5aff61;
29 /*设置单个元素在侧轴方向上的对齐方式*/
30 align-self: flex-end;
31 }
32 .third{
33 width: 200px;
34 height: 200px;
35 background-color: #efffc7;
36 }
37
38 </style>
效果图：
