flex布局方法详解之flex-wrap
2018-06-19 本文已影响0人
剽悍一小兔
首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
本文结合微信小程序 来对flex布局做一个说明,用到了view组件,其实你只需要把view看成DIV就行了。
问题2:假如一个flex盒子里面有N多个view,会咋样?
![](https://img.haomeiwen.com/i1929342/24096932b03baead.png)
![](https://img.haomeiwen.com/i1929342/fa0ddb7381b12af7.png)
![](https://img.haomeiwen.com/i1929342/79d4fa327f62fdc0.png)
呀呀呀,这可咋整,咋不换行呢?
尊敬的各位领导,各位同学,女士们,先生们。接下来,我们要介绍一位重量级的嘉宾。
为了解决flex盒子中子元素过多而换不了行的问题,这位嘉宾可是做出了卓越的贡献,他就是 -- flex-wrap !
它可能取三个值。
(1)nowrap(默认):不换行。
刚刚的那种情况就是 flex-wrap: nowrap 的情况。
(2)wrap:换行,第一行在上方。
![](https://img.haomeiwen.com/i1929342/43985887d80e2d6f.png)
![](https://img.haomeiwen.com/i1929342/68eefc9c37886930.png)
(3)wrap-reverse:换行,第一行在下方。
![](https://img.haomeiwen.com/i1929342/0f680a269cd8dcb8.png)