Flex layout is also called elastic layout = flex layout = elastic box layout

When we set the parent box to Flex, the float, clear, and vertical-align attributes of the child elements are invalidated

Flex principle

Control the placement and arrangement of child boxes by adding flex properties to the parent box

1. The flex – direction attribute

Values: the row (the default) | row – reverse | column | column – reverse

Flex layout starts with the main axis and side axis. Flex-direction allows you to set the main axis, and the rest is the side axis

    <style>
    .box {
        display: flex;
        flex-direction: row;
        width: 500px;
        height: 500px;
        border: 1px solid;
    }

    .box span {
        width: 50px;
        height: 50px;
        margin: 10px;
    }

    .span1 {
        background: pink;
    }

    .span2 {
        background: greenyellow;
    }

    .span3 {
        background: burlywood;
    }
</style>

<div class="box">
    <span class="span1">1</span>
    <span class="span2">2</span>
    <span class="span3">3</span>
</div>
Copy the code

Parent set flex-direction: row; And then the principal axis, the horizontal axis, the subset will go left to right

    <style>
        .box {
            display: flex;
            flex-direction: row-reverse;
            width: 500px;
            height: 500px;
            border: 1px solid;
        }

        .box span {
            width: 50px;
            height: 50px;
            margin: 10px;
        }

        .span1 {
            background: pink;
        }

        .span2 {
            background: greenyellow;
        }

        .span3 {
            background: burlywood;
        }
    </style>

    <div class="box">
        <span class="span1">1</span>
        <span class="span2">2</span>
        <span class="span3">3</span>
    </div>
Copy the code

Parent set flex-direction to row-reverse; And then the principal axis, the horizontal axis, the subset will go from right to left

justify-content

Context-content sets the arrangement of child elements on the main axis

attribute instructions
flex-start The default is to start from scratch, such as left to right if the main axis is X-axis
flex-end I’m going to start at the tail
center Center the axis horizontally if the axis is X-axis
space-around Bisect the rest of the space a little bit between the two sides
space-between Edge each side and then divide the rest of the space
Let’s take a look at each one

