移动端屏幕很小，为了呈现更多的内容，并占用更小的空间，但是又不能影响正常阅读，就出现了现在潮流的设计手法：十字交互法则，卡片横向无限滚动就是其诞生的排版布局之一，不过十字交互最初是在大屏端(电视UI)出现的，随着设计的不断演变，现在在APP，H5设计中也经常见到其身影。

大屏设计：

app设计：

那么对于这样的ui，H5页面中，前端怎么最简单的实现其功能呢？

首页原理：父级盒子定义可横向滑动，不允许子元素换行，子元素全部设置为行内块即可实现！

父级css溢出不换行，横向滚动代码： 

overflow-x: scroll; -webkit-overflow-scrolling:touch;display: -webkit-box;white-space: nowrap;

子元素全部设置为行内块： 

display: inline-block;

这样就能实现这样的布局效果了，其中最重要的一定就是 父元素不允许子元素换行white-space: nowrap的妙用了，初级前端都对这个标签不熟悉，看这《white-space 设置或检索对象内 “空格” 的处理方式》