A small program layout guide for Android development, Flex layout!

First, the order

Hi, everyone, I am the Incense ink shadow!

Recently in the small program, to verify some direction, the development efficiency is really fast, is a variety of audit a bit laborious, but there is a way to solve.

To develop a small program, in fact, like we normally write an app, you need to have a beautiful front-end layout, and also need to handle the interaction with the front-end UI components and the logic behind them.

Recently will share some about the small program content (not guarantee, think where to write where), today first talk about Touch applet first step: layout .

If you have a front-end experience, the applet is very easy to get started, and for beginners, the first step is of course to read the official document of the applet, but then you will face the layout of the problem immediately.

In the development framework of small programs, Flex layout is used, which helps us to quickly make UI layouts in small programs. Although Flex is now supported by mainstream browsers, Flex has some compatibility issues with some of the lower versions of the browser. But in the small program, this is not what we need to consider, has helped us to deal with.

Next I'll do an example with a complete applet, and say something about the flex layout. Talk not much, but to the truth.

Second, what is Flex

Flex is a new layout adaptation scheme presented by the Web in 2009, with a flex layout that enables easy, complete, responsive implementation of various page layouts. After these years of development, has been supported by all browsers, basically can let us rest assured that the use.

The Flex layout is the abbreviation for flexible box, which is the "elastic box", which is also based on a "box" model that cuts the UI into a small box for UI layout.

If you are not developing a small program, but want to develop a mobile front-end, you can also use the Flex layout. Although Flex is already supported by all browsers, Jiabuzhu has some old browsers, such as IE 9, which are not supported. But we're just developing small programs, so don't worry about that at all.

Iii. how Flex uses 3.1 overview

Flex is very simple to use and you just need to display set it up as you flex can.

displayIn addition to flex some other optional parameters, you can refer to the documentation.

In the novice phase, for the moment, only two parameters should be concerned:

• Block: Specify a block-level layout, its elements, always a new line to display, and the small program of many view container components, the default DISPLA is block, for example: View, Scroll-view, Swiper, etc.
• Flex: Specified as a flex layout that displays child elements within a box.

For example, take a look at:

Here, when you do not make a special setting, the default is display:block the state, each of its elements, is another line to show. display:flex, we are free to set the layout of its elements, which shows only the default effect of flex, and we can actually make a more flexible layout with the different properties provided by Flex.

3.2 Flex's directional axis

To master the Flex layout, you need to have a concept of a directional axis in your mind at all times.

In the Flex layout, there is a natural presence of two directional axes: the spindle and the cross axis . The cross axis, which is also called the side axis in some places, is actually a concept.

By default, the spindle is stretched horizontally, while the cross axis is just as cross as the spindle.

But this is not immutable, we can change the direction of the spindle by properties, the direction of the flex-direction cross axis is relative to the main axis, when we change the direction of the spindle, the cross-axis is also changed.

Since the Flex layout is also controlled by some properties, it is the same as when we write a mobile App, some attributes are in the parent container, and some are on the child elements.

Next we will explain the properties of these Flex layouts that you need to use.

3.3 The properties of Flex on the parent container

On the parent container, the properties that exist are:

• Flex-direction: Specifies the direction of the spindle.
• Flex-wrap: Specifies the arrangement style of child elements when the parent container is exceeded.
• Flex-flow:flex-direaction and Flex-wrap The combination of the two attributes in shorthand form.
• Justify-content: The direction in which the sub-elements are arranged in the spindle.
• Align-items: The direction in which the child elements are arranged on the intersection axis.
• Align-content: The alignment of multiple axes.

These few, except align-content are relatively common properties. Let's look at these properties and how they work in small programs.

1) flex-direction

As mentioned earlier, the flex layout has two axes, which are cross-relative and divided into spindles and cross axes. We can flex-direction determine the direction of the spindle, and the direction of the cross axis is determined.

In the flex layout, the axis has the concept of starting point (start) and end point (end) In addition to the two axes, with flex-direction four properties loaded together.

• Row: Default value, spindle horizontal direction, starting point on left.
• Row-reverse: Spindle horizontal direction, starting point on the right.
• Column: The vertical direction of the spindle, the starting point is above.
• Column-reverse: Vertical direction of spindle, starting point is below.

Although this is very well understood, we still look at the effect in the applet.

2) Flex-wrap

