Five Flex tube layout: Where you want to go where it will get started

Directly on the issue:

　　　　　　Implement a five item container, according to the layout position mahjong five cylinder

HTML code Article This article was a simple (container), five sectionTop (layout)

<!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>

Most people thought normal CSS code

/ * 300 * 300 may be divided into nine blocks of 100 * 100, five of its total five cylinder layout * / 
/ * plus wrap and the spindle axis cross each justification * / 
Article This article was { 
    width : 300px by ; 
    height : 300px by ; 
    background-Color : Skyblue ; 
    the display : Flex ; 
    Flex-wrap : wrap ; 
    align = left-Content : Space-BETWEEN ; 
    The justify-Content : Space-BETWEEN ;
}

/ * Each item plus the same size, different color * / 
.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);
}

got the answer

Left the last step, the number 2 is moved to the middle,

Flex containers and items have six properties, you will find that no matter how their brains, there is no way to move an item to go to the middle,

Even the addition of the code, and even no response

Figure added a single project properties, but regardless of the value of flex-end, or center, it simply do not have the response,

Think really like, but change method of moving reverse the order, in any case, the result will be the same: not materialize.

Solution: Adjust the thinking out of the dead end dead

Flex container defines the most important points: the spindle and the cross-axis, project the two axes are moved, but only the shaft is the beginning, middle and end,

In theory these two axes can fill the entire container, then the above items can be in any position, then!

Want to control the block on the page to where they want to go, you can not just rely on Flex, Flex can also be combined to achieve the results you want by modifying the HTML structure.

Modify HTML, plus a 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>

result

Modify CSS, div size control, so that the third item wrap

div{
    width: 300px;
    height: 100px;
}

result

Here back to the last step above to move to the middle III, five complete cylinder layout,

Direct Plus

display: flex;

justify-content: center;

You can! Soeasy!

The complete code

/ * 300 * 300 may be divided into nine blocks of 100 * 100, five of its total five cylinder layout * / 
/ * plus wrap and the spindle axis cross each justification * / 
Article This article was { 
    width : 300px by ; 
    height : 300px by ; 
    background-Color : Skyblue ; 
    the display : Flex ; 
    Flex-wrap : wrap ; 
    align = left-Content : Space-BETWEEN ; 
    The justify-Content : Space-BETWEEN ;
}
div{
    width: 300px;
    height: 100px;
    display: flex;
    justify-content: center;
}

/ * Each item plus the same size, different color * / 
.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);
}

result

to sum up:

Projects and the spindle axis cross movement, however, is not necessarily the position of the shaft just there, this time can be modified HTML structure to assist the position of the control shaft,

And finally to move the project to the destination location you want to go. (Add parcel layer (div) the time to analyze the good location and size)