小程序：随笔记（一）

classic.wxml

<!--pages/classic/classic.wxml-->
<view class="container">
  <view class="chunk color1">
    1
  </view>
  <view class="chunk color2">
    2
  </view>
  <view class="chunk color3">
    3
  </view>
</view>

classic.wxss

/* pages/classic/classic.wxss */

.container{
  display: flex;
  /* row column row-reverse column-reverse */
  flex-direction: row;
  /* view width:100%  height:自适应 */
  height: 200px;
  background-color: #9999;
  justify-content: center;  /* 主要用来控制方向  */
  /* center:中间对齐
    space-between:平均对齐， 靠左、靠右、中间平均分
    space-around:等距分布
  */
  /* 如果没有reverse，则上代表start,下代表end; 左代表start,右代表end */
  /* 主轴和交叉轴 
    当flex-direction: column;时，主轴是垂直方向，交叉轴是水平方向。
    justify-content是主轴方向上的排布方式，align-items是交叉轴方向上的排布方式
  */
  align-items: flex-start;
  /* stretch:交叉轴的拉伸方式
    baseline:保持每个子元素中的文字基线是对齐的。
  */
  flex-wrap: wrap;
  /* 换行 */
}

.chunk{
  /* 行内元素 */
  /* display: inline-block; */
  width: 150px;
  height: 100px;
  background-color: brown;
}

/* flex flexible box 弹性盒子 */
/* flex container --> flex item */

.color1{
  background-color: cadetblue;
}

.color2{
  background-color: cornsilk;
}

.color3{
  background-color: darkcyan;
}