Title and content has nothing to do, just a few days ago see lu grandpa’s ghost livestock: www.bilibili.com/video/av126… , along with consumption, on the column incense ~

Look at a section of “I write a small program like food imaginary kun – 2, chicken you too beautiful” much less than expected wow…

Maybe I’m not coquettish enough (or maybe I’m not Posting at the right time), but I suggest you read the section on “reverse wechat mini program”. This section comes to the postures related to “layout in wechat mini program” under the liver. Hope you finish this chapter, you can: according to the design of the body to the design draft, stacking controls. This section is more content, it is suggested to like the collection after the time to see, after all, the collection is I will, the posture of this paper is arranged as follows:

  • 1. Physical pixel, device independent pixel, DPR, wechat applets special size RPX, design draft size;
  • 2. Several ways of WXSS style import;
  • 3. How to locate elements through selectors;
  • 4. Document flow and escape from document flow;
  • 5. Block-level elements and inline elements are converted by display attributes;
  • Box model, box-sizing, margin merging problem;
  • 7, positioning: relative positioning, absolute positioning, fixed positioning;
  • 8. Float and clear float;
  • 9. Multi-column layout, realizing multi-column text and simple picture waterfall flow;
  • 10, Flex elastic layout;
  • Layout actual combat: copy write daily excellent fresh home page.

0x1 wechat applets have a unique unit — RPX

Px (Pixel) pixel, I believe everyone is familiar with it, but there are three terms to say:

  • ① “Physical pixels” : the actual pixels on the device screen. For example, the resolution of iPhone 6 is 750*1334, which means 750 pixels in the horizontal direction and 1334 pixels in the vertical direction.
  • ② “device-independent pixels” : can be understood as the number of pixels reflected in the CSS/JS code.
  • ③ “Device Pixel ratio (DPR)” : the ratio of physical pixels to logical pixels of a device.

The reader may wonder: Why are there two types of pixels? Is there any difference?

A: Once upon a time there was no difference, write 1px in CSS and the screen renders a physical pixel, i.e. DPR=1. With the advent of Apple Retina technology, this situation is broken. With Retina technology, multiple physical pixels can be used to render a logical pixel, while the screen size remains the same and the resolution becomes higher. However, human Retina cannot distinguish pixels on the screen, which is the reason why Retina screen feels more delicate than non-Retina screen.

On Retina display, the DPR is no longer 1, but greater than 1. For example, the DPR of iPhone 6 is 2. The physical pixel is 750×1334, and the corresponding logical pixel is (750×1334)/2 = 375×667.

Wechat applet specific size unit, can be adapted according to the “screen width”, stipulate: the screen width of the applet is 750rpx. It can be simply understood as:

Divide the page into 750 pieces, each 1rpx in size.

Then the iPhone 6’s physical pixels are exactly 750 × 1334, so in iPhone 6:

1rpx = 1 physical pixel (1px)

So, if the design body to iPhone 6 as the standard drawing design draft, the mark is how many PX, the small program directly how many RPX, do not need to convert, but also do not worry about the adaptation of each platform, god, beautiful!! At the end of the day, it’s not hard to get an equation like this:

On iPhone 6:1rpx = 0.5px Logical pixel = 1 physical pixel

0x2 WXSS style import

We talked about CSS styles in the last class. WXSS in wechat applet is slightly different. In addition to creating a.wxss file with the same name in the directory will be automatically referenced. You can also use the @import statement to import external styles, relative to paths, as shown in the following example:

/* app.wxss */

@import './wxss/base.wxss';

Copy the code

In addition, you can use the style property to set inline styles, typically to accept dynamic styles and write static styles to a class as shown in the following example:

<view style="color:{{color}};" />

Copy the code

0x3. The selector locates the element

To style an element, you also have to locate the element. There are three basic types of selectors:

  • “Tag selector” : All specific tags in a document use the same CSS style.
  • “Id selector” : The element sets the ID selector with the ID attribute, which is defined by “#”.
  • “Class selector” : The element sets the class selector with the class attribute, which can be used in multiple elements, starting with “. Number display.

