微信小程序day02_02之flex-wrap

flex-wrap 用于控制换行 其默认值为 nowrap 即不换行 wrap 为对其进行换行.

代码演示如下 在上一节的代码中, index.wxss进行修改 把.size的宽度改为 250rpx 把flex-wrap: wrap;进行设置

.container{

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

  flex-wrap: wrap;
}

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

显示效果如下 如果不设置flex-wrap: wrap; , 即默认的nowrap, 显示效果如下 不换行, 并且把这一行中,每一个元素,进行了均分. 一行为750个rpx 如果设置了wrap-reverse , 那么显示效果如下 ,代表了进行换行,并进行反向的换行