Lu Xun said: moving bricks day from flex layout.
One: the use of flex layout
Flex layout differs from the traditional box model in that it determines the position of elements by how they are arranged on the main and secondary axes.
You can set the Flex layout with display: flex.
A Flex layout has two axes by default. main axis / cross axis
Horizontal is the main axis and vertical is the cross axis.
The main axis starts at main and ends at main end and the secondary axis starts at cross start and ends at cross end
Two: Flex layout properties
1. Flex-direction: Property determines the direction of the main axis. That’s how the elements are arranged on the principal axis.
Flex-direction: row: indicates that the main axis is horizontal from left to right.
Flex-direction: row-reverse: reverse.
Flex-direction: column: indicates that the main axis is in the vertical direction and the starting point is at the top.
The flex – direction: colom – reverse: instead
2. Flex-wrap: Property determines how to arrange on the axis.
Wrap: spindle wrap, next column wrap.
Nowrap: No line breaks (default)
Wrap-reverse: newlines on the previous line.
3.justify-content
This property defines the arrangement on the main axis.
justify-content: center
justify-content: flex-start
justify-content: flex-end
justify-content: space-betwteen
justify-content: space-around
Notice the difference between space-between and space-around.
Space-between is aligned at both ends, and the children are equally spaced.
Space-around means that each child element is spaced equally on both sides, and the space between all children is double the space between the element and the border.
4.align-items
Align-items defines how elements are arranged on the sub-axis.
1. Flex-end: end alignment
2. Flex-start: Start alignment
You’re in the center
4. Stretch: If the height of the project is not set or auto is set, the whole height of the container will be occupied.
E.g. Baseline alignment of the first line of text of a project.
Three: Flex layout element attributes
1. Surplus space is insufficient space
In a Flexbox layout, a Flex container contains one or more Flex items (child elements or child nodes of the container). Flex containers and Flex projects have their own size, so the sum of the Flex project size is greater than or less than the Flex container.
- When the sum of all Flex project sizes is less than the Flex container, the Flex container has extra Space that has not been filled. This Space is called the Flex container’s Free Space.
- When the sum of all Flex items is greater than the size of the Flex container, there is not enough Space in the Flex container to accommodate all Flex items. This extra Space is called Negative Free Space.
2. Calculation problems of Flex project
In the Flexbox layout, flex-grow, Flex-shrink, and flex-basis all affect the calculation of flex projects.
1. The flex – the basis properties
Define the flex element width attribute at browser initialization time. The default value is auto. The browser will first parse whether or not you set the element’s width. If you set width: 200px; The flex-basis value is 200px.
If your Flex project has no width set and flex-basis defaults to auto, the browser will parse the internal content to determine the size of the Flex project.
Item1 width is 500px; Although the width is set, the flex-basis value is used.
Item2 does not set width. Default flex-basis is width.
Item3 Flex-basis: auto, the internal content is parsed based on the internal content.
A quick summary:
flex-basisThe default value isauto- If the Flex project is explicitly set
widthValue, at the same time,flex-basisforauto, the width of the Flex project is presswidthTo calculate, if not explicitly setwidthIs calculated by the content width of the Flex project - If the Flex project is explicitly set
widthValue, while explicitly setflex-basisIs ignored by the Flex projectwidthValue, will pressflex-basisTo calculate the Flex project - The actual width of the Flex project is not pressed when the Flex container has insufficient free space
flex-basisTo calculate, will be based onflex-growandflex-shrinkThe value set assigns space to the Flex project - For Flexbox layouts, it is not recommended to explicitly set the Flex project
widthValue, but throughflex-basisTo control the width of Flex projects for more flexibility - If the Flex project is explicitly set
min-widthormax-widthWhen the valueflex-basisThe calculated value is less thanmin-widthThen themin-widthValue sets the Flex project width, otherwise the calculated value is greater thanmax-widthValue, pressmax-widthSets the Flex project width.
2. Flex-grow: The expansion factor of flex
When a Flex container has a certain amount of free space, flex-Grow allows Flex projects to allocate the remaining space of the Flex container, and each Flex project will expand according to the Flex-Grow factor, making Flex projects spread across the entire Flex container (efficient use of the remaining space of the Flex container). Flex-grow defines the zoom scale of the project, which defaults to 0, or does not zoom if there is free space
- All Flex projects are set the same
flex-growvalue - Each Flex project is set differently
flex-growvalue
Case 1: Flex-grow is equal and both flex-grow values are greater than or equal to 1
Initial value: Item1 == Item2 == Item3 == Item4 == 200
Flex-grow: Item1 == Item2 == Item3 == Item4 == 1
Current value: Item1 == item2 == Item3 == Item4 == 316
Total width 1264: Remaining container: 1264-4 * 200 = 464
The sum of flex-grow is 4, ratios of each element, flex-grow(single)/flex-grow(total) == 1/4.
WidthNow = widthBefore + 464 * ratios = 200 + 116 = 316;
Case 2: Flex-grow set to 1/2/3/4 (Flex-grow: unequal)
Put the Flex project
Set them to 1:2:3:4. That is, the remaining Flex container space is divided into 10 portions (1 + 2 + 3 + 4 = 10), and each Flex item occupies 1/10, 2/10, 3/10, and 4/10 of the remaining Flex container space, respectively. For the above example, the remaining Flex container space is 180px, so the length of each piece is 180px / 10 = 18px, so the width of each Flex item becomes:
- Flex1:200px + 18px = 218px;
- Flex2:200px + 18px * 2 = 236px;
- Flex3:200px + 18px * 3 = 254px;
- Flex4:200px + 18px * 4 = 272px;
Case 3: Flex is set to a decimal and the sum of all flex-grow values is less than 1
Flex-grow can also be set to a value less than 1. It is the same calculation, except that if the sum of all flex-grow values is less than 1, the child element has not allocated the container and still has the remaining size.
Calculation:
Screenwidth-itemwidth * 4 = 1264-800 = 464;
OvcWidth = 464 *.8 = 371.2;
ItemWidth = 200 + 371.2 * 1/4 = 292;
2. The flex – the shrink properties
Flex-shrink is similar to Flex-grow, except that flex-shrink is used to control the flex project scaling factor. When the sum of the Flex project widths is greater than the Flex container, the Flex container will overflow (when flex-wrap is nowRAP). Flex-shrink then allocates the insufficient Flex container space according to the numerical scale set by the Flex project. That is, it shrinks itself by a scaling factor to prevent overflow of the Flex container. Flex-shrink defines the shrink scale of a project, which defaults to 1, that is, if there is insufficient space, the project will shrink
Flex-shrink receives a
value, which defaults to 1. That is, all Flex projects shrink by default whenever the container is not wide enough to hold them all. If you don’t want Flex projects to shrink, you can set the value to 0 and Flex projects will always keep their original fit-Content width. Similarly, flex-shrink does not accept a negative value as an attribute value.
Case 1: Flex-shrink is equal and greater than or equal to 1
The calculation is similar to flex-grow: the width of the element minus the allocated shrink width
ShrinkWidth === (400 * 4-1264) * 1/4 = 84;
width = 400 – 84 = 316px;
Case 2: Flex-Shrink does not want to wait
ShrinkWidthRatio === (400 * 4-1264) * 1/10;
item1 = width – shrinkWidthRatio * 1 = 366
item2 = width – shrinkWidthRatio * 2 = 332
item3 = width – shrinkWidthRatio * 3 = 299
item4 = width – shrinkWidthRatio * 4 = 256
Case 3: Flex-shrink can also be set to a value less than 1. For example, we set a flex-shrink value of 0.2 for all Flex projects. When the total flex-shrink factor for all Flex projects is less than 1, the Flex container will not be fully allocated and will still overflow the Flex container.
To sum up:
In most cases, flex properties are used to set the flex value of a Flex project. The effects of common values are as follows:
flex: 0 autoandflex:initial, these two values andflex: 0 1 autoSame as the initial value. Depending on thewidthProperty determines the size of a Flex project. A Flex project cannot expand when the Flex container has free space; When the Flex container runs out of space, the Flex project shrinks to its minimummin-content.flex: autowithflex: 1 1 autoThe same. The Flex project will be based onwidthTo determine the size, but you can completely extend the remaining space of the Flex container. If all Flex projects areflex: auto,flex:initialorflex: noneAfter the Flex project size is determined, the remaining Flex container space will be evenly divided intoflex:a utoFlex project.flex: nonewithflex: 0 0 autoThe same. Flex project based onwidthDetermines the size, but is completely non-scalable, its effect andinitialSimilarly, in this case, the Flex project will not shrink even if the Flex container runs out of space and overflows.flex: <positive-number>(positive) andflex: 1 0pxThe same. This value makes the Flex project scalable and willflex-basisValue is set to0Causes the Flex project to calculate the remaining space of the Flex container based on the scale factor set. If all Flex projects use this mode, their size will be proportional to the specified scaling ratio.