WeChat applet View: flex layout example

零下一度
Release: 2017-05-26 10:00:49
Original
2464 people have browsed it

WeChat Mini Program View supports two layout methods: Block and Flex

All Views are block by default

If you want to use flex layout, you need to display Style statement:

display:flex;
Copy after login

Let’s introduce the Flex layout of the WeChat applet

Let’s make a simple demo first

  <view class="main">
    <view class="item item1">1</view>
    <view class="item item2">2</view>
    <view class="item item3">3</view>
  </view>
Copy after login

Add the background color to see it more clearly Some

.main {
  width: 100%;
  background-color: antiquewhite;
}

.item {
  height: 100rpx;
  width: 100rpx;
}

.item1 {
  background-color: red;
}

.item2 {
  background-color: dodgerblue;
}

.item3 {
  background-color: greenyellow;
}
Copy after login

then probably look like this:

WeChat applet View: flex layout example

Then we first add display: flex

so that we can use flex layout, Idea, it seems that view will not automatically inherit , you need to add it in every view you want to use.

The first is horizontal layout and vertical layout. To set the attribute flex-direction, it has 4 optional values:

  • row: horizontal from left to right The direction 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 Main axis

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

  • Let’s take a look at the difference between setting row and row-reverse:

    row:

    WeChat applet View: flex layout example

    row-reverse:

    WeChat applet View: flex layout example

    Then we have to set For the layout direction of elements in the horizontal direction, you need to set the justify-content attribute. It has 5 optional values:

  • flex-start: align the starting point of the main axis (default value )

  • WeChat applet View: flex layout example

  • ##flex-

    end: Spindle end point alignment

  • WeChat applet View: flex layout example

  • center: Align in the center of the main axis

  • WeChat applet View: flex layout example

  • space-between: Align both ends, except for the child elements at both ends. Outside the container at both ends, the spacing between other child elements is equal

  • WeChat applet View: flex layout example

  • space-around: The distance between each child element is equal, The distance between the child elements at both ends of the container is also the same as the distance between

    other child elements

  • WeChat applet View: flex layout example

    Then we need to set the element vertically For the layout direction, you need to set the align-items attribute, which has 5 optional values:

  • stretch to fill the entire container (default value)

  • WeChat applet View: flex layout example

  • flex-start aligns the starting point of the side axis (here we manually set the height of the subview to see it more clearly)

  • WeChat applet View: flex layout example

  • flex-end Align the end of the cross axis

  • WeChat applet View: flex layout example

  • center Align the center in the cross axis

  • WeChat applet View: flex layout example

  • baseline aligns with the first line of text of the child element

  • WeChat applet View: flex layout example

    The child View also has an attribute align-self, which can override the parent The align-items attribute of the element, which has 6 optional values: auto | flex-start | flex-end | center | baseline | stretch (auto inherits the align-items attribute of the parent element, and the others are consistent with align-items)

    For example, in the last baseline example above, we set item3 to align-self:flex-end;

    It looks like this:

    WeChat applet View: flex layout example

    In addition, there is also the flex-wrap attribute, which is used to control whether the sub-View wraps. There are 3 values ​​​​optional:

  • nowrap: no line wrapping (default)

  • wrap: Line wrap

  • wrap-reverse: Line wrap, the first line is at the bottom

  • There is also a sub-View

    ord## The #er attribute can control the order of sub-elements, and the default is 0. For example, in the above example, if we set item3 to order:-1; we can put item3 in front

    WeChat applet View: flex layout example

    flex Commonly used layouts are just these

    Those who write WeChat mini programs can try it

    Finally, if there is a mini program when It would be even better if it can directly support bootstrap

[Related recommendations]

1. HTML5 mobile application development-detailed introduction to the role of viewport (picture Text)

2. A brief discussion of html5 responsive layout

3. HTML5 programming

4. An example tutorial on using co to handle asynchronous processes in small program development

The above is the detailed content of WeChat applet View: flex layout example. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template