Flex之五筒布局：想去哪儿就去哪儿 上手就会
直接上问题：
实现一个容器五个项目，按麻将五筒位置布局
HTML代码，简单的一个article（容器），五个section（布局）
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>meta name="viewport" content="width=device-width, initial-scale=1.0"
//代码效果参考：http://hnjlyzjd.com/xl/wz_25404.html
[/span>meta http-equiv="X-UA-Compatible" content="ie=edge" [/span>title
[/span>link rel="stylesheet" href="./CSS/hahaha.css"
[/span>body
[/span>article
[/span>section class="box1"
[/span>section class="box2"
[/span>section class="box3"
[/span>section class="box4"
[/span>section class="box5"
一般人正常思维CSS代码
/ 300300可以分为9个100100的区块，五筒布局占其总五个/
/ 加上换行和主轴与交叉轴分别两端对齐 /
article{
Width＜/span>: 300px;
Height＜/span>: 300px;
background-color: skyblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
/ 每个项目加上同等大小，不同颜色 /
.box1{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: pink;
}
.box2{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(192, 255, 247);
}
.box3{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(95, 18, 76);
}
.box4{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(39, 199, 65);
}
.box5{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(231, 163, 17);
}
得到结果
还剩最后一步，把2号移动到正中间，
Flex容器和项目各有六个属性，你会发现无论怎么绞尽脑汁，就是没办法移动一个项目到正中间去，
甚至加了代码，连反应都没有
图中加入了单个项目属性，可是不管是取值flex-end,还是center，它压根就不会有反应，
想想好像真的可以，但是换方法移动调换顺序，不管怎样，结果也会是一样:实现不了。
解决办法：调整思维，跳出牛角尖死角
Flex容器定义中最重要的知识点：主轴与交叉轴，项目都在这两条轴上移动，但是只能是轴开始、中间和结尾，
理论上这两条轴可以占满整个容器的，那么上面的项目可以在任何位置，然后！
想要在页面中控制区块到自己想要的地方去，不单单可以依靠Flex，还可以通过修改HTML结构来结合Flex达到自己想要的结果。
修改HTML，加一个div
<!DOCTYPE html
[/span>html lang="en"
[/span>head
[/span>meta charset="UTF-8"
[/span>meta name="viewport" content="width=device-width, initial-scale=1.0"
[/span>meta http-equiv="X-UA-Compatible" content="ie=edge"
[/span>title
[/span>link rel="stylesheet" href="./CSS/hahaha.css"
[/span>body
[/span>article
[/span>section class="box1"
[/span>section class="box2"
[/span>div
[/span>section class="box3"
[/span>section class="box4"
[/span>section class="box5"
结果
修改CSS，控制div大小，让第三个项目换行
div{
width: 300px;
height: 100px;
}
结果
到了这里就回到上面的最后一步，移动三号到正中间，完成五筒布局，
直接加上
display: flex;
justify-content: center;
即可！Soeasy！
完整代码
/ 300300可以分为9个100100的区块，五筒布局占其总五个/
/ 加上换行和主轴与交叉轴分别两端对齐 /
article{
Width＜/span>: 300px;
Height＜/span>: 300px;
background-color: skyblue;
display: flex;
flex-wrap: wrap;
align-content: space-between;
justify-content: space-between;
}
div{
Width＜/span>: 300px;
Height＜/span>: 100px;
display: flex;
justify-content: center;
}
/ 每个项目加上同等大小，不同颜色 /
.box1{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: pink;
}
.box2{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(192, 255, 247);
}
.box3{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(//代码效果参考：http://hnjlyzjd.com/hw/wz_25402.html
95, 18, 76);}
.box4{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(39, 199, 65);
}
.box5{
Width＜/span>: 100px;
Height＜/span>: 100px;
background-color: rgb(231, 163, 17);
}
结果
总结：
项目都在主轴和交叉轴上移动，但是，轴的位置不一定刚好在那儿，这时候就可以修改HTML结构来辅助控制轴的位置，
最后达到移动项目到自己想要的位置去的目的。（添加包裹层（div）的时候，要分析好位置和大小）
