首先声明这篇文章是讲CSS的，对CSS没有兴趣的朋友请果断关闭。
其次，这篇文章主要是讲flex布局的，如果对flex布局已经了如指掌，可否交个朋友？
最后需要说明一下，这篇文章并不能作为flex布局的属性速查表，里面涉及到的知识并不全面，仅仅能实现本文的DEMO，需要了解flex布局详细知识的同学，请自行检索其他资料。
说了三句废话，那这篇文章究竟能为你带来什么呢？相信通过标题你已经感受到了（我承认有点标题党，但实在不知道怎么吸引高冷的你们点击进来），本文旨在向大家展示flex弹性布局的强大和简洁！结合实例探索flex布局的奥妙和精髓！相信很多人都有这样的感受，看CSS属性速查表的时候，觉得全都记住了，但一遇到实际项目，总是想不起来应该用哪个属性。因此本文先抛出需求，然后反推技术实现，相信这样一定会给大家留下较为深刻的印象。
在正式开始之前，说几句题外话（好像一直在说题外话，也太啰嗦了吧！但真的忍不住想说），最近看到很多关于前端开发者不想写CSS的文章，甚至有人吐槽写CSS太low，但本人觉得CSS真的是很强大，而且十分优雅，有点像美图秀秀，可以让一个原本很丑的界面瞬间光彩夺目！尤其是CSS3的一些特性，真的是很强悍了，而且本人也涉猎过原生IOS开发和安卓开发，如果你也像我一样做过原生开发的界面布局，相信你一定会认为flex布局真的太强大了有木有！这也是为什么混合开发大行其道的原因吧？因为开发界面真的是so easy！
首先让我们看一下要实现的最终效果，图片展示的也是本次DEMO最终的呈现，由于时间关系我没有准备图片素材，因此有些地方直接用了色块，请谅解。
模仿简书APP首页的布局
假设这是你此刻的任务，而且领导要求你半小时搞定，那我们就赶紧开始吧！
首先，笔者有一个习惯，就是先写页面结构，并且在标签中先定义好class-name，然后再针对页面结构和class-name编写具体的CSS，这就好比盖房子，一定是先盖楼，然后是贴瓷砖、粉刷、装修......
那我们就先盖楼：
<div class="page">
<header>
<ul>
<li class="active">推荐</li>
<li>专题</li>
<li>连载</li>
<li>会员</li>
</ul>
<a class="btn-search">search</a>
</header>
<div class="content">
<ul>
<li>
<h1>前端入门5-CSS弹性布局flex 前端入门5-CSS弹性布局flex</h1>
<div class="img-panel">
<div class="img-div">
<img />
</div>
<div class="img-div">
<img />
</div>
<div class="img-div">
<img />
</div>
</div>
<div class="base-info">
<span class="zuan">1.66</span>
<span class="nick-name">不再是从乾</span>
<span class="like">666</span>
</div>
</li>
<li>
<h1>为什么恋爱中的男性总想摸女生的胸</h1>
<div class="text-panel">
为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸
为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸
为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸为什么恋爱中的男性总想摸女生的胸
</div>
<div class="base-info">
<span class="zuan">1.66</span>
<span class="nick-name">不再是从乾</span>
<span class="like">666</span>
</div>
</li>
</ul>
</div>
<footer>
<a>刷新</a>
<a>关注</a>
<a>创建</a>
<a>消息</a>
<a>我的</a>
</footer>
</div>
我看可以看到目标页面整体呈现了一个由上到下的流式布局（请忽略里面的内容，你们懂我在说什么......），其实是很常见也比较简单的一种界面。还是拿盖楼房来举例子，建筑一定是先打地基，然后搭建整体框架，承重墙，然后进一步实现细节构造。开发一个UI界面也是如此，我们尽量保持由大到小、由外到内、由粗到细的顺序来进行。
我们分析上面的页面结构发现，整个页面有一个根容器，class-name为page，其中大的板块有三个，分别是header、content和footer，header里面又包括了tab菜单和一个搜索按钮；footer里面有五个按钮，内容区域里展示了新闻列表。在我们给这些结构编写CSS之前，让我们先熟悉一些概念。
容器
容器，顾名思义，就是里面能装东西的器皿，在这里我们姑且先叫它为盒子吧。
元素
元素就是放在盒子（容器）里面的东西。
是不是很简单？但接下来大家一定要记住另外一个概念，元素就只能是元素吗？容器就非得是容器吗？当然不是，他们都可以成为彼此，也就是说，容器有可能是元素，元素也有可能是容器，虽然有点绕口，但其实非常好理解，举个例子，盒子A里面放了一个盒子B，盒子B里面放了一个小球。在这个场景下，盒子A是容器，盒子B也是容器，因为它里面放着小球，但盒子B又是元素，因为它放在盒子A里面。实际的界面开发也一样，比如一个div，它可能是某个父节点的元素，也可能是包含了其他子元素的父容器，我们在给它编写css的时候，只需要分别处理好它作为容器应该实现哪些样式以及作为子元素应该具备哪些特性就可以了。
好了，明白了这三个概念，那我们就来想想，布局是什么？为什么要布局？还是上面的例子，假如盒子A里面放了很多盒子，每个盒子里又放了很多小球，如果不对他们进行有规则的整理和摆放，那一定会十分丑陋和杂乱无章。因此，布局就是对事物进行合理有序的规划、安排、整理，使其更加竟然有序和美观。
界面开发的布局也是如此，一个好的布局能带给用户良好的阅读和操作体验。
那么布局的核心要素是什么？其实上面已经提到了，很简单，无非两点：摆放顺序、排列规则。flex布局的所有属性其实都是在定义摆放顺序和排列规则，了解了布局的这些基本要素，去理解和开发flex布局就会非常容易了。
让我们回到DEMO界面的开发，由于不同浏览器对原生标签都具有默认样式，并且这些样式是有一定差异的，因此我们需要统一覆盖常见标签的默认风格，代码如下。
代码
其中……
（由于时间关系，今天先写到这里，请期待明天的更新......）
网友评论