微信小程序学习笔记（四）

设置在主轴上的排列方式：
默认情况下，主轴的方向是从左到右。在主轴方向上，可以通过 justify-content 属性来设置他们的排列方式。排列方式有以下几种：

1. flex-start ：项目靠近父盒子的左侧。默认采用的就是这种排列方式。示例图如下：

2 flex-end ：项目靠近父盒子的右侧。

2. center ：所有项目会挨在一起在父盒子的中间位置。

3. space-around ：项目沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

4. space-between ：项目沿主轴均匀分布，位于首尾两端的子容器与父容器紧紧挨着。

5. space-evenly ：项目在主轴上均匀分布，收尾两端的自容器到父容器的距离跟自容器间的间距是一样的。

设置在侧轴上的排列方式：
默认情况下，侧轴的方向是从上到下。在侧轴方向上，可以通过 align-items 属性来设置他们的排列方式。排列方式有以下几种：
6. flex-start ：起始端对齐。默认就是这种对齐方式。

7. flex-end ：末尾段对齐。

center ：中间对齐。

8. stretch ：如果项目没有设置高度。那么子容器沿交叉轴方向的尺寸拉伸至与父容器一致。比如我们将 .inner 的高度属性去掉，代码如下：

.outter .inner{  background: gray;  width: 100px;  /* height: 100px; */  border: 1px solid #ccc;
}

效果图为：

9. baseline ：基线对齐，这里的 baseline 默认是指首行文字，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。比如我们把代码改成如下：

<view class='outter'>
 <view class='inner'>
   <view style='margin-top:10px;background:#eee;'>hello</view>
 </view>
 <view class='inner'>2</view>
</view>

然后 wxss 文件为：

.outter{  display: flex;  align-items: baseline;  width: 300px;  height: 200px;  background: pink;
}
.outter .inner{...}

那么效果图为：

更换主轴和侧轴方向
主轴默认的方向是从左到右，侧轴的方向默认是从上到下，当然也可以进行修改。可以通过 flex-direction 进行修改。可以修改的参数为以下：
11. row ：默认属性。从左到右。

12. row-reverse ：从右到左。

column ：从上到下。

13. column-reverse ：从下到上。
    
    换行
    默认情况下，元素个数如果超过一定数量，那么在一行当中就排列不下。此时 flex 默认的处理方式是压缩元素，使其能在一行中排列下来。比如以下代码：

<view class='outter'>
  <view class='inner'>1</view>
  <view class='inner'>2</view>
  <view class='inner'>3</view>
  <view class='inner'>4</view>
</view>
.outter{   display: flex;   width: 300px;   height: 200px;   background: pink; }
.outter .inner{   background: gray;   width: 100px;   height: 100px;   border: 1px solid #ccc;
}

那么会把这四个元素挤压在一行中。即使给元素设置了宽度也没有用的。效果图如下：

可以通过 flex-wrap 来改变排列的方式。可以设置的属性如下：

1. nowrap ：不换行。默认的。
   
2. wrap ：换行。
   
   wrap-reverse ：换行，但是第一行会在下面。