flex 一点学习心得 暂存

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 */
.chunk{
  /*行内元素*/
  /* display:inline-block; */
  /* 已经放到 弹性盒子中，你再去指定样式已经是无效了 */
  /* display:block; */
  width: 150px;
  height: 100px;
}

/* 如果把几个块状元素放在弹性盒子中，那么它们的块状元素的特性就会消除了 */
.container{
  display: flex;
  /* 设置 column 将会实现 垂直排列的效果, 设置 row 将会实现 水平排列的效果 */
  /* 当你不去设置 flex-direction 的时候，会有一个默认值，此时是水平排列 */
  /* flex-direction: row; */
  /* 实现行 123 => 321 row-reverse, 实现列 123 => 321 column-reverse */
  /* qusetion: 为啥 column-reverse 不是从下往上排，而 row-reverse 是从右向左排 */
  /* (1) 因为 我们在容器中只有这三个方块的高度； 而容器中的宽度是大于三个方块的宽度的 
  （2） 高度是自适应的。
  */
  /* 关注点：
  view 这个容器本身是自适应的， 100% height
  */
  /* center: 居中； space-between: (flex-direction: row)水平方向实现平均分布
  space-around: 实现 等距 分布
   */
  /* 主轴  取决于 flex-direction  justify-content
     交叉轴 剩下的就是 align-items
     交叉轴的特性 ： stretch / baseline
  */
  /* 高度注释之后， 会自适应。 align-items: stretch 会呈现拉伸的效果,拉伸到整个容器的高度为止 
  baseline： 将以第一个子元素为基线，之后的每个子元素都以该文字的子元素基线为准
  */
  /* 在你设置 flex 盒子之后， 如果本身的宽度大于页面的宽度，(在不设置换行的情况下)那么会把页面的宽度进行 均分的处理*/
  /* height: 400px; */
  /* 在高度 有富余的情况下， 你设置 flex-wrap: wrap 换行之后，会出现居中的情况，那么怎么来改变这种情况呢？
  我们是不是可以从高度下手呢？
   */
  height: 200px;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  background-color: #999999;
}

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

.color1{
  background-color: brown
}

.color2{
  background-color: blue
}
.color3{
  background-color: gainsboro
}

转载于:https://my.oschina.net/u/3520255/blog/3044939