Summary of wechat applet display style knowledge points

1. view Label of flex Layout

flex namely HTML Medium inline, Change block elements into inline elements

display: flex;

1.1 flex Direction selection of layout

Set up flex After layout , You can choose horizontal layout or vertical layout , There are four ways

flex-direction: 
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-reverse：     The vertical direction from bottom to top is the main axis 

1.2 Other options for horizontal and vertical layout

• The horizontal layout justify-content

  flex-start         Start on the left ( The default value is )
  flex-end         From the right 
  flex-center         align horizontal center 
  space-between     full-justified 
  space-around     The distance between each element is equal , And there is an equal distance between the head and the tail 

• Vertical layout align-items

  stretch             Fill the entire container longitudinally 
  flex-start         Start at the top 
  flex-end         Start at the bottom 
  center             Vertically centered 
  baseline          Align with the first line of text of the child element  ??

Son view A property is align-self, He has five choices for vertical layout , Plus auto

1.3 control view Do you want to change lines

flex-wrap:
    nowrap           Don't wrap ( Default )
    wrap             Line break 
    wrap-reverse     Line break , The first line is at the bottom 

Reference documents : https://www.cnblogs.com/sun8134/p/6395947.html

2. Line break , Single space , Consecutive spaces

• Line break \n It should be noted that , Text that needs to wrap , Must be wrapped in text In the label
• Single space have access to \t, Multiple \t Show only one space , To display multiple spaces , You can use the following method
• Consecutive spaces When parsing multiple spaces Need to be wrapped in `` In the label , If the page displays You need to add decode="{true}"

   You can directly connect multiple spaces here , Can recognize 
   Hello   ah   Ha ha ha （ The space is half the size of Chinese characters ）
   Hello   ah   Ha ha ha （ The space is the size of Chinese characters ）
   Hello   ah   Ha ha ha （ The space is set according to the font ）

   or 

   Hello   ah     Ha ha ha （ The space is half the size of Chinese characters ）
   Hello   ah     Ha ha ha （ The space is the size of Chinese characters ）
   Hello   ah     Ha ha ha （ The space is set according to the font ）

3. shadows

• Box model shadow box-shadow Shadow of the vulva ： box-shadow: Shadowy X Axis ( You can use negative values ) Shadowy Y Axis ( You can use negative values ) Shadow blur value （ size ） Color of shadow ; X The positive value of the axis indicates that the direction is right ,Y A positive value of the axis indicates that the direction is down Inner shadow : On the basis of the outer shadow, add inset X The positive value of the axis indicates that the direction is left ,Y The positive value of the axis indicates that the direction is up
• Text shadow text-shadow Attributes of the outer shadow with the box model , Consistent function No inner shadow Reference documents : http://www.cnblogs.com/wuchuanlong/p/5980766.html

4. Gradient effect gradients

• Linear gradient （Linear Gradients）- Down / Up / towards the left / towards the right / Diagonally
• Radial Gradient （Radial Gradients）- Defined by their center

  //  From top to bottom ( Default )
  background: linear-gradient(red, blue); 
  //  From left to right 
  background: linear-gradient(to right, red , blue);
  ...

Reference documents : https://blog.csdn.net/u010377372/article/details/79721725

solve "\n" Unable to achieve line feed effect

In the database \n When taken out, it will become \\n, And in the small program text The effect of line breaking should be achieved in the component , You need to \\n convert to \n.

resolvent ：

content.replace(/\\n/g, "\n");

file ：https://blog.csdn.net/zhangying1994/article/details/86552970