<

网易云音乐—使用Flex进行界面构建布局解析(一)

wangyi_1 1.为什么要用flex进行webapp布局

第一,float布局 需要清除浮动,很麻烦。

第二,绝对定位需要考虑位置和空间占位

第三,元素垂直水平居中问题。

2.网易云音乐首页分析 wangyi_2 3.啥也别说,直接上代码

先来一个html,

别的不说咱们先用色块把各部分堆出来,这个跟flex没半毛钱关系,只是用了rem.

接着往下就是重点了,我们来看看头部细节细节,左右图标,

css部分,

那中间部分三个等距怎么办?

html,

上css,

结果如下: wangyi_2

最复杂的部分已经结束了,剩下的就很OK了。

最后给大家三个小尝试吧。

1.剩下的部分切出来。

2.解决动态的多屏幕适配问题(提示:js+rem动态计算)

3.flex兼容性(提示:postcss)