当前位置：网站首页>Flex layout and usage

Flex layout and usage

2022-07-07 04:44:00 【From one to one】

The goal is ： Able to use Flex Layout model flexible 、 Fast The development of web pages

Flex Layout is also called elastic layout , It's a browser promote Layout , Make the layout more Simple 、 flexible , Can also Avoid floating off standard problem . When the height of the container is uncertain , Use float Horizontal arrangement of floating layout will lead to separation from document flow , It can be used at this time flex Layout .

Key summary ：

Add elastic layout ：display:flex;
Center the spindle ：justify-content: center;
The spindle spacing is between children ：justify-content: space-between;
The distance between all parts of the spindle is equal ：justify-content: space-evenly;
The spindle spacing is surrounded on both sides ：justify-content: space-around;
The side axis is centered ：align-items: center;
A child of the side axis is centered ：align-self:center;
When the child has no width , The child width is the content width
When the child has no height , The height of the child is the height of the container

Usage mode ：

Father Element to add display:flex, Child elements can be extruded or stretched automatically .

Components ：

Elastic container （ Parent ）
Elastic box （ Sub level ）
Spindle
Side axle / Cross shaft

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /*  Visual effect :  The children are arranged in a row / Horizontal arrangement  */
            /*  Horizontal arrangement :  The default spindle is horizontal ,  Elastic boxes are arranged along the main axis  */
            display: flex;
            height: 200px;
            margin-top: 30px;
            border: 1px solid #000;
        }

        .box div {
            /* When the child has no width set , The width of the box is the width of the content */
            /*width: 100px;*/
            height: 100px;
            background-color: pink;
        }
</style>

Just add flex, Sub elements are automatically extruded

stay Flex In the layout model , Can be adjusted The alignment of the spindle or side axis To set the spacing between boxes .

Spindle alignment ：

to Father Element to add justify-content: Property value ;

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        
        /*  effect 1： In the middle  */
        /*justify-content: center;*/

        /*  effect 2： The spacing is in the elastic box ( Sub level ) Between  */
        /*justify-content: space-between;*/

        /*  effect 3： All places are equally spaced  */
        /*justify-content: space-evenly;*/

        /*  effect 4： The spacing is surrounded on both sides of the child  */
        /*  Visual effect :  The distance between children is the distance between the two ends of the parent 2 times  */
        justify-content: space-around;
        
        width: 400px;
        height: 200px;
        margin:30px auto;
        border: 1px solid #000;
    }
    
    .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

Side axis alignment ：

Control all children ： to Father Element to add align-items: Property value ;
Control a child ： to Son Element to add align-self: Property value ;

stretch Is the default value of the side axis , In this mode Children have no height when , The height will be stretched to the same height as the parent .

<body>
    <div class="box">
        <div>1111</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;

            /*  effect 1： All children are centered  */
            /* align-items: center; */

            /*  effect 3： The tensile , The default value is ( Existing status , When testing, remove the height of children ) */
            align-items: stretch;
            width: 400px;
            height: 200px;
            margin: 30px auto;
            border: 1px solid #000;
        }
        
        .box div {
            width: 100px;
            /* height: 100px; */
            background-color: pink;
        }

        /*  effect 2： Set the side axis alignment of an elastic box separately  */
        .box div:nth-child(2) {
            /* align-self:center ; */
        }
        
    </style>

Expansion ratio ：

to Son Element to add flex: An integer value ; The integer value is occupy parent Remaining dimensions Number of copies .

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 400px;
            height: 300px;
            margin: 30px auto;
            border: 1px solid #000;
        }

        .box div {
            height: 200px;
            margin: 0 10px;
            background-color: pink;
        }

        .box div:nth-child(1) {
            width: 50px;
        }
        .box div:nth-child(2) {
            /*  The number of copies of the remaining size of the parent  */
            flex: 3;
        }
        .box div:nth-child(3) {
            flex: 1;
        }
        
    </style>

The above code , Sub level 1 For a fixed width , Sub level 2、3 Is the occupation width . Parent width minus child 1 Size and children 2 And children 3 After the size of the outer margin , The remaining dimensions are divided into 3+1=4 Share , Including children 2 Width share 3 Share , Sub level 3 Width share 1 Share . The remaining size of the parent can be divided into integer parts at will ,1+2、3+4、2+7 You can wait .