Make a summary every day, persistence is victory!

/** @date 2021-07-07 @description Flex layout */Copy the code

One (sequence)

Flex is an elastic layout, what is elastic, such as DOM and styles below

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

.container {
    width: 400px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
}

.item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: pink;
}
Copy the code

It goes like this:

But set the child element width to200pxAfter that, a line break will occur:

Instead, set the container element toflexAfter the layout is like this, and broadband justCovered withAgain, this is elasticity:

Ii (Containers and Projects)

There are two elements to know about the Flex layout:

The container element, which is the container element above, sets display to flex to enable the Flex layout. The container has the main axis and cross axis by default. The main axis is horizontal by default, and the cross axis is vertical by default

The item element, the item element above, is a child of the container element

Three (container element correlation)

  1. Flex-direction: sets the spindle direction
Row: default value. The main axis is horizontal and starts from the left. Row-reverse: the main axis is horizontal and starts from the right column: the main axis is vertical and starts from the top column-reserve: the main axis is vertical and starts from the bottomCopy the code
  1. Flex-wrap: Sets whether or not to wrap a line. Normally, if the child element width exceeds the container element width (as in the case above), it is an elastic subtracting element width
Nowrap: default value, no line wrap: wrap wrap-reserve: wrap and reverseCopy the code
  1. Context-content: The alignment of project elements on the main axis
Flex-start: default value, left-aligned Flex-end: right-aligned center: right-aligned space-around: the space between items on both sides is half of the space between items in the middle. Evenly evenly split space- instituted: All blanks are evenly splitCopy the code
  1. Align-items: Alignment of item elements on the cross axis
Stretch: default, if the height of the item element is auto or not set, stretch to the entire container element flex-start: line up with the start of the cross axis flex-end: line up with the end of the cross axis center: line up with the center of the cross axis baseline: Align baseline with the first line of the project elementCopy the code

Iv (Project elements related)

  1. Order: Sets the order value of the item elements. The smaller the item elements are, the more advanced they are. The default value is 0

  2. Flex-grow: sets the scale of the project elements, similar to the percentage allocation based on this value. The default is 0(no scaling). For example, if the flex-grow of three elements is 1,2,1, then the middle element is 50% and the other two elements are 25%

  3. Flex-shrink: sets the shrink ratio of project elements. The default value is 1. If the overall width of the project element is larger than the container element, the shrink of the project element is calculated according to this value, for example:

<style>
.container {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    background-color: skyblue;
    display: flex;
    justify-content: space-evenly;
}

.item {
    width: 200px;
    height: 100px;
    background-color: pink;
}

.item1 {
    flex-shrink: 3;
}
.item2 {
    flex-shrink: 3;
}
</style>

<div class="container">
    <div class="item1 item">flex-shrink: 3</div>
    <div class="item2 item">flex-shrink: 3</div>
    <div class="item3 item">flex-shrink: 1</div>
    <div class="item4 item">flex-shrink: 1</div>
</div>
Copy the code

The 200px shrink is calculated based on the sum of the flex-shrink values of all project elements, which is (200/8 = 25px), and the shrink assignment is performed. The width of item1 and Item2 is (200-25 * 3 = 125px). The width of the other two items is (200-25 * 1 = 175px).

  1. Align-self: Alignment of a single item element on the cross axis. You can override align-items. Default is auto, which inherits the align-items property of the container element