默认在 Flex 容器里的项目会在同一行显示 .. 使用 flex-wrap 这个属性,我们可以控制项目是否要在多行显示 .. 这里再去添加几个项目 ...
div.item.item-$@6*7>span{ $@6 }
现在所有的这些项目都是在同一行显示 .. 在这个 container 上面,使用一个 flex-wrap 属性 .. 默认这个属性的值是 nowarp ,意思就是不换行 ..
这里再把它设置成 wrap .. 你会看到容器里的项目会根据容器的宽度在多行显示 ... 在这个 warp 后面再加上一个 reverse .. 会颠倒每排内容的位置 .. 刚才最上面这排项目会跑到容器的底部 .. 容器底部那排项目会跑到最上面来 ..