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 条评论
登录 后参与评论

相关文章

来自专栏无所事事者爱嘲笑

优秀的前端需要做到什么?

1623
来自专栏ATYUN订阅号

Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序,可以使大家更有意思、也更加轻松地学习算法和数据结构。...

4385
来自专栏HT

从IE6到IE11上运行WebGL 3D遇到的各种坑

这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行...

2285
来自专栏互联网杂技

JavaScript就要统治世界了?

" JavaScript 可以……" "嘛,不就是操作一下 DOM,可以让元素飞来飞去吗" "JavaScript 是……" "不就是用 jQuery 让网页动...

3126
来自专栏天天P图攻城狮

iOS 开发实践:iOS照片API的那些坑

在和图片打交道的那些日子里,遇到过不少图片相关的诡异问题。 在这里不会具体对照片API做介绍,而只会对其中的一些坑做一些总结。

4484
来自专栏HT

基于HTML5的燃气3D培训仿真系统

最近上线了的基于HTML5的燃气3D培训仿真系统,以前的老系统是采用基于C++和OpenGL的OpenSceneGraph引擎设计的,OSG引擎性能和渲染效果各...

2095
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Cowbell

课程内容 Ø Playing sound effects Ø Composition target’s rendering event     Cowbe...

1729
来自专栏CSDN技术头条

前端请进:玩转Angular 注射器

? 2009 年 AngularJS 第一个把“依赖注入”机制引入到了前端开发中,开创了用后端设计思想大规模入侵前端领域的先河。 如果没有深入使用过 Spri...

4327
来自专栏携程技术中心

干货 | Qreact,去哪儿网的迷你react方案

作者简介 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师。在GITHUB拥有复数个著名的轮子,著有《javascript框架设计》一书...

3958
来自专栏phodal

我的职业是前端工程师【三】:学习前端只需要三个月【语言篇】

过去,我一直无法相信:一个新人在三个月里可以学好前端。后来,我信了。因为三个月后,我又是一个前端的新人,我又需要重新入门前端。 前端领域好似也有一个“摩尔定律”...

1959

扫码关注云+社区