[WeChat Mini Program] Flex layout usage record

Test code:

1、xml:

<view class="A">
  <view class="AA">AA</view>

  <view class="AB">AB</view>

  <view class="AC">AC</view>
</view>

2、wxss:

.A{
    
    /**/
  display: flex;/*默认排成一行*/
  /*flex-direction: column;/*排列方向：row（横向正向） | row-reverse（反） | column（竖直正向） | column-reverse*/
  /*flex-wrap: nowrap;/*如果是一行：如何换行排列：nowrap（不换行，默认） | wrap（正向） | wrap-reverse（反向）*/
  /*flex-flow: row nowrap;/*上面两种形式的简写*/
  justify-content: space-around;/*里面的内容(水平)：左对齐start，end右对齐，center居中，一行时才生效（横向）：between两端对齐间隔相等，around：。。。*/
  align-items: flex-start;/*竖直：左对齐flex-start，..end右对齐，..center居中，baseline , stretch*//**//**//**/
  /*align-content:flex-end ;/*多根轴线才起作用*/
  width: 100%;
  height: 100%;
  background-color: rgb(223, 226, 210);
}
.AA{
    
    
  width: 10%;
  height: 20%;
  background-color: rgb(136, 20, 20);
}
.AB{
    
    
  width: 20%;
  height: 20%;
  background-color: rgb(52, 150, 69);
}
.AC{
    
    
  width: 40%;
  height: 20%;
  background-color: dodgerblue;
}

3. Test results:

Everything else is easy to talk about. Let’s focus on the two types of justify-content attributes (only one line works):

(1) space-around: evenly distributed, retaining both ends

flex-direction: column;
justify-content: space-around;

When two attributes are written at the same time, only the first one plays a role, because the second one is invalid in multiple lines:
Therefore, whether the second line is written or not, it will look like this:

---

If changed to horizontal arrangement (1 row): (evenly arranged distribution)

flex-direction: row;
justify-content: space-around;

(2) space-between: evenly distributed, leaving no ends

Similarly, if there are multiple lines, it will be invalid.
If it's a line:

In addition, when I test flex-end and center, multiple rows are invalid and one row is valid.
If you want these two properties to take effect for multiple rows:

4. Summary:

Commonly used situations are listed below:

(1) Arrangement of a row:

• 1. Element order is postfixed:

 display: flex;/*默认排成一行*/
  flex-direction: row;
  justify-content: flex-end;

• 2. Arrange elements in reverse order:

 display: flex;/*默认排成一行*/
  flex-direction: row-reverse;

• 3. Compact and centered:

 display: flex;/*默认排成一行*/
  flex-direction: row;
  justify-content: center;

• 4. Evenly disperse:
  justify-content:space-between:
  
  justify-content::around: keep the beginning and end
  
• Center multiple lines: align-items:center; Post-post multiple lines: align-items:flex-end;