Detailed explanation of Flex layout for WeChat development

The WeChat applet page layout adopts Flex layout.
Flex layout is a new solution proposed by W3c in 2009, which can realize various page layouts simply, completely and responsively.
Flex layout provides the alignment, direction and order of elements in the container, and they can even be dynamic or of indeterminate size.
The main feature of Flex layout is the ability to adjust its child elements to fill the appropriate space in the most suitable method in different screen sizes.

flex layout

Features of Flex layout:

• Telescopic in any direction , left, right, down, up

• The order can be exchanged and rearranged in the style layer

• The main axis and side axis are convenient to configure

• Space stretching and filling of child elements

• Alignment along the container

WeChat small The program implements Flex layout. Let’s briefly introduce the use of Flex layout in WeChat mini programs.

Flexible container

An element with <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>:flex or display:block is a flex container (flexible container), the sub-elements inside are called flex item (flexible items), the sub-elements in flex container are all laid out using Flex .

• display:block Specify the block container mode, always use a new line to start display, the view container of the WeChat applet (view, scroll-view and swiper ) are dispaly:block by default.

• display:flex: Specify the in-line container mode to display child elements in a row. You can use the flex-wrap attribute to specify it. Whether to wrap the line, flex-wrap has three values: nowrap (no line wrap) , wrap (line wrap) , wrap-reverse (wrap the first line) Below)
  Code using display:block(default value):

  <view class="flex-row" style="display: block;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>

  Display effect:

## The display effect of changing

#block

to

display:flex:

flex

You can see the difference between

block and flex from the rendering. The child element view is displayed in a new line (block ) or inline display (flex).

Main axis and cross axis

FlexThe flex container of the layout can be laid out in any direction. The container has two axes by default:
main axis(main axis) and cross axis(cross axis). The starting position of the spindle is
spindle starting point(main start), the end position of the spindle isspindle end point(main end), and the length of the spindle is spindle length(main size). Similarly, the starting point of the cross axis is
the starting point of the cross axis (cross start), the end position is the end point of the cross axis (cross end), and the length is the length of the cross axis(cross size). See the picture below for details:

Flex-direction

Note that

spindle is not necessarily From left to right, similarly side axis is not necessarily from top to bottom, the direction of the main axis is controlled by the flex-direction attribute , it has 4 optional values:

• row: The horizontal direction from left to right is the main axis

• row-reverse: The horizontal direction from right to left is the main axis

• column: The vertical direction from top to bottom is the main axis

• column-reverseThe vertical direction from bottom to top is the main axis

If the horizontal direction is the main axis, that vertical direction is side axis and vice versa.

Renderings of four main axis direction settings:

Example diagram

The example in the picture shows the use of different The

flex-direction value is the difference in the arrangement direction. Example code:

<view >
    <view class="flex-row" style="display: flex;flex-direction: row;">
        <view class="flex-view-item">1</view>
        <view class="flex-view-item">2</view>
        <view class="flex-view-item">3</view>
    </view>
    <view class="flex-column" style="display:flex;flex-direction: column;" >
        <view class="flex-view-item">c1</view>
        <view class="flex-view-item">c2</view>
        <view class="flex-view-item">c3</view>
    </view>
</view>

Running effect:

##flex-direction

Alignment

There are two alignment methods for child elements:

justify-conent

Define the alignment of child elements on the main axis align-items
Define child The way elements are aligned on the cross axis

justify-content

There are 5 optional alignment methods:<ul class=" list-paddingleft-2"> <li><p><code>flex-start Spindle start point alignment (default value)

flex-end Spindle end point alignment

center Align center in main axis

space-between Align ends except The child elements at both ends are outside the container at both ends, and the intervals between other child elements are equal

space-around The distance between each child element Equal, the distance between the child elements at both ends of the container is the same as the distance between other child elements. The alignment of
justify-content is related to the direction of the main axis. In the figure below, flex-direction is row, and the main axis method is from the left. Go to the right and describe the display effect of jstify-content5 values:

##justify-content

align-items represents the alignment on the cross axis:

• stretch fills the entire container (default Value)

• flex-start Starting point alignment of side axis

• flex-end side Align the end point of the axis

• center Center the alignment in the side axis

• baseline The alignment of the first line of text of the element

align-tiems is related to the direction of the cross-axis. The following figure uses flex-direction is row, the side axis direction is from top to bottom , and the 5 values ​​​​describing align-items display effect:

aign-items

With the direction of the main axis and the side axis and setting their alignment, most page layouts can be realized.

【Related recommendations】

1.

WeChat public account platform source code download

2.

Xiaozhu CMS Life Pass O2O System v2. 0 Exclusive Edition Download

3.

小 Pigcms (pigcms) WeChat Marketing System V8.52 Pinhaohao Mall Secondary Development Special Edition

The above is the detailed content of Detailed explanation of Flex layout for WeChat development. For more information, please follow other related articles on the PHP Chinese website!