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;/* Line up by default */
  /*flex-direction: column;/* Arrange the direction ：row（ Transverse forward ） | row-reverse（ back ） | column（ Vertical positive ） | column-reverse*/
  /*flex-wrap: nowrap;/* If it's a line ： How to wrap ：nowrap（ Don't wrap , Default ） | wrap（ positive ） | wrap-reverse（ reverse ）*/
  /*flex-flow: row nowrap;/* Abbreviations of the above two forms */
  justify-content: space-around;/* What's in it ( level )： Align left start,end Right alignment ,center In the middle , One line only takes effect （ The transverse ）：between Both ends are aligned at equal intervals ,around：...*/
  align-items: flex-start;/* vertical ： Align left flex-start,..end Right alignment ,..center In the middle ,baseline , stretch*//**//**//**/
  /*align-content:flex-end ;/* Multiple axes work */
  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 result ：

Everything else is easy to say , Let's focus on justify-content Two kinds of properties （ One line works ）：

（1）space-around： Uniform distribution , Keep both ends

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

When two attributes are written at the same time , Just play the first role , Because the second is invalid on multiple lines ：
So the second line is whether to write , It's all like this ：

---

If you change it to horizontal arrangement （1 That's ok ）：（ Evenly arranged and distributed ）

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

（2）space-between： Uniform distribution , Leave no ends

Empathy , If it is multiple lines , It doesn't work .
If it's a line ：

in addition , When I test flex-end and center when , It is also invalid for multiple lines , One line is valid .
If you want these two attributes of multiple lines to take effect ：

4、 summary ：

The following is a list of common situations ：

（1） The arrangement of a row ：

• 1、 Element order post ：

 display: flex;/* Line up by default */
  flex-direction: row;
  justify-content: flex-end;

• 2、 Elements are placed in reverse order ：

 display: flex;/* Line up by default */
  flex-direction: row-reverse;

• 3、 Compact Center ：

 display: flex;/* Line up by default */
  flex-direction: row;
  justify-content: center;

• 4、 Evenly distributed ：
  justify-content:space-between：
  
  justify-content:：around： Keep the beginning and end
  
• Center lines ： align-items:center ; Multiline postposition ：align-items:flex-end ;