This is followed by examples of various operations that specifically locate elements:

/* Label selector */

p{color: red; }



/* id selector */

#id-choose {color: green; }



/* Class selector */

.class-choose {color: blue; }



/* Groups the selectors, sharing the same style, separated by commas */

text, button, checkbox { color: green; }

.text- 1, .text2 - { color: gold }



/* All y elements in the x element, select the y element as the descendant of the X element, called descendant selector or contain selector */

view text{ color: purple }

/* You can also use the * wildcard to select all elements */

view *{ color: purple }



/* The parent element is all y elements of the x element, also known as: child element selector */

view > text{ color: red }



/* All y elements after the x element, also known as: adjacent sibling selector */

view + text{ color: red }



/* Select each y element preceded by x */

view ~ text{ color: red }



/* You can also locate elements by attributes */

<view aria-role="button" aria-label="submit-label"> submit < / view >

[aria-role]{ color: purple }   /* with an attribute */

[aria-role="button"]{ color: purple }   /* with an attribute and equal to XXX */

[aria-label~="label"]{color: purple}    /* Takes an attribute and contains the XXX word */

[aria-label|="submit"]{color: purple}   /* takes an attribute and begins with a XXX word */

[aria-label^="su"]{color: purple}   /* takes an attribute and begins with xx. The word */ is not required

[aria-label$="el"]{color: purple}   /* takes an attribute and ends with xx. The word */ is not required

[aria-label*="el"]{color: purple}   /* Has an attribute and contains XXX */

/* You can also play with element selectors */

view[aria-role]{ color: purple }



/ * pseudo-classes, according to the order of locating * /

.content- 1 text:first-child{ color: pink }  /* The parent of the first x element */

.content- 1 text:last-child{ color: pink }  /* The last x element of the parent element */

.content- 1 text:nth-child(n){ color: pink }  /* The parent of the NTH x element */

.content- 1 text:nth-last-child(n){ color: pink }  /* The NTH x element from the parent */



/* False element */

<view class="content"</view>

/* Add content */ before the element

.content:before{

  content: "Words inserted in front";

  color: red;

}

/* add content to the */ element

.content:after {

  content:url("http://codingboy.xyz/avator.png");

}

Copy the code

Be careful!!

WXSS cannot obtain local image resources, can use network image, base64 image or image tag!

Pay more attention!!


specifies multiple classes. This is written for the modular design of CSS, reduce CSS code duplication, improve reusability. For example, there are several small program Chinese text, the style is basically the same, maybe only the font size or color is different, you can play like this, code examples are as follows:

<! -- wxml -->

<view class="font">

<view class="font small">

<view class="font small blue">



<! -- wxss -->

.font{ text-align: center; }

.font.small{ text-size: 18rpx; } /* Small font */

.font.big{ text-size: 24rpx; } /* Large font */

.font.small.blue{ text-color: blue; } /* Small blue font */



<! If there is a duplicate attribute definition, then the last one will overwrite the previous one! -->

Copy the code

More content on the selector can visit: www.w3school.com.cn/cssref/css_.

0x4 document Flow

The flow direction of elements within the document, inline elements from left to right and block-level elements from top to bottom.

Simply put: the order in which elements appear on the page.

It might be a little vague, but here’s an example:

<view style="background-color: #FFBBFF; height: 96rpx; line-height: 96rpx; text-align:center">Block element (1)</view>

<text style="background-color: #CAFF70; ">Inline element ①</text>

<text style="background-color: #EED8AE; ">Inline element ②</text>

<text style="background-color: #FFA500; ">Inline element ③</text>

<view style="background-color: #F08080; height: 96rpx; line-height: 96rpx; text-align:center">Block element (2)</view>

<view style="background-color: #EEEE00; height: 96rpx; line-height: 96rpx; text-align:center">Block element (3)</view>

Copy the code

The running results are as follows:

