彈性容器(flex-direction)

row:橫向
column:縱向

<view class='flex-container'>
  <view class='view-size bg-red'></view>
  <view class='view-size bg-green'></view>
  <view class='view-size bg-yellow'></view>
</view>

.flex-container{
  display: flex;
  flex-direction: row;
  background-color: lightcyan;
  height: 800rpx;
  width: 100%;
}

.view-size{
  height: 200rpx;
  width: 200rpx;

}
.bg-red{
  background-color: red;
}
.bg-green{
  background-color: green;
}
.bg-yellow{
  background-color: yellow;
}

在flex.wxss的.flex-container中加入
justify-content: flex-start
左對(duì)齊

justify-content: flex-end
右對(duì)齊
justify-content: center
居中
這里沒有flex
justify-content: space-between
散列效果 貼兩邊

justify-content: space-around
平分對(duì)齊 不貼兩邊

藍(lán)箭頭指向的位置是紅箭頭指向位置的一半
align-items: center

這一句是代表主軸方向的垂直居中
這里的主軸是row