Preparatory work
Wechat small program often used in the layout of the knowledge point, if there is no complete knowledge system, in the layout, there will often be the wrong use of the situation, as long as you master the knowledge point in this article, basically competent for all Flex layout. Compared to other articles, this article focuses more on the practical application of development. It also explains the effects of various layouts from an evolutionary perspective.
Preparation: In order to cover the basics of requesting Flex layouts, we need to edit some sample code in advance;
First, we need to go to classic.wxml and write the following code, which is basically three view tags;
Then, go to Classic.wxss and set the corresponding styles.
The final result should look something like this. You’ll notice that three little squares of different colors appear.
Block and inline with the inline – block
After you’ve written the setup, think about why the three squares are arranged from top to bottom instead of left to right.
A: Actually small program of “the view” is similar to the div webpage THML, so if you are familiar with div, you will know that it is a block-level element, then the block-level elements, each element by default is a line, even though that you limit the block-level elements of high of 100 px wide, but essentially, it is also a block-level elements, then it must be a line, It doesn’t care how wide your block-level element is, it just starts on another line. This is the basics of CSS.
In fact, wechat applet hides a setting in the View TAB. This setting is the default, so you can do this without filling it in.
# display:block // By default, block is placed downwards.
Copy the code
If we want to arrange the color blocks horizontally, what do we need to do?
Normally, we just need to set display to inline. That’s it. Then we might as well give it a try.
Once you set it up, run it, and you’ll see it’s blank. Why is that?
Answer: This is because the default number of inline elements cannot be set to height and width. In fact, through wechat small program tools can also see that there is a problem here.
So how to solve the problem of full screen blank?
A: It’s pretty easy. Just change inline to inline-block. It is compatible with setting the width and height on the inline elements, and can set the inline elements to horizontal layout.
There is a problem here, the display=”inline-block” setting usually appears in the webpage Settings, wechat applets generally do not set this way. If we don’t set display=”inline-block” now, how can we make horizontal layout?
A: Here you need to use the Flex layout Settings to achieve the same effect. Instead of using block, inline, and inline-block;
Flexible box model display: Flex
Before using Flex layout, we need to know what Flex is?
A: Flex stands for Flexible box, also known as flexible layout.
When it comes to elastic boxes, there are two basic concepts to know. The first is a Flex Container and the second is a Flex Item.
# Flex Container: Elastic container
# flex item: refers to the "child" under the "elastic container".
Copy the codeExplanation: If you want to use an elastic layout, you need to have at least a Flex container.
So if we need to make elastic layout of small color blocks, we must add a Flex container to the small color blocks. Actually, it is quite easy to use in the project, we just need to add a view tag to the outside, as shown below.
Notice here we’ve given the elastic container the view tag, we’ve set the style container, and that’s just a little bit of code, which means we’ve added the elastic container
Then set the Container to the “Elastic box model” and run it. You’ll see that it looks the same as before. This simple line of code replaces the display: inline-block set earlier in chunk
You will find that by using the elastic box model, the blocky character is eliminated. Blocky features: block-level elements must occupy one line, it doesn’t matter how wide the block-level elements are, they will be placed on another line. Remove the blocky feature, and the color blocks will line up. Create the effect above.
# If several elements are originally blocky elements, once they are placed in an elastic box, the blocky elements will be removed.So why do I have to make this point, because when you're writing code, you'll often find that you already have an elastic box on the outside, but a lot of you will put it in the children of the container, right"display:inline-block"Once you set the elastic box model in the container, you don't need to add the children of the container at all"display:inline-block". As soon as the elastic box model is set in the container, the lumpy nature is eliminated. Block elements are automatically placed in a row. In that case, we don't need it anymore"display:inline-block"Otherwise, many times at one stroke.Summary: The Flex container will eliminate the blocky nature of item
Copy the codeThe use of flex – direction
We need to know that flex-direction is used to set the orientation of the elastic box model;
# flex-direction=column; Vertical arrangement
# flex-direction: row; Horizontal layout (default)
Copy the codeColumn is arranged vertically
Our color blocks are horizontal, so how do I set the color blocks to vertical?
It’s actually pretty simple, we can use flex-direction=column; The color blocks are arranged vertically.
Similarly, if we want to set the color block to horizontal, we can choose not to set it, or use flex-direction=row; It’s possible.
Reverse Indicates the reverse order
In order to get a better understanding of the reverse arrangement, let’s make the necessary changes to the code.
And then we add 1, 2, 3. This way, when setting the layout in reverse order, the effect will be more prominent.
Now we can use reverse to set the order. We just need to set it to Flex-direction :column-reverse; You can change the color blocks into reverse order, as shown below;
If we only look at the numbers, it is easy to feel that the position of the color block has changed, the whole is in the original upper left part; But if we try using a horizontal reverse arrangement, a strange phenomenon will occur.
Let us compare the effect of horizontal arrangement and positive arrangement
It is not hard to notice that when set to horizontal and in reverse order, the color block as a whole moves to the far right. But why doesn’t that happen when you go up and down? Isn’t that strange? So what are the rules?
Horizontal and in reverse order, moving to the right. The reason why the overall vertical and reverse order does not change is that the height of the vertical and reverse order is not enough, so that the vertical and reverse order cannot move down. In order to show this effect, let’s look below.
To illustrate this, let’s open up the debugger. Use the grabber tool in the debugger.
So how can the user see that vertical reverse order actually moves down?
By default, the width of the elastic layout is 100%, and the height is dynamic (adaptive). In other words, the height of the elastic layout is the same as the height of the whole color block.
Copy the codeNow that we know how this works, we can try to set the height of the container to 400px.
The first thing we need to know is that each color block is 100px. This means that the three color blocks add up to 300px, so if the vertical order is moving down, the final effect will naturally move down. We might as well try.
You will notice that the whole block of color has moved (down). In order to see the effect more intuitively, we will use the gripper tool to look at it.
Let’s think about it, how do we know the direction of the color block if we don’t bother using the gripper tool later on?
It’s actually pretty simple, we just need to add a background color. The same effect can be achieved. The disadvantage is that you don’t know the height. If you need to know what the height is, it’s better to use the gripper tool.
Below we do a regular summary of the above now, convenient for more agile development in the future:
There are four ways to use flex-direction
# flex-direction: row; // Horizontal and in order (upper left corner)
# flex-direction:column; // In vertical order (upper left corner)
# flex-direction: row-reverse; // Horizontally and in reverse order (upper right corner)
# flex-direction:column-reverse; // Vertically and in reverse order (lower left)
--------------------------------------------------------------------
Rule: For views (specifically containers), if you do not specify the width, the default is 100%, but the height is special, and the default is adaptive.
Copy the codeThe Justify – content attribute
The context-content attribute is used to set the alignment direction
The context-content attribute defines the alignment of items on the main axis. -------------------------------------------------------------------# flex-start (default) : left-align
# flex-end: right-align
# center: a center
# space-between: align both ends so that the spacing between items is equal.
# space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
Copy the codeBefore using the Justify-content attribute, we need to know that the Justify-content attribute is affected by flex-difection sorting. What does that mean?
A: Simply put, when our color blocks are in horizontal order, they will appear according to the above rules.
A. horizontal order
Upper left alignment
Flex-start (default) : left-aligned
Upper right alignment,
Flex-end: right-aligned
Align center
Center: a center
Align both ends with the same spacing
Space-between: both ends are aligned with equal intervals between items.
Intermediate interval = border interval *2
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
B. Longitudinal order
Upper left alignment
Flex-start (default) : left-top aligned
Lower left alignment
Flex-end: left-bottom alignment
Align center
Center: center
Align both ends with the same spacing
Space-between: both ends are aligned with equal intervals between items.
Intermediate interval = border interval *2
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
The above is fairly straightforward and follows the precision-content rule. But if we did it in reverse order, it would be the other way around. The final result can be viewed below.
C. in reverse order
Upper right alignment,
Flex-start (default) : right-top aligned
You’ll notice that flex-start’s display is completely reversed with reverse order.
Upper left alignment
Flex-end: left-top aligned
Align center
Center: center
Align both ends with the same spacing
Space-between: both ends are aligned with equal intervals between items.
Intermediate interval = border interval *2
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
D. in reverse order
Lower left alignment
Flex-start (default) : left-aligned
Upper left alignment
Flex-end: left-top aligned
Align center
Center: center
Align both ends with the same spacing
Space-between: both ends are aligned with equal intervals between items.
Intermediate interval = border interval *2
Space-around: Equal spacing on both sides of each item. As a result, the spacing between items is twice as large as the spacing between items and the border.
Now, if we want to center the color block not only vertically but also horizontally (in the middle), what should we do? In the example above, the context-content property can only be centered in one direction, either vertically or horizontally. If we want to be center right now, we need to be both vertically and horizontally centered. So what should we do to solve this problem? To solve this problem, we have the align-items property.
The align – the items property
'the align - the items property'Is used to define items in'Cross axis'How to align. --------------------------------------------------------------# flex-start: Align the starting point of the cross axes.
# flex-end: Align the ends of the cross axes.
# center: Aligns the midpoints of the cross axes.
# baseline: Baseline alignment for the first line of the project.
# stretch (default) : If the project is not set to height or is set to Auto, it will take up the entire container height.
Copy the codePrincipal axis and cross axis
Before using the align-items property, we need to understand two concepts: spindle and cross axis;
Excuse me how to figure out who is the principal axis? Who are the cross axes?
A: First of all, we need to be clear that there is no fixed rule in the code as to who is the main axis and who is the cross axis. It is determined when the programmer writes the Flex-direction attribute. It’s not fixed in the code which one is the main axis and which one is the cross axis.
That is, == who is the main axis is entirely determined by the flex-direction attribute. = =
If flex-direction is set to column, then ==column is the main axis and row is the cross axis ==;
# flex-direction:column; So column is the main axis, row is the cross axis
Copy the code
Flex-direction = row; So row is the main axis, column is the cross axis
Copy the code
So what is it that we know about the principal axis and the cross axis?
Let’s see what the align-items property is.
So the purpose of separating the main axis from the cross axis is to distinguish the align-items property from the context-content property
It might not be easy to understand, but I’m going to simulate this scenario for you.
Let’s start with the color blocks in the middle. Then look at the align-items and context-content properties
So the question is, once you know the principal axis and the intersecting axis, how do you distinguish the properties of the two?
The property-content property corresponds to the property-align-items property. Once we know who the spindles are, we can directly control the orientation of the spindles on the context-content property.
# context-content controls the orientation, placement, and alignment of the "main axis"
# align-items // controls the direction, arrangement, and alignment of the "cross axis"
Copy the codeTo further understand, let’s do a case study.
For example, we now require three color blocks to be horizontally centered, but aligned vertically upwards. In other words, let the original color block move up. So what do you need to do?
We can see from the code that the main axis here is conlmn (column orientation). To move up, you change the setting of the main axis, which is to change the context-content setting. The align-wrap attribute doesn’t need to be changed. It should remain centered
The specific code is as follows:
At this point, the align-items property has two more arguments than the Justify content property, baseline and stretch. Let’s focus on the use of these two attributes.
baseline
# baseline: Baseline alignment for the first line of the project.
Copy the codeTo be able to understand the baseline attribute, we need to set a few prerequisites. We have changed the size of the text inside the color block.
If we set align-items to baseline, what will happen?
Notice the details: the bottom of the text inside the three color blocks actually lines up.
Summary: Align the baseline for the first line of the project. This is theBaseline propertiesThe role of
stretch
# stretch (default) : If the project is not set to height or is set to Auto, it will take up the entire container height.
Copy the codeWhen the main axis is set to column, we set align-items:stretch; What will it look like?
First we want to look at align-items:stretch; The effect, there is a prerequisite is the project is not set height.
Then we set align-items to stretch and the effect is as follows.
# align-items:stretch;
Copy the codeIf at this point, we set the spindle to be horizontal. What’s going to happen?
Flex-wrap property (controls “line wrap”)
By default, projects are arranged on a line (also known as an “axis”). The flex-wrap property defines how to wrap a line if an axis does not fit.
It could take three values# nowrap (default) : no line breaks.
# wrap: line wrap with the first line at the top.
# wrap-reverse: newline, first line below.
Copy the codeNowrap (default) : no line breaks.
Wrap: The first line is at the top.
Wrap-reverse: newline with the first line at the bottom.
These up here areThe flex - wrap attributesThe following is a simulation demonstration for these attributes.
To better understand the meaning of the above parameters, the first thing we need to do is to make a row that does not contain all the color blocks.
# width :414px on iphone6.
Copy the code
Therefore, we need to set the width of the color block (414px divided by 3=138px) to be larger than 138px in order for the color block to fit in a row.
We might as well use the grab tool to grab a look, you will find that the color block will be forced to squeeze in a line, even if it does not meet the width we set to squeeze in, so if this is the case, the content inside the color block is bound to squeeze deformation.
If we don’t want the color block to be distorted now, what should we do?
In fact, the reason why the above will not wrap, encounter the sum of color blocks is greater than the width of the phone, timely extrusion does not wrap. This is set up in the code.
# flex-wrap: nowrap; // No line breaks (default)
Copy the codeBecause it is the default, if it is not set, it is not newline by default
So now if we need it to change lines, we can set it like this
# flex-wrap: wrap; // The first line is at the top.
Copy the code
Let’s look at it with the grab tool, and you’ll see that the width of the color block is now normal.
So once we get there, let’s think about why a line break makes a space free. Shouldn’t they be pasted together? Is this a code error?
A: No, this is flex’s default line wrap feature.
So how do you solve the problem of a new line with a blank space?
The first thing we need to know is that these two distances are the same. That is to say, the system actually places the color block 3 in the remaining position, and the distance between the top and bottom of the color block 3 is in an average position.
So let’s say we need to fit color block 3 at the bottom of color block 1 and color block 2. The idea is to set distance A and distance B equal to zero so that natural color block 3 fits the bottom of color block 1 and color block 2.
So we set the height of the container to 200px.
In fact, we have thrown a brick in the door, the other properties can be set in the Settings. Look at the changes inside.
Extension of Flex layout
These Settings are all you need to know about the Flex layout.
Flex layout Tutorial: Syntax section
Flex Layout Tutorial: Sample article