【 Key words 】 : Flex layout

Organized a mind map and put it at the end of the article so that word phobia can be viewed directly at the end.

Learn flex layout in an article

The foreword 0.

I often use float, inline-block layout, for Flex, I only understand, but has not applied, so I decided to take some time to learn, the first write unavoidable bugs, welcome to correct, later irregular continuous update complement.

Let’s start with the definition. What exactly is Flex?

Flex (Flexible Box) : Elastic layout box model, is a new attribute in W3C, in the demo exercise before writing, obviously feel Flex, very convenient, just a few lines of code can achieve the effect of the layout, the function is also very powerful, since the blow so powerful, as the saying goes, no code no truth, let’s take a look at the magic of Flex!

1. Basic concepts

Let’s start with Flex containers and Flex projects. When an element has a Flex layout, it is automatically converted to a Flex container, or container for short. The child elements within the element are automatically converted to items within the container, known as Flex items.

By default, there are two four axes in the container, which are the longitudinal main axis and the cross axis of the vertical main axis. The two axes have their own starting point and midpoint respectively. The starting point of the main axis is main start, and the end of the main axis is main end. The end point is called cross end, and the items are arranged according to the main axis or cross axis. The size of the items along the main axis is called main size, and the size of the items along the cross axis is called cross size. By default, the items are arranged according to the main axis and do not fold by default. When the total item widths are greater than the container widths, the item widths are compressed, even if a fixed width is set.

Flex layout items can be either inline elements (SPAN) or block-level elements (div), and when items are inline elements (see Figure 2), you can set the width and height of the items. In addition, note that the clear and vertical-align properties of flex items are invalid when using flex element float, and the position property can be used normally.

2. Container Properties (Parent: Properties for the Parent)

Container properties contain six properties:

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content
Copy the code

2.1 the flex – direction attribute

The flex-direction attribute is the alignment of items and contains four values.

1. Row (default item arrangement direction) // The main axis of the container is horizontal, where items are arranged from left to right; 2. Row-reverse // The main axis of the container is still horizontal, where items are arranged from right to left; (right-to-left) 3. Column // The main axis of the container is vertical, and the items are arranged from top to bottom; (top-to-bottom) 4. Column-reverse // The main axis of the container is vertical, and the items are arranged from bottom to top; (bottom - to - top)Copy the code

The four graphs correspond to four values of the Flex-direction attribute. ** Container dimensions are 500px wide and 300px high, and each item is a circle with a diameter of 100px **) FIG. 2, FIG. 3 Container spindle is shown in the horizontal direction. When the total width of the item is larger than the container width, the item width is compressed, and the container spindle is in the vertical direction. When the total width/height of the item is smaller than the container, arrange along the spindle according to the set width and height.

It is not hard to see that they do not conform to Figure 4 and Figure 5. The total height of the project we said is greater than the height of the container, and the project is uniformly compressed, that is, Figure 2 and Figure 3. This is because we set line-height: 100px. In the Flex layout, the effect of line height is not eliminated, so the project is not compressed in the container. After setting the line height, the cumulative height of the project is greater than the contents of the container, which is displayed outside the container, due to the setting of over-flow:hidden; Therefore, there is no display in FIG. 4 and FIG. 5. It is not difficult to find that the display of the third brother circle in FIG. 4 is not complete, and the third brother circle in FIG. 5 is the same. So be careful with line numbers in flex layouts;

Flex layout with row height and height

  • Only set row height: when the height of the head office is smaller than the height of the container, items are arranged in the container along the vertical axis. When the height of the head office is larger than the height of the container, items larger than the height of the container overflow the container.

  • Only set the height: when the total height of the item is smaller than the height of the container, the items are arranged in the container in the vertical axis; when the total height of the item is greater than the height of the container, the items are evenly arranged in the container. The maximum total height of the item is the height of the container, and the item will not overflow the container.

  • Simultaneous setting of line height and height: when the total line height and height of the items are less than the container height, they are arranged according to the height. The line height does not affect the span height, but only changes the content position. When the total height of the project and the height of the head office are both greater than the height of the container, the project will overflow the container, as shown in Figure 4 and Figure 5.