The Flex-wrap property is used to determine how to wrap a parent container after a single row has not been able to contain all child elements.

• NoWrap: Does not wrap, this is the default value.
• Wrap: Naturally wraps when you are out of a single line.
• Wrap-reverse: When you go beyond a single line, flip the direction along the bottom and wrap naturally.

CSS is a lot of properties are with Xxx-reverse parameters, in most cases we do not use, but it is not bad to understand.

Although the picture is very clear, from flex-wrap:wra p, you can see a, B, C three elements, in fact, the width is inconsistent.

Generally in the simple introduction of the flex-wrap:wrap properties of the article, in fact, will say that the extra part of the cut out of the parent layout.

I also stole a map to see what others have shown in the tutorial.

In fact, if you are in a purely front-end environment, the use flex-wrap:wrap is really the effect, so this is not a mistake, I understand this is the difference in performance.

But in the small program is not the case, it will eventually be based on the width of the child elements you set, the horizontal ratio of the scale, so that it can be displayed in the row below.

In this example, the C block is the width of the widest layout, when we increase the C block, look at such extreme situations, flex-wrap:nowrap in the small program performance.

As you can see, it will compress the width of all the layouts in the scale, which is a little different and requires special attention.

3) Flex-flow

flex-flowis a flex-direction flex-wrap shorthand combination of the previous two attributes.

In CSS, many properties are a combination of some properties, is the existence of such a notation, the middle of the use of space to split it.

For example:

.ele {  flex-flow: row nowrap;}

This allows two properties to be set at a time and does not conflict.

4) Justify-content

justify-contentCan be used to set the alignment of child elements in the spindle direction.

It has five optional options:

• Flex-start: Default value, left-justified.
• Flex-end: Right-aligned.
• Center: Center.
• Space-between: Justified, equidistant between elements.
• Space-around: Each child element is spaced equally, and the expression is that the distance between the element and the bounding rectangle is half the element's distance from the element.

justify-contentBasically look at the description to know the effect, but space-between space-around it looks very similar, but in fact there are differences, we look at the final operation of the effect is the clearest.

You can see that the space-around left and right margins are preserved, and it feels like a margin attribute is added to each element, and space-between only a distance exists between the child elements.

5) Align-items

align-itemsproperty, you can define the alignment of child elements on the intersection axis.

It also has five selection parameters:

• Flex-start: The start alignment of the intersection axis.
• Flex-end: The end alignment of the intersection axis.
• Center: Center in the cross axis direction.
• Baseline: The first element of a child element, the content baseline is aligned.
• Stretch: The default parameter, which fills the parent layout on the intersection axis.

Note that align-items:stretch our property description is not consistent with the previous one, mainly because it has two limitations.

• Parent container, you must limit the height.
• The child element, which must not be specified in height, width or height, depends on the direction of the intersection axis.

For example, the preceding code, we modify it according to the two restrictions here.

align-itemsAnother point to note is the baseline, which is based on the main axis direction, the content of the first element is aligned, we put a block, add a margin-top again to see the effect.

As you can see, other properties have an effect, but baseline when you do, you can still keep child elements based on content alignment.

6) Align-content

align-contentproperty specifies the alignment of elements on the intersection axis, and is align-items somewhat similar. The general mobile UI layout, is inclined to the list form unlimited downward extension, so align-content the usefulness is not very good.

But when you need to make a single-page effect, such as an activity diagram, you can take advantage of the align-content properties.

align-contentThere are six optional properties:

• Stretch: Default value, Extrude fills the intersection axis, and the Align-items limit is similar.
• Flex-start: Aligns with the intersection axis start point.
• Flex-end: Align with intersection end
• Center: centered on the intersection axis.
• Space-between: Aligns with the intersection axis, and the child elements remain spaced equally.
• Space-around: In the cross-axis direction, the child elements and margins are kept at the same distance.

In fact, we understand align-items , for align-content it is very good understanding.

Nothing much to say, just a look.

Iv. Child container Properties for Flex

In the Flex layout settings, the child element has 6 properties:

• Flex-grow: The stretch scale of the remaining space of the child element.
• Flex-shrink: The child element goes out of space, reversing the stretch ratio of the pair element.
• Flex-basis: Sets the primitive proportions of the child elements, without being stretched.
• Flex: The collection property of the first three properties.
• Order: Sets the sequence of child elements to be displayed.
• Align-self: Overrides the Align-items property set by the parent container to manipulate the alignment effect of the child element on the intersection axis.

