用微信开发者工具写了一下京东的首页；总结在页面编写中遇到的一些需要注意的地方；
先看下页面；
jd.png
在制作这个项目列表的时候，发现项目循环出来以后，并不是直接就排列在容器里面，需要添加一个flex-flow:nowrap；和
flex弹性布局里面有：
flex-direction: row（初始值） | row-reverse | column | column-reverse flex-wrap: nowrap（初始值） | wrap | wrap-reverse；
flex-direction定义了弹性项目在弹性容器中的放置方向，默认是row，即行内方向（一般而言是由左往右，但注意这个和书写模式有关）。
flex-wrap定义是否需要拆行以使得弹性项目能被容器包含。*-reverse代表相反的方向。
图片.png
第二个地方就是使用scroll-view横向滚动的时候不能显示出来；
竖向滚动视图没什么大问题，只需要设置height就OK了，但是横向滚动需要注意两个问题；
1、display:inline-block; 设置子元素容器为行间模块： 解释一下display的几个常用的属性值，inline ， block， inline-block;
2、inline:（1） 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. （2）不能更改元素的height，width的值，大小由内容撑开. （3）可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行.
3、block:（1）使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. （2）能够改变元素的height，width的值. （3） 可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果. inline-block: 结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
用通俗的话讲，就是不独占一行的块级元素。
2、设置父元素容器white-space: nowrap;容器不换行显示： 基本就能解决这个问题了；
滚动视窗
网友评论