2.2 the flex – wrap attributes

The flex-wrap attribute contains three values for whether and how to wrap a line when the total item width exceeds the container width. (Take spindle level as an example)

1. The nowrap// default property is not newline, and each item is compressed within the container; 2. Wrap // If the total width of the item exceeds the container; 3. Wrap-reverse // The excess parts are arranged from bottom to top along the main axisCopy the code

2.3 the flex – flow properties

Flex - flow attribute value for the flex - direction | | flex - wrap two attributes, the default value for the row | | nowrap.

1. .box { 2. flex-flow: row wrap-reverse; 3.}Copy the code

2.4 the justify – content attribute

Flex-flow attribute values are aligned along the main axis, which contains five attribute values; (Take horizontal axis as an example)

1. Flex-start // align items with the starting point of the main axis; 2. Flex-end // Align items with the main axis end; 3. Center // Align the items in the center of the main axis; 4. Space-between // The project starts from the beginning and ends of the main axis, and the middle is equally divided and aligned; 5. Space around // Projects are equally divided and aligned. The sum of the distance between the beginning and the end of the projects is half of the distance between the middle projects;Copy the code

Validates the statement “the distance between the first and last items and the border is half the distance between the middle items” in space-around.

Let’s have four brothers from the circle family verify the process as follows: Firstly, select the first three projects, the first picture in Figure 8, in which the container width is 500px and the circle diameter is 100px. It can be inferred that the project spacing is about 66.66px. According to our conclusion, the distance between the first and last projects and the border should be 33.33px. Set the left value to 33.33px, and we have the result of our third picture. The fourth brother overwrites the third brother. Validates the statement “the distance between the first and last items and the border is half the distance between the middle items” in space-around.

Let’s have four brothers from the circle family verify the process as follows: Firstly, select the first three projects, the first picture in Figure 8, in which the container width is 500px and the circle diameter is 100px. It can be inferred that the project spacing is about 66.66px. According to our conclusion, the distance between the first and last projects and the border should be 33.33px. Set the left value to 33.33px, and we have the result of our third picture. The fourth brother overwrites the third brother.

2.5 the align – the items property

Flex-flow attribute values are aligned along the cross axis, which contains 5 attribute values; (For example, the cross axis is vertical)

1. Flex-start // align items with the starting point of the cross axis; 2. Flex-end // Align items with the end of the cross axis; 3. Center // Center the items in the cross; 4. Baseline // Align the item along the first line of text; 5. Stretch // When the specific size of cross axis direction is not set in the project (height in this example), the size of the project occupies the whole container; (When "stretch" has a newline, for example, when the project is two lines, the project height is 1/2 of the container height)Copy the code

2.6 the align – content attribute

Align-content property values are aligned along the cross axis for multi-line items, while align-items have no effect for single-line items, which contain 6 property values. (For example, the cross axis is vertical)

1. Flex-start // Align multi-line items with the starting point of the cross axis; 2. Flex-end // Align multi-line items with cross axis end; 3. Center // Align items in the center of the cross axis; 4. Space-between // The first and last lines are located at the starting point and end point of the cross axis respectively, and the middle lines are equally divided for alignment; 5. Space-around // Align the items equally, [the distance between the first and last lines is half of the distance between the middle items]; 6. Stretch // When the height is not set, the project occupies the whole container; when there are many rows, the height of the container is divided equally;Copy the code

3. Project Properties (subproperties: Properties for the Children)

Project properties contain six properties:

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. align-self
Copy the code

3.1 the order attribute

The order attribute can be used to define the order of items. The smaller the order value, the higher the order of items in the main list. The default value for all items is 0.

3.2 the flex – turns attributes