The rule that inline elements go from left to right, and block-level elements go from top to bottom (exclusive row) is “normal document flow.” If we do something to make the elements not follow this rule, we call it “out-of-document flow.” For example, set a float to the right for the inline element ② :

<text style="background-color: #EED8AE; float:right">Inline element ②</text>

Copy the code

And it goes like this:

The inline element ② does not follow ① and ③ does not follow ②, leaving the document flow.

0x5, block-level elements and inline elements

Block-level elements:

  • Occupies a single line that is 100% of the width of the parent element.
  • Width and height can be set, but even if width is set, the row will remain exclusive;
  • Margin and padding can be set;
  • Can accommodate inline elements and other block elements;
  • For example, the

    tag

Inline (inline) elements:

  • Elements in adjacent rows can be placed on the same row.
  • Width and height is the width and height of the text or image, which cannot be changed.
  • Margin and padding are valid in horizontal direction but invalid in vertical direction.
  • Can only hold text or other inline elements;
  • For example, the

    tag

Inline and block-level elements can be toggled using the display attribute, which has three optional values:

  • Block: set to a block element.
  • Inline: Set to inline element.
  • Inline-block: inline block element that has the properties of block and inline elements, such as width and height, margin and padding, and can be side-by-side with other inline elements.

Here’s an example:

<! -- test.wxml -->

<view class="container">

  <view class="block-1">Block element 1</view>

  <view class="block-2">Block element - 2</view>

  <view class="block-3">A block element</view>

  <view class="block-3">A block element</view>

  <text class="inline-1">The inline element minus 1</text>

  <text class="inline-2">Inline element minus 2</text>

  <text class="inline-3">Inline element minus 3</text>

  <view>

    <view class="display-inline">Inline block element -1</view>

    <view class="display-inline">Inline block element -2</view>

  </view>

  <view>

    <text class="display-block">Inline block element -3</text>

    <text class="display-block">Inline block element -4</text>

  </view>

  <view>

    <view class="display-inline-block">Inline block element -5</view>

    <view class="display-inline-block">Inline block element -6</view>

  </view>

</view>

Copy the code
/* test.wxss */

/* Block element */

.block-1{

  background: red

}

/* Block elements can be set directly to margin and padding */

.block-2 {

  background: greenyellow;

  margin-right: 50rpx;

  margin-top: 50rpx;

  padding-bottom: 25rpx;

  padding-left: 25rpx;

}



/* Block elements set width and height, but still occupy a line */

.block-3 {

  background: paleturquoise;

  height: 96rpx;

  width: 200rpx;

}



/* Inline element */

.inline-1 {

  background: red

}



/* Set margin and padding for inline elements, only horizontal */

.inline-2 {

  background: greenyellow;

  margin-right: 50rpx;

  margin-top: 50rpx;

  padding-bottom: 25rpx;

  padding-left: 25rpx;

}



/* The width and height of the element in the line does not take effect */

.inline-3 {

  background: paleturquoise;

  height: 96rpx;

  width: 200rpx;

}



/* Block elements are converted to inline elements */

.display-inline {

  display: inline;

  background: orange;

  margin-right: 50rpx;

  padding-bottom: 25rpx;

  padding-left: 25rpx;

}



/* Line elements are converted to block elements */

.display-block {

  display: block;

  background: pink;

  margin-right: 50rpx;

  padding-bottom: 25rpx;

  padding-left: 25rpx;

  margin-top: 40rpx;

  height: 96rpx;

  width: 200rpx;

}



/* Inline block elements, which have the properties of both block-level and inline elements */

.display-inline-block {

  display: inline-block;

  width: 300rpx;

  height: 100rpx;

  background: gold;

  margin-left: 50rpx;

  margin-top: 20rpx;

}

Copy the code

The running results are as follows:

0x6. Box Model

Elements are represented as “rectangular boxes”, which are represented by a model that depicts the space it occupies, the “box model”.

