【微信小程序】flex布局使用记录

测试代码：

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、测试结果：

其他都好说，我们重点看justify-content属性的两种（一行才起作用）：

（1）space-around：均匀分布，保留两端

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

当着两个属性同时写时，仅仅起第一个的作用，因为第二个在多行无效：
所以第二行写不写，都是下面这个样子：

---

如果改成横向排列（1行）：（均匀排列分布）

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

（2）space-between：均匀分布，不留两端

同理，如果是多行，则无效。
如果是一行：

另外，当我测试flex-end和center时，也是多行无效，一行有效。
如果想要多行的这两个属性生效：

4、总结：

以下列出常用的情况：

（1）一行的排列情况：

• 1、元素顺序后置：

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

• 2、元素倒序后置：

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

• 3、紧凑居中：

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

• 4、均匀分散：
  justify-content:space-between：
  
  justify-content:：around：保留首尾
  
• 多行居中： align-items:center ;多行后置：align-items:flex-end ;