Flex之五筒布局：想去哪儿就去哪儿上手就会

直接上问题：

　　　　　　实现一个容器五个项目，按麻将五筒位置布局

HTML代码，简单的一个article（容器），五个section（布局）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/hahaha.css">
</head>

<body>

    <article>
        
        <section class="box1">1</section>
        <section class="box2">2</section>
        <section class="box3">3</section>
        <section class="box4">4</section>
        <section class="box5">5</section>

    </article>

</body>

</html>

一般人正常思维CSS代码

/* 300*300可以分为9个100*100的区块，五筒布局占其总五个*/
/* 加上换行和主轴与交叉轴分别两端对齐 */
article{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}

/* 每个项目加上同等大小，不同颜色 */
.box1{
    width: 100px;
    height: 100px;
    background-color: pink;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: rgb(192, 255, 247);
}
.box3{
    width: 100px;
    height: 100px;
    background-color: rgb(95, 18, 76);
}
.box4{
    width: 100px;
    height: 100px;
    background-color: rgb(39, 199, 65);
}
.box5{
    width: 100px;
    height: 100px;
    background-color: rgb(231, 163, 17);
}

得到结果

还剩最后一步，把2号移动到正中间，

Flex容器和项目各有六个属性，你会发现无论怎么绞尽脑汁，就是没办法移动一个项目到正中间去，

甚至加了代码，连反应都没有

图中加入了单个项目属性，可是不管是取值flex-end,还是center，它压根就不会有反应，

想想好像真的可以，但是换方法移动调换顺序，不管怎样，结果也会是一样:实现不了。

解决办法：调整思维，跳出牛角尖死角

Flex容器定义中最重要的知识点：主轴与交叉轴，项目都在这两条轴上移动，但是只能是轴开始、中间和结尾，

理论上这两条轴可以占满整个容器的，那么上面的项目可以在任何位置，然后！

想要在页面中控制区块到自己想要的地方去，不单单可以依靠Flex，还可以通过修改HTML结构来结合Flex达到自己想要的结果。

修改HTML，加一个div

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/hahaha.css">
</head>

<body>

    <article>

        <section class="box1">1</section>
        <section class="box2">2</section>

        <div>
            <section class="box3">3</section>
        </div>

        <section class="box4">4</section>
        <section class="box5">5</section>

    </article>

</body>

</html>

结果

修改CSS，控制div大小，让第三个项目换行

div{
     300px;
    height: 100px;
}

结果

到了这里就回到上面的最后一步，移动三号到正中间，完成五筒布局，

直接加上

display: flex;

justify-content: center;

即可！Soeasy！

完整代码

/* 300*300可以分为9个100*100的区块，五筒布局占其总五个*/
/* 加上换行和主轴与交叉轴分别两端对齐 */
article{
    width: 300px;
    height: 300px;
    background-color: skyblue;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: space-between;
}
div{
    width: 300px;
    height: 100px;
    display: flex;
    justify-content: center;
}

/* 每个项目加上同等大小，不同颜色 */
.box1{
    width: 100px;
    height: 100px;
    background-color: pink;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: rgb(192, 255, 247);
}
.box3{
    width: 100px;
    height: 100px;
    background-color: rgb(95, 18, 76);
}
.box4{
    width: 100px;
    height: 100px;
    background-color: rgb(39, 199, 65);
}
.box5{
    width: 100px;
    height: 100px;
    background-color: rgb(231, 163, 17);
}

结果

总结：

项目都在主轴和交叉轴上移动，但是，轴的位置不一定刚好在那儿，这时候就可以修改HTML结构来辅助控制轴的位置，

最后达到移动项目到自己想要的位置去的目的。（添加包裹层（div）的时候，要分析好位置和大小）