As shown, the box model is described by the following four boundaries:

  • Margin — The area outside the border where the Margin is transparent.
  • Border — The Border around the inside margin and around the content.
  • Padding — The area around the content. The Padding is transparent.
  • Content — The contents of the box, displaying text and images.

Setting width and height does not affect the size of the content area, but does increase the overall size of the element box. For example, if you define a 48rpx48rpx view, but if you also set a margin or padding, the element’s frame size is not 48rpx48rpx!

(1) the box – sizing properties

If you want to set the width and height of the “element box” to be fixed without changing the width and height of the margins and borders, you can use “box-sizing”, which has two optional values:

  • Content-box is just the width of the content. Add the padding and border to make the model width larger.
  • Border-box: Border is used as the border. Width and height include border and inner margin. If you set the padding model, the width and height will not change.

The following is an example of the code used:

<! -- test.wxml -->

<view class="view-wrapper">

  <view class="view-1">Element 1</view>

  <view class="view-2">Element 2</view>

</view>

Copy the code
/* test.wxss */

page {

  background: gray;

}



view {

  text-align: center;

  width: 240rpx;

  height: 240rpx;

  line-height: 240rpx;

  border: 10rpx solid white;

}



.view-wrapper {

  width: 75%;

  background: gold;

  padding: 50rpx;

  overflow: hidden;

  border: none;

}



.view-1 {

  background: greenyellow;

  box-sizing: content-box;

  float: left;

}



.view-2 {

  background: blueviolet;

  box-sizing: border-box;

  float: right;

}

Copy the code

The running results are as follows:

(2) Margin merging problem

When two or more vertical margins meet, they form a margin whose combined height is equal to the greater of the two elements.

The concept is a little vague, so write a simple example to help you understand:

<! -- test.wxml -->

<view class="container">

  <view class="view-1">Element 1</view>

  <view class="view-2">Element 2</view>

</view>

Copy the code

Then set two styles

.view-1 { background: gold; }

.view-2 { background: red; }

Copy the code

Then follow these steps to modify the style:

  • ① View-1 Settings: margin-bottom: 50rpx
  • Comment out the view-1 style, view-2 Settings: margin-top: 10rpx.
  • ③ Remove the comment from VIEW-1.

The results of each step are as follows:

As shown, the final margin of the two elements is 50rpx, instead of 50rpx + 10rpx = 60rpx; And then let’s try the negative case

.view-1 { background: gold; margin-bottom: -10rpx}

.view-2 { background: red; margin-top: 30rpx}

Copy the code

The running results are as follows:

If the margin is 20rpx, try a negative number that is larger than an integer:

.view-1 { background: gold; margin-bottom: 10rpx}

.view-2 { background: red; margin-top: -20rpx}

Copy the code

Again, it’s not hard to see that the margin is -10rpx. Try both negative numbers:

.view-1 { background: gold; margin-bottom: -10rpx}

.view-2 { background: red; margin-top: -20rpx}

Copy the code

At this time, the margin is -20rpx. Analyze and calculate the following rules:

  • One positive and one negative, first calculate the absolute value difference (large absolute value – small absolute value), and then set the positive and negative;
  • Both positive and negative: Remove the one with the largest absolute value and set the positive and negative values.

If you don’t want to face the margin merge problem, there are several ways to avoid it:

  • Position: Absolute;
  • Float :left; float:left;
  • ③ Set any box to inline block: dispaly:inline-block;

In addition to the above “adjacent elements” can have margin merging problems, “parent and child elements” can also have no inner margins and borders. Write a simple test to try it out:

<view class="view-1">

  <view class="view-2"< / view > > element

</view>

Copy the code

Set two styles, a gray background for comparison and a left margin for viewing.

page { background: gray; }

.view-1 { background: gold; }

.view-2 { background: red; margin-left: 50rpx; }

Copy the code

Then follow these steps to modify the style:

  • ① View-2 Settings: margin-top:20rpx
  • Margin-top: 50rpx; margin-top: 50rpx;
  • ③ Remove the comment from VIEW-2.

