微信小程序day02_01之flex-direction

一.flex-direction 的讲解和代码示例

flex-direction 用于控制容器内成员的方向, 行和列都可以进行控制

row 默认为从左到右的排序 row-reverse 为从右到左的排序 column 为从上到下的排序 column-reverse 为从下到上的排序

代码演示: 把全局的app.wxss 样式文件的内容全部进行注释,不让其生效. 在index.wxml中, 内容如下

  a
  b
  c
  d
  e

在index.wxss中的代码如下

.container{

  display: flex;

  
  /*flex-direction: row 
  //flex-direction: row-reverse*/
  /*flex-direction: column*/
  flex-direction: column-reverse

}

.size {
  width: 150rpx;
  height: 150rpx;
}

.a {
  background: red;
}
.b {
  background: gray;
}
.c {
  background: yellow;
}
.d {
  background: orange;
}
.e {
  background: green;
}

当flex-direction的值为 row的时候, 显示如下 可以看到 abcde 按照横向的从左到右的排序, 这是flex-direction默认的值 当flex-direction的值为 row-reverse的时候, 显示如下 可以看到 显示成了edcba , 左右的顺序进行了颠倒 当flex-direction的值为column的时候, 显示如下 变成了从上到下的排序 当flex-direction的值为column-reverse的时候, 显示如下 变成了从下到上的排序