点击此处查看最新的网赚项目教程
Flex布局是什么
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒装模型提供最大的灵活性。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了几乎所有浏览器的支持，我们可以在caniuse官网上看一下它的兼容性:
本文并不打算详细介绍flex布局，本文主要想介绍Flex布局的一种常见应用-内容均分布局。对Flex布局不了解或者想全面了解Flex布局的同学可以参考阮一峰的博客：。
内容均分布局
内容均分布局几乎是Flex布局最常见的需求了，如下图：
我们想让内容平均分布，同时又不能事先知道有多少列内容，那么Flex布局绝对是首选。当然，有同学会用js根据运行时确定的列数动态算出每列的宽度百分比，然后再设置样式，也是可以work的；不过话说回来，能用css解决的问题，为啥还用js呢~
我们来看一个实际的栗子：
我们设计一个多列（单列，两列，三列…）的筛选器picker，Flex布局就正好派上用场了。首先，我们看一下html布局：
这块就是flex布局的关键部分，对应的html代码：
外层元素我们通常称为Flex容器(flex container)，内层元素我们称为Flex项目(flex item)，我们再看看对应的css代码，首先是flex container的样式：
接下来是flex item的样式：
我们可以看到，为了更好的支持Flex布局，我们写了大量兼容性的代码，在标准浏览器下，父元素设置dislay:flex，子元素设置flex：1，即可达到我们想要的横向内容均分效果，是不是很棒呢~
文章到这里就结束了吗，说好的坑呢，too young too simple！细心的朋友发现，我们在flex item的css写了一行属性，width:1%，这个又是什么鬼，什么神奇的黑魔法吗？好，接下来我们就看一下，如果没这个css样式，会发生什么神(qi)奇(pa)的事情？
我们修改一下数据，把某一列某一条数据内容加长，如下图所示：
我们看到，内容过长的那一条数据被截断了，仍然保持了每列内容都是均分等宽的效果，nice~ 不过，等等，这是ios下的效果啊！我们再来看看万恶的android下的效果：
what the …！内容长的那个竟然无耻地把这列搞宽了，第一次看到这个的时候，你内心一定崩溃的：怎么会这样！
调整一下心情，我们再看，虽然列宽度不再相同，但是可以细心的发现，内容宽度不能等分了，不过每个部分的空白处的宽度确实相同的。所以我们机(hai)智(ke)地给flex item加上了width:1%（保证剩余空间相同），再刷一下看android，哇哦，和ios下效果一致，符合我们的预期，赞！
好了，再也不会听到Flex内容均分布局兼容性有问题的声音了，如果还有人质疑，把这篇文章甩他脸上:)
最后，放上picker筛选器的演示地址：，个人觉得这个组件在移动端用的效果还是蛮不错的（高仿ios的UIPickerView）。
这里是源码：
欢迎各位试用，贡献代码，提issue哟~
———END———
限 时 特 惠： 本站每日持续更新海量各大内部创业教程，一年会员只需98元，全站资源免费下载 点击查看详情
站 长 微 信： cai842612
admin