The results of each step are as follows:

There are several ways to circumvent the parent-child element margin merge problem:

  • Padding-top: 1rpx;
  • ② Parent element setting: overflow: hidden;
  • ③ Parent element border:1rpx solid transparent;

So much for margin merging. It is good to know how to avoid it. The specific reasons involve Block Formatting Context (BFC).

0 x7, positioning

Elements can be removed from the flow of the document by positioning, floating, or multi-column layouts. To help you understand, define a page that does not use positioning.

<! -- test.wxml -->

<view class="view-wrapper">

  <view class="view-1">Element 1</view>

  <view class="view-2">Element 2</view>

  <view class="view-3">Elements 3</view>

  <view class="view-4">Four elements</view>

</view>

Copy the code
/* test.wxss */

view {

  display: inline-block;

  padding: 10px

}

.view-wrapper { background: gold; }

.view-1 { background: greenyellow; }

.view-2 { background: blueviolet; }

.view-3 { background: orange; }

.view-4 { background: pink; }

Copy the code

The running results are as follows:

① Relative positioning

Moving relative to the starting point of its position in the document flow, as an example, here we add the following style to element 2:

position: relative;

left: 50rpx;

top: 50rpx;

Copy the code

The running results are as follows:

As you can see, element 2 is offset 50rpx from the starting point to the left and above. Here’s a detail: the space before the offset is still there! For example, set a margin-left for the outer elements: 50rpx; After running, the effect is as follows:

② Absolute positioning

Completely removed from the document flow and placed anywhere on the page. Delete “margin-left:50rpx” and “relative”; Instead of absolute; The running effect is as follows:

As you can see, the space before the offset has been deleted! The absolute layout is positioned like this:

Locate relative to its parent element. If the parent element has no location set, locate the parent element and work up until the parent element is unknown. If not, locate relative to the body of the document. We can set position: relative to the outer view and run it to see the effect:

The numeric red dot like the shopping cart is usually achieved by absolute positioning. You can also control the overlapping order by using the Z-index attribute, with the highest value above. Change the style:

/* index.wxss */

.view-1 {

  background: greenyellow;

  position: absolute;

  left: 0rpx;

}

.view-2 {

  background: blueviolet;

  position: absolute;

  left: 108rpx;

  top: 20rpx;

}

.view-3 {

  background: orange;

  position: absolute;

  top: 100rpx;

  left: 20rpx

}

.view-4 {

  background: pink;

  position: absolute;

  left: 100rpx;

  top: 80rpx;

}

Copy the code

The running results are as follows:

Add index-z attribute to control overlapping order:

/* index.wxss */

.view-1 {

  background: greenyellow;

  position: absolute;

  left: 0rpx;

  z-index: 50;

}

.view-2 {

  background: blueviolet;

  position: absolute;

  left: 108rpx;

  top: 20rpx;

  z-index: 30;

}

.view-3 {

  background: orange;

  position: absolute;

  top: 100rpx;

  left: 20rpx;

  z-index: 20;

}

.view-4 {

  background: pink;

  position: absolute;

  left: 100rpx;

  top: 80rpx;

  z-index: 10;

}

Copy the code

The running results are as follows:

③ Fixed positioning

Fixed: Similar to absolute. It is also fixed when it is off the screen. The reference is a window. The product details page, for example, has a buy button fixed at the bottom that scrolls normally. Window-based hoverboxes and so on.

0x8 float and Clear float

Moves the element out of the flow of the document in the specified direction (left or right) until the outer edge hits the border that contains the box or another floating box. Vertical arrangement before floating, horizontal arrangement after floating; Float property, optional value left left, right right. Write an example to try it out, reuse the above WXML and set it to a new style:

/* test.wxss */

view > view {

  line-height: 100rpx;

  width: 140rpx;

  text-align: center;

}



.view-1 {

  background: greenyellow;

}



.view-2 {

  background: blueviolet;

}



.view-3 {

  background: orange;

}