In fact, the real common use of this, we have a careful analysis, to maintain the previous style, will be in the small program, the actual effect of examples.

1. Flex-grow Properties

The Flex-grow property allows you to define the scaling scale of child elements in the parent element, assigning a different amount of space to the child elements in proportion.

Please note that here are two examples, a, B, C three child elements of the Flex-grow are set to 1, 2, 3, and the width of each child element, set to 5 rpx.

When the Flex-grow is set, the child elements inside are not paid attention to the entire parent container, and the space of the child elements is allocated according to the Flex-grow set scale, the smaller the flex-grow, the smaller thespace occupied .

Judging by the performance here, Flex-grow occupies the space of the parent container from small to large.

In the case of B, we set the width property of the child element to 500RPX, and the obvious line is not enough to put down 3 sub-elements. This time Flex-grow will not take effect, will be presented in equal proportion.

For this property to take effect, the flex-wrap must be set to nowrap , meaning that no line wrapping is allowed, and all attributes related to the scale need to be nowrap added.

I hope you are familiar with such an example, the following example, will be in this form to indicate the parameters of the setting.

width, which is the length of the child element.

Properties: 1, 2, 3 are different values respectively.

2. Flex-shrink Properties

Flex-shrink defines a child element, in a space outside the container, to scale backwards.

Flex-shrink since the scaling is specified beyond the parent container, if all child elements do not exceed the parent container, this property will be invalidated, such as the effect in the a example.

In the B example, the set child element width is 500rpx, which extends beyond the parent container, and proportionally controls the size of the child element.

The performance here is that Flex-shrink is in effect, the smaller the value, the greater the space occupied .

3. flex-basis Properties

The flex-basis is used to define the original dimensions of the child elements, in the case of non-scaling.

The two properties described earlier, both Flex-grow and Flex-shrink, will change the scaling of the child elements in different cases, and if we want to set the child elements, the original size can be used if the scale is not set, the flex-basis.

As you can see from the example, flex-basis only takes effect when scaling does not take effect.

4. Flex Properties

The three properties described earlier, the effect of many properties is actually mutually exclusive, so the Flex layout also provides a combination of properties Flex, for Flex-grow, Flex-shrink, flex-basis three properties of the abbreviation integration, the default value is 0 1 auto , The second two attributes are optional, that is, you do not write the latter two, which is equivalent to only setting the Flex-grow.

For added convenience, the Flex attribute also provides two shortcut values: auto (1 1 Auto) and none (0 0 Auto).

The effect is very simple, there is not much to explain.

5. Order Property

Order can control child elements, in the order in which the parent layout is arranged, the smaller the number, the more forward the arrangement.

With order we can not follow the Flex layout, and the order in which the sub-containers are written can be modified by order.

6. align-self Properties

In the previous article, we will be able to change the orientation of the sub-elements on the intersection axis through the Align-items property of the parent container. If there are child elements that are not satisfied with this direction, you can also modify them by using the Align-self property.

The default value of Align-self is auto to represent the Align-items property that inherits the parent container, if there is no parent element, equivalent to stretch .

Similar to align-self and Align-items, there are six options available.

• Auto: Listens to the parent container.
• Flex-start: The start alignment of the intersection axis.
• Flex-end: The end alignment of the intersection axis.
• Center: The center alignment of the intersection axis.
• Baseline: The base alignment of the first line of text.
• Stretch: By default, the height is not set to the full height of the case.

In the example here, B item uses align-self to modify the alignment for center , rendering the effect, is a parent container, on the cross axis of the effect of the center, self-management themselves.

V. Summary

Here, the use of Flex layouts in small programs is basically even clearer. Although the front-end layout has a lot of kinky tricks, using the attributes described in these two articles, you can already arrange beautiful UI effects.

Come and start your little program development journey!

Public number back to growth " growth ", will be prepared by my study materials, can also reply to " Dabigatran ", learning progress together, you can also reply to " ask questions " and ask me questions.

Recommended reading:

• Small Program UI Layout Guide (i)
• The path of the programmer's password management
• Manually refresh the Mediastore, save the picture immediately appear in the album
• Pseudo code, humor, and the Art of Google!
• Comics: App to prevent Fiddler grab tips!

A small program layout guide for Android development, Flex layout!