flex布局方法详解之flex-wrap

首先声明,本文参考了阮一峰老师的博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

本文结合微信小程序 来对flex布局做一个说明,用到了view组件,其实你只需要把view看成DIV就行了。

问题2:假如一个flex盒子里面有N多个view,会咋样?

呀呀呀,这可咋整,咋不换行呢?

尊敬的各位领导,各位同学,女士们,先生们。接下来,我们要介绍一位重量级的嘉宾。 为了解决flex盒子中子元素过多而换不了行的问题,这位嘉宾可是做出了卓越的贡献,他就是 -- flex-wrap !

它可能取三个值。 (1)nowrap(默认):不换行。

刚刚的那种情况就是 flex-wrap: nowrap 的情况。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

css3动画代替js脚本实现欢迎页面动画

两者都能实现类似效果,但是在css3动画中可以实现跟多的细节,通过transition-timing-function是不是可以做跟多的改变呢,现在流行的趋势中...

1032
来自专栏Youngxj

一张好看的404页面源码

1706
来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

801
来自专栏我和未来有约会

Silverlight网络寻奇 at 090413

Silverlight网络寻奇 at 090413 Silverlight测试驱动开源项目 http://code.google.com/p/moq/ 很co...

3416
来自专栏快乐八哥

Facebook Like Button在IE上的bug

项目主要是欧美项目,所以大多数网站都要集成Facebook,Twitter和Email三个功能。随着Google大力推广Google+,而且现在图片分享也很火热...

17510
来自专栏互联网杂技

css负边距之详解

自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。 对于所有设计师使用过的CSS概念,负边距...

3248
来自专栏狮乐园

高级 Angular 组件模式 (1)

Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的an...

692
来自专栏杨龙飞前端

网页html结构搭建方法总结

3196
来自专栏编程微刊

移动端iPhone系列适配问题的一些坑

1802
来自专栏IT派

10个免费好用功能强大的网页动画效果库

动效设计是2018年的热门趋势之一。如果你仔细找找的话,会发现许多有趣的用来构建UI动效的工具,而这些素材和工具正在成为越来越多设计项目中不可或缺的催化剂。今天...

1060

扫码关注云+社区