.view-4 {

  background: pink;

}

Copy the code

The running effect is as follows:

Then set a floating float to the right for element 1 :right; The running results are as follows:

If you want to adjust the position of element 1, you can set margin. For example, set margin-right:20rpx;

Then if we set a float to the right for element 2 as well:

In order to the right, the reason why it is not attached to the right like element 1 but to the left of element 1, because it hit the element 1 float box. Then set a right float for element 4:

There is another case to note, change the style file to:

/**index.wxss**/



view > view {

  line-height: 100rpx;

  width: 240rpx;

  float: left;

  text-align: center;

}



.view-1 {

  background: greenyellow;

  height: 140rpx;

}



.view-2 {

  background: blueviolet;

}



.view-3 {

  background: orange;

}



.view-4 {

  background: pink;

}

Copy the code

The contain box is too narrow to accommodate the three floating elements arranged horizontally, so the other floating blocks move down until there is enough space. If floating elements are of different heights, they can get “stuck” by other floating elements as they move down.

Moving on to “clear float”, this is the example code:

<! -- test.wxml -->

<view class="view-wrapper">

  <view class="view-1">Element 1</view>

  <view class="view-2">Element 2</view>

</view>

Copy the code
/* test.wxss */

page {

  background: gray;

}



.view-wrapper {

  width: 75%;

  background: gold;

  padding: 10rpx;

}



view > view {

  width: 240rpx;

  text-align: center;

}



.view-1 {

  background: greenyellow;

}



.view-2 {

  background: blueviolet;

}



.view-3 {

  background: orange;

}



.view-4 {

  background: pink;

}

Copy the code

The running results are as follows:

We then set the left and right floats for both elements as follows:

Oh, my God. What happened? Float effects can be effected by setting the property overflow: hidden; To clear the float.

You can also add a component and set clear:both to achieve the same effect.

<view style="clear:both"/>

Copy the code

There is another way to play it: add it directly with the fake element: After

.view-2:after {

  content: "";

  display: block;

  clear: both;

}

Copy the code

Of course, you can also write the height of the container element ~

0x9 Multi-column layout

CSS3 has added a multi-column layout, which is very convenient to implement “text multi-column” and “waterfall flow”, by the way

The related attributes are as follows:

  • Column-rule-style: the border style between columns;
  • Column-rule-width: border thickness of two columns;
  • Column-rule-color: border color of two columns;
  • Column-rule: shorthand for all the above attributes. Example: Column-rule: 1px solid lightblue.
  • Column-count: creates multiple columns and specifies the number of columns to be divided.
  • Column-width: specifies the width of the column.
  • Columns: short for column-width and column-count.
  • 13. column-gap: the gap between columns;
  • Column-span: specifies whether to display data across multiple columns.
  • Column-fill: specifies how to fill columns;

An example of code for multiple columns of text is as follows:

<! -- test.wxml -->

<view class="view-wrapper">

  <view class="view-1">Hello everyone, I am a personal exerciser who has been practicing for two and a half years. I like singing, dancing, rap, basketball and Music!</view>

</view>

Copy the code
/* test.wxss */

.view-1 {

  columns:auto 5;

  column-rule: 5rpx solid lightblue;

}

Copy the code

The running results are as follows:

An example of implementing a simple picture waterfall flow is as follows:

//test.js, add a bunch of image urls