The flex-grow property is the enlargement ratio of the project, which specifies how much remaining available space the project occupies. The property value is a number without a unit, Negative numbers are invalid, and the default value is 0. In this case, the size of the project is its own size, and no method can be used.

If all projects flex-grow is set to 1, the remaining space in the container is divided equally among projects. If one of the projects has a value of 2, that project takes up twice as much space as the other projects.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, The remaining space would take up twice as much space as the others (or it will try to, at least). (turn)

The width of the container is 500px, and the diameter of the circle is set to 100px. It is not difficult to calculate the remaining width as 100px. The width of the circle in Picture 13 is 125px, the width of the big one in Picture 14 is 140px, and the width of the rest is 120px. The flex-grow property value allocates the remaining container space in proportion to the flex-grow value.

3.3. The flex – the shrink attributes

The flex-shrink attribute is used to shrink items according to the flex-shrink value. The default value is 1, and negative numbers are invalid. By default, all items can be scaled. However, if set to 0, the project remains at its original size and is not compressed.

The seven shrink brothers in Figure 15 are all scaled to the default flex-shrink value. It is not difficult to calculate that each width is 500/7=71.43px, and the project width is compressed to the same value according to the container width. Although it is known that flex-shrink is compressed when the flex-shrink value is different, what is the basis of the compression? And what is the compression value?

Figure 17 shows that the width of the first brother is 500px, and the width of the other six brothers is 75px. The flex-grow and Flex-Shrink attributes are defined in the opposite way. For example, the size of the circle is set to 100px, the number of items is set to 7, and the total width should be 700px. The actual container width is 500px, and the excess container width is 200px.

Compressed values are: big brother 200/(2+1+1+1+1+1+1)*2=50px; Two younger brother 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px; Three younger brother 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px; Four brother 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px; Five brother 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px; Six brother, 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px; Seven brother 200 / (2 + 1 + 1 + 1 + 1 + 1 + 1) * 1 = 25 px;Copy the code

The actual width of the project is 50px, 75px, 75px, 75px, 75px, 75px. Note: borders are included in width calculations.

3.4 the flex – the basis of attributes

The Flex-basis attribute defines the initial size of the project before the remaining space is allocated according to the shrink factor or grow factor, which can be the same as the width and height attributes (for example, 200px). Flex-basis sets length values with precedence over width and is not overridden by width or height. Its default value is auto, which is the original size of the project.

3.5 Flex Properties (Elastic Box Expansion Reference Value)

The flex attribute is short for the flex-grow, flex-shrink, or flex-basis attribute. The default value is 0, 1 auto. The second and third parameters are optional (flex-shrink, flex-basis). The Flex-basis value can be either a percentage or a specific value, where the percentage is relative to the Flex box. This property can also be set to auto (1 1 auto) and None (0 0 auto). The W3C recommends using this short property instead of three separate properties. The browser will parse the rest.

There are three cases:

  • If flex is a single non-negative value, the shrink value is set to 1 and the flex-basis value is set to 0%.
  • When flex is a two-digit non-negative number, flex-grow and Flex-shrink are set respectively, and the flex-basis value is still 0%.
  • When flex is single non-negative length or percentage, set the flex-basis value;

3.6 the align – self attribute

The align-self attribute defines how an item is aligned with the cross axes in the container. The align-self value of the item can override the align-items attribute. The default value is auto, which inherits the parent element’s align-items attribute. All property values except auto are the same as the align-items value of the container property. (See 2.5, align-items attribute for details)

1. auto
2. flex-start 
3. flex-end 
4. center  
5. baseline 
6. stretch
Copy the code

Reference article:

  • [0] Flex Layout Tutorial: Syntax
  • [1] Flex Layout Tutorial: Examples
  • [2] Flexible layout is compatible with all kinds of pits
  • 【3】A Complete Guide to Flexbox
  • 【4】A Visual Guide to CSS3 Properties