Context-content: flex-start aligns ab initio along the colorimetric axis. In many cases, the colorimetric axis is not set to us and is equivalent to flex-direction:row

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
        }
        .box span {
            width: 100px;
            height: 100px;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

The flex – end | arrangement from the tail

  <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
        }
        .box span {
            width: 100px;
            height: 100px;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

justify-content: center; | in the spindle center alignment if the spindle is x axis horizontal center

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .box span {
            width: 100px;
            height: 100px;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

justify-content: space-around; Bisect the rest of the space a little distance between the two sides (the distance between the two sides is half of the middle distance)

 <style>
     .box {
         width: 500px;
         height: 500px;
         border: 1px solid;
         display: flex;
         flex-direction: row;
         justify-content: space-around;
     }
     .box span {
         width: 100px;
         height: 100px;
     }
     .box span:nth-child(1) {
         background: blanchedalmond;
     }
     .box span:nth-child(2) {
         background: greenyellow;
     }
     .box span:nth-child(3) {
         background: pink;
     }
 </style>
 <div class="box">
     <span>1</span>
     <span>2</span>
     <span>3</span>
 </div>
Copy the code

justify-content: space-between;

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .box span {
            width: 100px;
            height: 100px;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

We set the axis to y and then justify-content: center; Look at the effect

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .box span {
            width: 100px;
            height: 100px;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

Copy the code

It was fun, wasn’t it?

2. The flex – wrap attributes

Flex-wrap sets whether or not the element is wrapped

In Flex, child elements are not wrapped by default. If they cannot be wrapped, they are shrunk and placed inside the parent element

attribute instructions
nowrap No line breaks by default
wrap A newline
Let’s take a look at each one 
```
 <style>
    .box {
        width: 300px;
        height: 300px;
        border: 1px solid;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        flex-wrap: nowrap;
    }
    .box span {
        width: 100px;
        height: 100px;
    }
    .box span:nth-child(1) {
        background: blanchedalmond;
    }
    .box span:nth-child(2) {
        background: greenyellow;
    }
    .box span:nth-child(3) {
        background: pink;
    }
    .box span:nth-child(4) {
        background: blanchedalmond;
    }
    .box span:nth-child(5) {
        background: greenyellow;
    }
    .box span:nth-child(6) {
        background: pink;
    }
</style>
<div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
</div>
```
Copy the code

  <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
        .box span:nth-child(4) {
            background: blanchedalmond;
        }
        .box span:nth-child(5) {
            background: greenyellow;
        }
        .box span:nth-child(6) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

Align -content: flex-start; align-content: flex-start; Ok, we’ll talk about this property later, but let’s look at the effect

  <style>
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
        .box span:nth-child(4) {
            background: blanchedalmond;
        }
        .box span:nth-child(5) {
            background: greenyellow;
        }
        .box span:nth-child(6) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

Align-items property align-items sets the arrangement of child elements on the side axis (single line)

attribute instructions
flex-start Defaults from top to bottom
flex-end From the bottom up
center Cluster together center (vertical center)
stretch The tensile
Let’s take a look at each one

Flex-start is displayed in a single line from top to bottom

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

flex-end

  <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            align-items: flex-end;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

Center The lateral axis is single-row centered

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

align-items:stretch; Stretch, the subset doesn’t set the height, and then it will stretch to full

 <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            align-items: stretch;
        }
        .box span {
            width: 100px;
            /* height: 100px; */
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
Copy the code

2. The align – content attribute

Align-content sets the arrangement of child elements on the side axis (multiple lines)

In Flex, child elements are not wrapped by default. If they cannot be wrapped, they are shrunk and placed inside the parent element

attribute instructions
flex-start By default, the alignment starts from the head of the side axis
flex-end The lateral axis is aligned from the tail
center Display in the center of the side axis
space-around The subterm bisects the remaining space on the lateral axis
space-between Edge each side and then divide the rest of the space
stretch Sets the height of the child element to equal the height of the parent element
Let’s take a look at each one

The align – items: flex – start;

  <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-start;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
        .box span:nth-child(4) {
            background: blanchedalmond;
        }
        .box span:nth-child(5) {
            background: greenyellow;
        }
        .box span:nth-child(6) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

align-items:center

  <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
        .box span:nth-child(4) {
            background: blanchedalmond;
        }
        .box span:nth-child(5) {
            background: greenyellow;
        }
        .box span:nth-child(6) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

align-content:flex-end;

<style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: flex-end;
        }
        .box span {
            width: 100px;
            height: 100px;
            margin-top: 0;
        }
        .box span:nth-child(1) {
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
        }
        .box span:nth-child(3) {
            background: pink;
        }
        .box span:nth-child(4) {
            background: blanchedalmond;
        }
        .box span:nth-child(5) {
            background: greenyellow;
        }
        .box span:nth-child(6) {
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

6. The flex – flow properties

Flex-flow compound property, equivalent to setting both flex-direction and flex-wrap

For example: flex-flow: row wrap;

This is equivalent to flex-direction: row; flex-wrap:wrap;

Second, the project attributes

1. Order attribute: defines the order of items. The smaller the value is, the higher the order will be.

Order: an integer

2. Flex-grow property: defines the expansion ratio of the project. When there is free space, the project will be enlarged according to this value

If all projects have a flex-Grow attribute of 1, they divide the remaining space equally, if any. If one project has a flex-grow attribute of 2 and all the other projects are 1, the former takes up twice as much free space as the other items.

3. The Flex-shrink attribute: defines the shrink scale of a project. The default is 1, that is, if there is insufficient space, the project will shrink

If all projects have a Flex-shrink attribute of 1, they are scaled equally when space is insufficient. If the flex-shrink attribute is 0 for one project and 1 for all other projects, the former does not shrink when space is insufficient.

Negative values have no effect on this property

4. The Flex-basis property defines the main size of the project before allocating extra space. Based on this property, the browser calculates whether the main axis has extra space. Its default value is Auto, the original size of the project.

You can set it to the same value as the width or height attribute (such as 350px) and the project will take up a fixed space.

5. Flex property: short for flex-grow,flex-shrink, and flex-basis. The default value is 0. The last two attributes are optional

This property has two shortcut values: auto (1 1 auto) and None (0 0 auto)

Align-self property: allows a single item to have a different alignment from other items, overwriting the align-items property. The default value is auto, which inherits the align-items property of the parent element. If there is no parent element, it equals stretch

There are six attribute values: auto | flex – start | flex – end | center | baseline | stretch

flex:1;

Flex: The flex property defines the amount of remaining space allocated to the child element

.item {
     flex:<number>;  // default 0
}
Copy the code

For example, implementing a Holy Grail layout in Flex

<style>
        .box {
            width: 100%;
            height: 500px;
            border: 1px solid;
            display: flex;
        }
        .box span {
            width: 100px;
            /* height: 100px; */
            margin-top: 0;
        }
        .box span:nth-child(1) {
            width: 200px;
            background: blanchedalmond;
        }
        .box span:nth-child(2) {
            background: greenyellow;
            flex: 1;
        }
        .box span:nth-child(3) {
            height: 200px;
            background: pink;
        }
    </style>
    <div class="box">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
Copy the code

Wechat search front-end architect Qdleader, can enter the group, and the daily update of the front-end interview question bank github.com/qdleader/qd… Come on, progress together!