Page({

  data: {

    pics: [

      "Http://img4.imgtn.bdimg.com/it/u=529905932, & FM = 26 & gp = 0. 1803087578 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=823139735, & FM = 26 & gp = 0. 3514716232 JPG".

      "Http://img4.imgtn.bdimg.com/it/u=529905932, & FM = 26 & gp = 0. 1803087578 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=2958310391, & FM = 26 & gp = 0. 871610286 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=2958310391, & FM = 26 & gp = 0. 871610286 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=2958310391, & FM = 26 & gp = 0. 871610286 JPG".

      "Http://img2.imgtn.bdimg.com/it/u=3924656228, & FM = 26 & gp = 0. 1474918552 JPG".

      "Http://img4.imgtn.bdimg.com/it/u=529905932, & FM = 26 & gp = 0. 1803087578 JPG".

      "Http://img2.imgtn.bdimg.com/it/u=3924656228, & FM = 26 & gp = 0. 1474918552 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=823139735, & FM = 26 & gp = 0. 3514716232 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=2958310391, & FM = 26 & gp = 0. 871610286 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=2958310391, & FM = 26 & gp = 0. 871610286 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=823139735, & FM = 26 & gp = 0. 3514716232 JPG".

      "Http://img2.imgtn.bdimg.com/it/u=3924656228, & FM = 26 & gp = 0. 1474918552 JPG".

      "Http://img5.imgtn.bdimg.com/it/u=823139735, & FM = 26 & gp = 0. 3514716232 JPG".

      "Http://img4.imgtn.bdimg.com/it/u=529905932, & FM = 26 & gp = 0. 1803087578 JPG".

      "Http://img2.imgtn.bdimg.com/it/u=3924656228, & FM = 26 & gp = 0. 1474918552 JPG".

    ]

  },

})

Copy the code
<! -- test.wxml, use wx:for to generate control -->

<view class="content">

  <block wx:for="{{pics}}">

    <image src="{{item}}" mode="widthFix"></image>

  </block>

</view>

Copy the code
/* test.wxss */

page {

  background: gray;

}



.content {

  columns: auto 3;

  width: 100%;

  column-gap: 5rpx;

}



image {

  width: 100%;

  display: block;

  box-sizing: border-box;

  padding: 5rpx;

}

Copy the code

The running results are as follows:

Waterfall flow is implemented, but the lime jam in the lower left corner is cut in half. If you don’t want to cut it, you can set the “break-inside” property for the child element to prevent unexpected interruptions in multi-column layouts, paged media, and multi-region contexts. Add this directly to the image style:

break-inside: avoid;

Copy the code

The results after running are as follows:

0x10 Flex Flex Layout

After learning the previous content, we can use display, position, float layout, but it is not flexible. In 2009, the W3C introduced a new layout solution: Flex Flex layout, which enables easy, complete, and responsive implementation of multiple page layouts. Any element can have an elastic layout enabled. An element with a Flex layout is called a “Flex container,” and all of its children automatically become members of the container, called “Flex Items.”

Notice the “main axis” and “side axis” above, which are actually “horizontal” and “vertical” directions. Flex properties are divided into two parts: “Container Properties” and “Project Properties,” as shown below:

Because of the large property, limited to be, or not show the specific effect one by one, has a corresponding effect on Runoob show, reader please visit: www.runoob.com/cssref/css3. , check learning:

Two final points about Flex:

The first point

After setting the Flex layout, the float, clear, and vertical attributes of the child elements are invalidated!

The second point:

Inline elements can also use the Flex layout, setting display:inline-flex; Can.

0x0, layout actual combat: write a scratch butyouxian home page

Tips: Because the content is too much, the actual combat part split into another article: juejin.cn/post/684490…

summary

I believe that readers after learning this section, the basic can deal with the daily small program page stacking. This kind of practical operation is stronger things, do not remember, suggest that they find small program imitation write, practice makes perfect, don’t say no design draft, no pictures no size, the last section of the decompilation skills??

I am not a professional front end, the above content is now learn now sell, if there are any mistakes or suggestions, welcome to comment, thank you ~ source code rearrange to throw Gayhub, after the address ha ~(in addition, I have been in Shenzhen for 3 and a half years Android hole)

References:

  • CSS px and physical pixels, logical pixels, 1px border problems
  • Brief introduction to floating in the CSS and the impact of clearing floating
  • CSS columns layout tutorial for myself
  • Flex layout syntax tutorial
  • Flex- Elastic layout is so easy!!

If this article is helpful to you, welcome to leave a message, like, forward quality three lian, thank 😘~