This is the 17th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

The emergence of Flex layouts?

In ruan’s article (Flex Layout Tutorial: Grammar – Ruan’s Weblog), I mentioned the context in which Flex layout appeared: a traditional solution for layout, based on a box model, relying on display properties + position properties + float properties. It is very inconvenient for special layouts, such as vertical center, which is not easy to implement.

In 2009, the W3C introduced a new solution, —-Flex layout, that enables easy, complete, and responsive implementation of a variety of page layouts. It is currently supported by all browsers, which means it is safe to use it now.

What is the Flex layout?

Flex is short for Flexible Box, which stands for “Flexible layout” and is designed to provide maximum flexibility for boxed models. In daily development, I prefer to use Flex layouts.

Any container can be specified as a Flex layout.

.box{
  display: flex;
}
Copy the code

Inline elements can also be laid out using Flex.

.box{
    display:inline-flex;
}
Copy the code

Webkit-kernel browsers must be prefixed with -webkit

.box{
    display:-webkit-flex;
    display:flex;
}
Copy the code

Note: With flex layout, the float, clear, and vertical-align attributes of child elements are invalidated.

Flex layout related properties

<div style="display: flex; justify-content: flex-start; width: 500px; height: 100px; border: 1px solid green;" > <div style="width: 80px; height: 50px; background: blue;" ></div> <div style="width: 80px; height: 50px; background: red;" ></div> <div style="width: 80px; height: 50px; background: blue;" ></div> <div style="width: 80px; height: 50px; background: red;" ></div> <div style="width: 80px; height: 50px; background: blue;" ></div> <div style="width: 80px; height: 50px; background: red;" ></div> </div>Copy the code

1. Parent set context-content: flex-start

​

2. Parent set context-content: flex-end;

​

3. Parent container set context-content: center;

​

4. Set context-content: space-around; Means that the child container is evenly distributed along the main axis, and the distance between the child container and the parent container is half of the distance between the child container and the parent container;

​

5. Parent container set context-content: space-between: Children are evenly distributed along the main axis, and the children at both ends are tangent to the parent

​

6. Sub-container Settings

(1) Property value flex

Child containers are elastic (Flex is elastic), they automatically fill the remaining space, and the scale of the child container is determined by the Flex property.

Flex values can be unitary (e.g. 1, 2, 3), unitary (e.g. 15px, 30px, 60px), or the None keyword. The child container is automatically scaled to the size scale defined by Flex, except if it is none.

(2) Mainly by a problem I met today to talk about Flex

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;" > <div style="flex: 3 0 50px; background: blue;" ></div> <div style="flex: 2 0 100px; background: red;" ></div> </div>Copy the code

As shown, the blue color is 80px wide; The red is 120px wide;

Flex: flex-grow flex-shink flex-basis; flex: flex-grow flex-shink flex-basis; 2. Flex-basis represents the original size of the subcontainer without scaling. When the main axis is horizontal, it represents width, and when the main axis is vertical, it represents height. Flex-grow indicates the percentage of the child container's elastic stretch. Flex-shink indicates the percentage of elastic shrinkage of the child container. 3. In the above code, the left div is 50px and the right div is 100px; Remaining space 200-100-50 = 50 In the remaining space, the left side is extended in proportion to 3 parts, and the final width is 80. The right side is extended in proportion to 2 parts, and the final width is 120Copy the code

If you change the above code: the left box is 150px, as shown in the picture, because there is no space left, it will not be stretched;

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;" > <div style="flex: 3 0 150px; background: blue;" ></div> <div style="flex: 2 0 100px; background: red;" ></div> </div>Copy the code

If the above code is modified: the left box is 150px, and the left box is zoomed in 2 times, as shown in the picture.

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;" > <div style="flex: 3 2 150px; background: blue;" ></div> <div style="flex: 2 0 100px; background: red;" ></div> </div>Copy the code

<div style="display: flex; width: 200px; height: 100px; border: 1px solid green;" > <div style="flex: 3 0; background: blue;" ></div> <div style="flex: 2 0; background: red;" ></div> </div>Copy the code

Note:

(1) If the flex-basis attribute is not set, that is, flex-basis: 0, then the elastic box calculates the width of excess space or overflow space according to its width value, if width is not set, then it is the width of its content;

(2) If both the flex-basis attribute and width are set, then the width value is ignored;

(3) Flex-basis can be set to a percentage, relative to elements whose ancestors declare display:flex.

Flex: 1 1 auto; Flex: 0 0 auto

Flex is an abbreviation for flex-grow, flex-shrink, or flex-basis, as mentioned in the above attribute.

The default value of flex-grow is 0, which means it does not expand even if there is free space.

The default value of flex-grow is 1, which means it will scale down if space is insufficient.

Calculation rules for Flex layouts

(1) When the child box is smaller than the parent container

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .container { display: flex; width: 400px; } .container > div { height: 40px; } .first { flex: 1 0 0; background-color: red; } .second { flex: 2 0 0; background-color: blue; margin: 0 50px; } .third { flex: 3 0 0; background-color: yellow; } </style> </head> <body> <div class='container'> <div class='first'></div> <div class='second'></div> <div class='third'></div> </div> </body> </html>Copy the code

In the code above, we define the outer container width to be 400px, but the second margin to be 100px. The Flex-basis property now has a value of 0, leaving 300px space. The remaining space is allocated based on the flex-Grow property value of each box and its weight

.first width 300 * (1/6) = 50px. Second width 300 * (2/6) = 100px

(2) When the child box exceeds the parent container

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .container { display: flex; width: 200px; height: 400px; border: 1px solid #c3c3c3; } .first { flex-basis: 40px; flex-shrink: 1; background-color: red; } .second { flex-shrink: 3; background-color: blue; width: 200px; } .third { flex-basis: 40px; flex-shrink: 2; background-color: yellow; } </style> </head> <body> <div class='container'> <div class='first'></div> <div class='second'></div> <div class='third'></div> </div> </body> </html>Copy the code

In the code above, the parent container defines a width of 200px because flex-basis replaces the width attribute.

So, the subproject width is (200+40+40) = 280px and the overflow is 80px.

First calculate the weighted value: 1*40 + 3 * 200 + 2 *40 = 720 px

.first Zoom out value: (40 * 1/720) * 80 = 4.44px. Second Zoom out value: (200 * 3/720) * 80 = 66.67px. First zoom out value: (40 * 2/720) * 80 = 8.89pxCopy the code

So we can figure out the width of each box

35.56 px 133.33 px 31.11 pxCopy the code

Happy Ending.