复习 Flex 布局 排列和对齐

<view class="container">
  <view class="s1">A</view>
  <view class="s2">A</view>
  <view class="s3">A</view>
  <view class="s4">A</view>
</view>

.container{
  display: flex;
  background-color: pink;
  height: 200px;
  /* 排列方向 */
  /* 横向-顺序 */
  flex-direction: row;
  /* 横向-逆序 */
  /* flex-direction: row-reverse; */
  /* 纵向-顺序 */
  /* flex-direction: column; */
  /* 纵向-逆序 */
  /* flex-direction: column-reverse; */
  
  /* X轴的排列方式 */
  /* 起点对齐，就是左对齐 */
  /* justify-content: flex-start; */
  /* 右对齐 */
  /* justify-content: flex-end; */
  /* 居中对齐 */
  /* justify-content: center; */
  /* 两端对齐 */
  /* justify-content: space-between; */
  /* 等分对齐 */
  justify-content: space-around;

  /* Y轴的排列方式 */
  /* 顶端对齐 */
  /* align-items: flex-start; */
  /* 底部对齐 */
  /* align-items: flex-end; */
  /* 垂直居中对齐 */
  /* align-items: center; */
  /* 拉伸上下两端对齐  里面是项的高度要设置