Display flex arrangement in CSS (layout tool)

Regarding display: flex layout, some people have a deep understanding of it, and I also learned from others' work.

display: I have no idea what flex layout is or its basic concepts, I just know how to use it. Whenever I see something like a concept, I just glance over it.

First property and usage: flex-direction

There are 4 methods I know of: row (horizontal arrangement), row-revese (horizontal reverse arrangement), column (vertical arrangement), column-reserve (vertical reverse arrangement)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

The above code and effect diagram are the effects when the attribute is row

Note: Although the width is set, the parent container is only 300px, and the child div cannot reach 100px, but adapts to the parent container

Just replace the flex-direction: row code with flex-direction: row-revese or flex-direction: column or flex-direction: column-reserve to get different effects.

Here is the effect diagram:

row-revese

-------

column

-------

column-reverse

-------

The second property and usage: flex-wrap

These are the line break properties: nowrap (no line break), wrap (line break), wrap-reverse (direction line break)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

This is the code and effect diagram of the line break

-------

Replace the property flex-wrap: wrap with nowrap (no line break) and wrap-reverse (direction line break) to get the following effect:

nowrap

-----

wrap-reverse

---------

The third attribute and usage: justify-content

（這些屬性都是抄別人的）

flex-start (default): left-aligned;

Align Left

flex-end: right alignment

Right Align

center: centered;

Center alignment space-between: Align both ends, with equal spacing between items;

Alignment space-around: The spacing on both sides of each item is equal, that is, the spacing between items is twice as large as the spacing between items and borders.